26 パンくずナビ(breadcrumb)

1. Home
2. page-a
3. page-b

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">page-a</a></li>
  <li class="active">page-b</li>
</ol>

メインクラス名	サブクラス名	用途	備考・注意点
breadcrumb	active 表示しているページでリンクを消したい時に挿入します。	パンくずナビ	特になし

---

27 ラベル(label)

デフォルトのカラバリとサイズ

　

Label
Label
Label
Label
Label
Label

　

Label
Label
Label
Label
Label
Label

使用例

液晶モニタ全商品 ３０％OFF

T社最新型ノートPC S２０％OFF

DVDデッキ ２０％OFF

All In One Set 特価品

<h3>液晶モニタ全商品 <span class="label label-danger h5 txtColor">３０％OFF</span></h3>
<h4>T社最新型ノートPC <span class="label label-default h5 txtColor">S２０％OFF</span></h4>
<h5>DVDデッキ <span class="label label-default h5 txtColor">２０％OFF</span></h5>
<p>All In One Set <span class="label label-warning h5 txtColor">特価品</span></p>

メインクラス名	サブクラス名	用途	備考・注意点
label	label-default label-primary label-success label-info label-warning label-danger ※カラバリのクラス名。	商品カテゴリ、情報カテゴリ、値札的な表記など	marginが空いていないので、半角空けるか、別クラスで定義します。

---

28 バッジ

29 ピル型ナビ

30 ページャー

32 リストグループ

ツールチップ

クリックしてください

Tooltip!

Button Tips

ポップバー

クリックしてください