スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

ラベルの書式:Bootstrapコードまとめ



ラベルの書式: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>

ブラウザでの表示

ラベルの作成