ラベルの書式：Bootstrapコードまとめ
｜
Bootstrapのコードを少しずつまとめていきます。
今回はラベルの書式です。
ラベルの作成
span要素にclass「label」を適用し、以下の表のclassで色を指定します。
| class | 色 |
|---|---|
| label-default | 灰色 |
| label-primary | 青系 |
| label-success | 緑系 |
| label-info | 薄い青系 |
| label-warning | 黄系 |
| label-danger | 薄い赤系 |
ラベルの位置に応じてサイズが自動的に変化します。
span要素に「font-size」を使って任意のサイズでラベルを表示することも可能です。
HTML
<h2>観葉植物全品<span class="label label-default">30% OFF</span></h2> <h3>肥料全品<span class="label label-default">25% OFF</span></h3> <h4>活力剤全品<span class="label label-default">20% OFF</span></h4> <br> <p style="font-size:20px;"> <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> </p>
ブラウザでの表示
