最新のWeb開発のチュートリアル
 

Bootstrap Badges and Labels


バッジ

バッジは、リンクに関連付けられているどのように多くの項目の数値指標であります:

ニュース5
コメント10
アップデート2

番号(5、10、および2)はバッジです。

使用.badge内のクラスを<span>バッジを作成するための要素:

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
»それを自分で試してみてください

:バッジは、ボタンなどの他の要素の内部にも使用することができます



次の例では、ボタンにバッジが追加する方法を示しています。

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
»それを自分で試してみてください

ラベル

ラベルは何かについての追加情報を提供するために使用されています。

新しいです

新しいです

新しいです

新しいです

新しいです
新しいです

使用.label 6文脈クラスのいずれかに続いて、クラス、 .label-default.label-primary.label-success.label-info.label-warningまたは.label-danger内に、 <span>要素ラベルを作成します。

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>
»それを自分で試してみてください

次の例では、すべてのコンテキストラベルクラスを示しています。

デフォルトのラベル プライマリラベル の成功のラベル 情報ラベル 警告ラベル 危険ラベル

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
»それを自分で試してみてください

練習で自分自身をテスト!

演習1» 演習2» 演習3» 演習4»