ぱそくま ろご
開発 > Bootstrap > Bootstrap ナビゲーション(タブ)

Bootstrap ナビゲーション(タブ)

Bootstrap ナビゲーション 基礎

Bootstrapではナビゲーションボタンが簡単に設置できます。基本的な作成方法は2通りでulタグまたはnavタグを使います。大まかな作成方法は以下の通りです。

  1. ulタグまたはnavタグに「class="nav"」を指定し、ナビゲーションのエリアを作成。
  2. [ulタグのみ]liタグにナビゲーションの部品となるように「class="nav-item"」を設定
  3. 実際のナビゲーションに1つ1つになるaタグをその中に記述する。classは「class="nav-link"」を設定

また、カレントページのナビをあらわすaタグのclass属性には「active」を追加したり、 使用不可のナビをあらわすaタグのclass属性には「disabled」を追加することも可能です。 サンプルは以下の通りです。

例:Bootstrap 基本となるナビゲーション(ulタグとliタグ)

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">アクティブ</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">リンク</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">無効化</a>
  </li>
</ul>

例:Bootstrap 基本となるナビゲーション(navタグ)

<nav class="nav">
  <a class="nav-link active" href="#">アクティブ</a>
  <a class="nav-link" href="#">リンク</a>
  <a class="nav-link disabled" href="#">無効化</a>
</nav>

上のどちらでも、HTMLではこんな感じに。

Bootstrap 基本となるナビゲーションの表示

Bootstrap ナビゲーション インライン

「class="nav"」を「class="nav nav-inline"」に変更するとインライン(横並び)になります。

<-- 1行目だけ変更(navタグも同様) -->
<ul class="nav nav-inline">
 <li class="nav-item">
    <a class="nav-link active" href="#">アクティブ</a>
.
.

Bootstrap ナビゲーション(インライン)の表示



Bootstrap ナビゲーション タブ形式

「class="nav"」を「class="nav nav-tabs"」に変更するとタブっぽくなります。

<-- 1行目だけ変更(navタグも同様) -->
<ul class="nav nav-tabs">
 <li class="nav-item">
    <a class="nav-link active" href="#">アクティブ</a>
.
.

Bootstrap ナビゲーション(タブ)の表示

Bootstrap ナビゲーション ピル

「class="nav"」を「class="nav nav-pills"」に変更すると最近のページっぽい、平たいボタンのようなナビゲーションになります。

OB
<-- 1行目だけ変更(navタグも同様) -->
<ul class="nav nav-pills">
 <li class="nav-item">
    <a class="nav-link active" href="#">アクティブ</a>
.
.

Bootstrap ナビゲーション(ピル)の表示

Bootstrap ナビゲーション スタックピル

「class="nav nav-pills"」に「nav-stacked」を追加すると、スマートフォンでよく見る平たいボタンが縦に並んだようなナビゲーションになります。

OB
<-- 1行目だけ変更(navタグも同様) -->
<ul class="nav nav-pills nav-stacked">
 <li class="nav-item">
    <a class="nav-link active" href="#">アクティブ</a>
.
.

Bootstrap ナビゲーション(スタックピル)の表示