Smallville

smallville

Bootstrapの基本 ラベル、バッジを作成する

CSS

Bootstrapでバッジ、ラベル、パネルを作成する際のHTMLの記述方法を紹介します。

ラベル

ラベルは下記のnewマークのような表示をする際に使用するものです。

product    new

HTMLの記述は下記の通り、spanタグで囲みクラス名に”label label-info”をつけるだけです。label-infoの部分でラベルのカラーを設定することができます。

<p>product  <span class="label label-info">new</span></p>

バッジ

バッジは下記のように件数などを表示するときによく利用します。

in BOX  1

in BOX  新着

HTMLの記述は下記の通り、spanタグで囲みクラス名にbadgeをつけるだけ。

<p>in BOX  <span class="badge">1</span></p>
<p>in BOX  <span class="badge">新着</span></p>

スポンサーリンク