Bootstrap3
日本語リファレンス

広告

ラベル  Labels


ラベルに最適なスタイル。

サンプル
New New New New New New

ポイントは2つ。

  1. class属性にlabel label-defaultを指定したspan要素で、ラベル用テキストを括る。
  2. フォント・サイズは、通常、継承したフォント・サイズの75%。
<span class="label label-default">New</span>

基本的使い方。

表示サンプル

New

ソースコード

<span class="label label-default">New</span>

フォント・サイズは、通常、継承したフォント・サイズの75%。コンテキスト次第だ。

表示サンプル

h1要素内のラベル

h2要素内のラベル

h3要素内のラベル

h4要素内のラベル

h5要素内のラベル
h6要素内のラベル

ソースコード

<h1>h1要素内の<span class="label label-default">ラベル</span></h1>
<h2>h2要素内の<span class="label label-default">ラベル</span></h1>
<h3>h3要素内の<span class="label label-default">ラベル</span></h1>
<h4>h4要素内の<span class="label label-default">ラベル</span></h1>
<h5>h5要素内の<span class="label label-default">ラベル</span></h1>
<h6>h6要素内の<span class="label label-default">ラベル</span></h1>

表示サンプル

Default Primary Success Info Warning Danger

ソースコード

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

広告