財団タグ


.label クラスは、いくつかの追加情報を提供するために使用されます: .label 类用于提供一些附加信息:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>Example <span class="label">New</span></h2>
  <h3>Example <span class="label">New</span></h3>
  <h4>Example <span class="label">New</span></h4>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

以下类可以设置标签的颜色: .secondary, .success, .info, .warning 或 .alert:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>标签样式</h2>
  <span class="label">Default Label</span>
  <span class="label secondary">Secondary Label</span>
  <span class="label success">Success Label</span>
  <span class="label info">Info Label</span>
  <span class="label warning">Success Label</span>
  <span class="label alert">Alert Label</span>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

圆角标签

.radius 与 .round

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>圆角标签</h2>
  <span class="label">Default Label</span>
  <span class="label radius">Radius Label</span>
  <span class="label round">Round Label</span>
  <span class="label success round">5</span>
</div>

</body>
</html>

Run Instance» オンライン インスタンスを表示するには、[Run Instance] ボタンをクリックします

次のクラスはラベル Color を設定できます: .secondary、.success、.info、.warning または .alert code>:

インスタンス

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h1>Example <span class="label" style="font-size:36px;">New</span></h1>
  <h2>Example <span class="label" style="font-size:30px;">New</span></h2>
  <h3>Example <span class="label" style="font-size:20px;">New</span></h3>
  <h4>Example <span class="label">New</span></h4>
</div>

</body>
</html>

インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

角丸ラベル

.radius と クラスは、ラベルに丸い角を追加できます: 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜サンプルの実行»🎜🎜オンラインサンプルを表示するには、「インスタンスの実行」ボタンをクリックします。 🎜🎜🎜🎜ラベルサイズ🎜🎜はCSSを使用して変更できますラベルサイズ: 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行»🎜🎜オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください🎜🎜