Bootstrap ナビゲーション・コンポーネント

❮ 前章へ 次のリファレンス ❯

タブとピル

クラス 説明
.nav nav-tabs ナビゲーションタブを作成する Try it
.nav nav-pills ナビゲーションピルを作成する Try it
.nav nav-pills nav-stacked 縦型のナビゲーションピルを作成する Try it
.nav-justified 768px より広い画面では、親の幅と等しいナビゲーションタブ/ピルを作成する。 小型画面では、nav タブ/ピルは積上げられる Try it
.disabled 無効(クリックできない)タブ/ピルを表示する Try it
ドロップダウンメニュー付のナビゲーションタブ Try it
ドロップダウンメニュー付のナビゲーションピル Try it
.tab-content .tab-pane と data-toggle="tab" (ピルの場合は、data-toggle="pill") と一緒に、タブ/ピルをトグル可能にする/td> Try it
.tab-pane .tab-content と data-toggle="tab" (ピルの場合は、data-toggle="pill") と一緒に、タブ/ピルをトグル可能にする Try it

パン屑リストとページネーション

クラス 説明
.breadcrumb パン屑リストを作る Try it
.pager 簡単なページネーションリンクを提供する (Previous/Next) Try it
.previous .pager の previous ボタンを左に配置する Try it
.next .pager の next ボタンを右に配置する Try it
.disabled クリックできないリンクを表示する Try it
.pagination ページネーションリンクを提供する Try it
.pagination-lg 大型画面用のページネーションリンクを提供するため、.pagination クラスと共に使用する Try it
.pagination-sm 小型画面用のページネーションリンクを提供するため、.pagination クラスと共に使用する Try it
.disabled クリックできないリンクを表示する Try it
.active 現在のページを表示する Try it

ラベル

クラス 説明
.label label-default デフォルトの灰色ラベルを表示する Try it
.label label-primary タイプ "primary" の青色ラベルを表示する Try it
.label label-success タイプ "success" の緑色ラベルを表示する Try it
.label label-info タイプ "info" の水色ラベルを表示する Try it
.label label-warning タイプ "warning" の黄色ラベルを表示する Try it
.label label-danger タイプ "danger" の赤色ラベルを表示する Try it
.badge 新規または未読項目を表示する Try it
.jumbotron 注目のコンテンツや情報に特別な注意を喚起するための大きなボックスを表示する Try it
.jumbotron (extra) .jumbotron ボックスを幅全体に広げ、かつ角丸を除くには、.container クラスの外に配置する Try it

❮ 前章へ 次のリファレンス ❯