bootstrapでタブナビゲーションを作る方法
ライトプラン 詳細はこちら
オプションの付け方
通常のタブナビゲーション。
class="active"
を付けた個所が
選択されている状態
になる。
一部タブにドロップダウンメニューを加えた場合、入れ子のulタグに
class="dropdown-menu"
を付けた個所が
ドロップダウンメニュー
になる。
aタグ
に
data-toggle="tab"
を付けると、
トグル
になる。
aタグ
の
href="#home"
と
class="tab-content"
の中身のIDを紐づけると、 タブを選択するごとに連動する。
ul
タグに
class="nav-stacked
を付けると、タブが縦に並ぶ。
ul
タグに
class="nav-justified
を付けると、タブが横幅100%になる。
タブナビゲーション
ホーム
メニュー 1
サブメニュー1-1
サブメニュー1-2
サブメニュー1-3
メニュー 2
ホーム
ホームのコンテンツが入ります。
メニュー 1-1
メニュー 1-1のコンテンツが入ります。
メニュー 1-2
メニュー 1-2のコンテンツが入ります。
メニュー 1-3
メニュー 1-3のコンテンツが入ります。
メニュー 2
メニュー 2のコンテンツが入ります。
角丸タブナビゲーション
ホーム
メニュー 1
サブメニュー1-1
サブメニュー1-2
サブメニュー1-3
メニュー 2
ホーム
ホームのコンテンツが入ります。
メニュー 1-1
メニュー 1-1のコンテンツが入ります。
メニュー 1-2
メニュー 1-2のコンテンツが入ります。
メニュー 1-3
メニュー 1-3のコンテンツが入ります。
メニュー 2
メニュー 2のコンテンツが入ります。
縦に並べる角丸タブナビゲーション
ホーム
メニュー
メニュー
メニュー
タブの横幅を100%にする
Home
Menu 1
Menu 2
Menu 3
Home
Menu 1
Menu 2
Menu 3