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

ホームのコンテンツが入ります。

メニュー2

メニュー2のコンテンツが入ります。

メニュー3

メニュー3のコンテンツが入ります。

メニュー4

メニュー4のコンテンツが入ります。

タブの横幅を100%にする

メニュー1

ホームのコンテンツが入ります。

メニュー2

メニュー2のコンテンツが入ります。

メニュー3

メニュー3のコンテンツが入ります。

メニュー4

メニュー4のコンテンツが入ります。


メニュー1

ホームのコンテンツが入ります。

メニュー2

メニュー2のコンテンツが入ります。

メニュー3

メニュー3のコンテンツが入ります。

メニュー4

メニュー4のコンテンツが入ります。