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%になる。
タブナビゲーション

ホーム

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

角丸タブナビゲーション

ホーム

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

縦に並べる角丸タブナビゲーション
タブの横幅を100%にする