GitHubで表示

基本的な .nav コンポーネントは flexbox で構築されており、あらゆるタイプのナビゲーションコンポーネントを構築するための強力な基盤を提供します。（リストを扱うための）いくつかのスタイルオーバーライド、より大きなヒット領域のためのリンクパディング、および基本的な無効化スタイルが含まれています。

基本的な .nav コンポーネントには、.active 状態は含まれていません。次の例には、主にこの特定のクラスが特別なスタイリングをトリガーしないことを示すために、クラスを含めています。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

クラスは全体で使用されているため、マークアップは非常に柔軟になります。上記のように <ul>、項目の順序が重要な場合は <ol> を使用するか、<nav> 要素を使用して独自のものをロールしてください。.nav は display: flex を使用するため、ナビゲーションリンクはナビゲーションアイテムと同じように動作しますが、追加のマークアップは必要ありません。

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

利用可能なスタイル

修飾子とユーティリティを使用して、.nav コンポーネントのスタイルを変更します。必要に応じて組み合わせて使用するか、独自のものを構築します。

水平方向の配置

flexbox ユーティリティを使用して、ナビゲーションの水平方向の配置を変更します。デフォルトでは、ナビゲーションは左揃えですが、簡単に中央揃えまたは右揃えに変更できます。

.justify-content-center で中央揃え

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

.justify-content-end で右揃え

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

垂直方向

.flex-column ユーティリティを使用して、フレックスアイテムの方向を変更することにより、ナビゲーションをスタックします。一部のビューポートでのみスタックする必要がある場合は、レスポンシブバージョン（.flex-sm-column など）を使用します。

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

いつものように、<ul>なしでも垂直方向のナビゲーションが可能です。

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

タブ

上記の基本的なナビゲーションを採用し、.nav-tabs クラスを追加して、タブ付きインターフェースを生成します。タブ可能な領域を作成するには、タブ JavaScript プラグインを使用します。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ピル

同じ HTML を使用しますが、代わりに .nav-pills を使用します。

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

フィルとジャスティファイ

.nav のコンテンツを、2 つの修飾子クラスのいずれかを使用して、利用可能な幅全体に拡張します。.nav-item で利用可能なすべてのスペースを比例的に埋めるには、.nav-fill を使用します。すべての水平スペースが占有されているが、すべてのナビゲーションアイテムの幅が同じではないことに注意してください。

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

<nav> ベースのナビゲーションを使用する場合、.nav-item は <a> 要素のスタイル設定に .nav-link のみが必要なため、安全に省略できます。

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

同じ幅の要素には、.nav-justified を使用します。すべての水平スペースはナビゲーションリンクで占有されますが、上記の .nav-fill とは異なり、すべてのナビゲーションアイテムの幅は同じになります。

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

<nav> ベースのナビゲーションを使用する .nav-fill の例と同様です。

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

フレックスユーティリティの利用

レスポンシブなナビゲーションのバリエーションが必要な場合は、一連のflexbox ユーティリティの使用を検討してください。冗長にはなりますが、これらのユーティリティはレスポンシブブレークポイント全体でより高度なカスタマイズを提供します。次の例では、ナビゲーションは最低のブレークポイントでスタックされ、次に小さなブレークポイントから開始して、利用可能な幅を埋める水平レイアウトに適応します。

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

アクセシビリティについて

ナビゲーションバーを提供するためにナビゲーションを使用している場合は、<ul> の最も論理的な親コンテナに role="navigation" を追加するか、ナビゲーション全体を <nav> 要素でラップします。支援技術によって実際のリストとしてアナウンスされるのを防ぐため、<ul> 自体にロールを追加しないでください。

ナビゲーションバーは、.nav-tabs クラスを使用して視覚的にタブとしてスタイル設定されている場合でも、role="tablist"、role="tab"、または role="tabpanel" 属性を与えてはならないことに注意してください。これらは、ARIA オーサリングプラクティスガイドのタブパターンに記載されているように、動的なタブ付きインターフェースにのみ適しています。このセクションの動的なタブ付きインターフェースの例については、JavaScript の動作を参照してください。

ドロップダウンの利用

少し追加の HTML とドロップダウン JavaScript プラグインを使用して、ドロップダウンメニューを追加します。

ドロップダウン付きタブ

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

ドロップダウン付きピル

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

JavaScript の動作

タブ JavaScript プラグイン（個別に含めるか、コンパイル済みの bootstrap.js ファイルを介して含める）を使用して、ナビゲーションタブとピルを拡張して、ローカルコンテンツのタブ付きペインを作成します。

ソースから JavaScript を構築している場合は、util.js が必要です。

ARIA オーサリングプラクティスガイドのタブパターンに記載されているように、動的なタブ付きインターフェースには、支援技術（スクリーンリーダーなど）のユーザーに構造、機能、現在の状態を伝えるために、role="tablist"、role="tab"、role="tabpanel"、および追加の aria- 属性が必要です。ベストプラクティスとして、タブには <button> 要素を使用することをお勧めします。これらは、新しいページや場所に移動するリンクではなく、動的な変更をトリガーするコントロールであるためです。

タブ JavaScript プラグインは、ドロップダウンメニューを含むタブ付きインターフェースをサポートしていないことに注意してください。これらは、ユーザビリティとアクセシビリティの両方に問題を引き起こすためです。ユーザビリティの観点からは、現在表示されているタブのトリガー要素が（閉じられたドロップダウンメニュー内にあるため）すぐに表示されないという事実は、混乱を引き起こす可能性があります。アクセシビリティの観点からは、現在この種の構造を標準の WAI ARIA パターンにマッピングする適切な方法がないため、支援技術のユーザーにとって簡単に理解できるようにすることができません。

タブパネルのプレースホルダーコンテンツ。これはホームタブに関連しています。彼女はあの国際的な笑顔を持っているから、とても高く、高くあなたを連れて行ってくれます。ベッドに見知らぬ人がいて、頭がガンガンしています。だめだ。別の人生では、あなたを留めておくでしょう。なぜなら、私は何でもできるからです。戴冠式のために準備をしています。昔は両親のお酒を盗んで屋根によじ登っていた。引き締まった体で、準備万端、音量を上げて、最高に盛り上がろう。彼女の愛は麻薬のようだ。選択肢があったことを忘れていたと思います。

タブパネルのプレースホルダーコンテンツ。これはプロファイルタブに関連しています。あなたは最高に素晴らしい建築です。パスポートスタンプ、彼女はコスモポリタンです。素晴らしく、新鮮で、激しい、私たちはそれをロックしました。いつかあなたを失うことになるなんて計画していなかった。彼女はあなたの心を食べ尽くします。あなたのキスは宇宙的で、あらゆる動きが魔法のようです。私が言いたいのは、彼女が一番だということです。愛する人たちよ、旅に出よう。7月4日のように、夜を思い切り楽しもう！しかし、あなたはむしろ無駄にしたいのです。

タブパネルのプレースホルダーコンテンツ。これは連絡先タブに関連しています。彼女の愛は麻薬のようだ。私の女の子たちは皆ヴィンテージのシャネルのベイビー。モーテルを借りて、シーツで砦を作った。なぜなら、彼女はミューズでありアーティストだからです。（これが私たちのやり方）だから、あなたは魔法を使いたいのです。だから、私にすべてを捧げる前に、必ずそうしてください。私は歩いている、私は空を歩いている（今夜）。話はスキップ、すべて聞いた、歩く時が来た。もし捕まえることができるなら、彼女を捕まえて。蜂のように刺して、私は自分の縞模様を手に入れた。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

ニーズに合わせて、上記のように <ul> ベースのマークアップ、または任意の「独自のもの」のマークアップで動作します。<nav> を使用している場合は、要素のネイティブロールをナビゲーションランドマークとして上書きするため、role="tablist" を直接追加しないでください。代わりに、代替要素（下の例では単純な <div>）に切り替え、<nav> をその周りにラップします。

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

タブプラグインはピルでも機能します。

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

そして、垂直ピルでも機能します。

タブパネルのプレースホルダーコンテンツです。これはホームタブに関連しています。ダウンタウンでブルースを歌っているのを見たよ。あなたが落ちていくのを見ている。どうして私に立ち寄らせてくれないの？王冠をかぶる頭は重い。そう、私たちは天使を泣かせ、上から地球に雨を降らせる。3Dのショーを、映画を見たい。あなたは今まで感じたことがある？紙のように薄く感じるのを。それはイエスかノー、多分ではない。

タブパネルのプレースホルダーコンテンツです。これはプロファイルタブに関連しています。彼女はあなたを何マイルも高く連れて行く、とても高く、なぜなら彼女は国際的な笑顔を持っているから。私のベッドに見知らぬ人がいる、頭の中で激しい鼓動がする。ああ、だめだ。別の人生ならあなたをここに留まらせるだろう。「だって私は何でもできるから。戴冠式のために準備している。昔は両親の酒を盗んで屋根に登ったものさ。鍛えられた肌、日焼けした体、準備万端。音量を上げて、盛り上がってきたから。彼女の愛は麻薬のようだ。選択肢があるのを忘れていたみたいだ。

タブパネルのプレースホルダーコンテンツです。これはメッセージタブに関連しています。あなたは最高の建築物を持っている。パスポートのスタンプ、彼女は国際的。最高、新鮮、強烈、私たちはそれを手に入れた。いつかあなたを失うことになるとは思っていなかった。彼女はあなたの心を食べる。あなたのキスは宇宙的で、すべての動きは魔法のようだ。彼女こそが、そう、彼女こそが一人だと言いたい。愛する人たち、旅に出よう。7月4日のように夜を独占しよう！でも、あなたはむしろ無駄に過ごしたい。

タブパネルのプレースホルダーコンテンツです。これは設定タブに関連しています。彼女の愛は麻薬のようだ。私のガールズは皆、ヴィンテージのシャネルベイビー。モーテルを借りて、シーツで砦を築いた。「だって彼女はミューズであり、アーティストだから。（これが私たちのやり方）魔法で遊びたいのね。だから、すべてを私に渡す前に確認して。私は歩いている、私は空を歩いている（今夜）。話を飛ばして、全部聞いた、さあ、行動に移そう。捕まえられるものなら捕まえてみて。蜂のように刺して、私は自分の立場を確立した。

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
      <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
      <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
      <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

データ属性の使用

要素に data-toggle="tab" または data-toggle="pill" を指定するだけで、JavaScript を記述せずにタブまたはピルナビゲーションをアクティブにできます。これらのデータ属性を .nav-tabs または .nav-pills で使用します。

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

JavaScript経由

JavaScript を使用してタブ付きタブを有効にします（各タブを個別にアクティブにする必要があります）。

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

いくつかの方法で個々のタブをアクティブにできます。

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab

フェード効果

タブをフェードインさせるには、各 .tab-pane に .fade を追加します。最初のタブペインには、初期コンテンツを表示するために .show も必要です。

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

メソッド

非同期メソッドとトランジション

すべての API メソッドは非同期であり、トランジションを開始します。トランジションが開始されるとすぐに呼び出し元に返されますが、終了前です。さらに、トランジション中のコンポーネントに対するメソッド呼び出しは無視されます。

詳細については、JavaScript のドキュメントを参照してください。.

$().tab

タブ要素とコンテンツコンテナをアクティブにします。タブには、data-target、またはリンクを使用する場合は、DOM 内のコンテナノードをターゲットとする href 属性のいずれかが必要です。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab(‘show’)

指定されたタブを選択し、関連付けられたペインを表示します。以前に選択されていた他のタブは選択解除され、関連付けられたペインは非表示になります。タブペインが実際に表示される前（つまり、shown.bs.tab イベントが発生する前）に呼び出し元に返されます。

$('#someTab').tab('show')

.tab(‘dispose’)

要素のタブを破棄します。

イベント

新しいタブを表示する場合、イベントは次の順序で発生します。

hide.bs.tab（現在のアクティブなタブ）
show.bs.tab（表示されるタブ）
hidden.bs.tab（以前のアクティブなタブ、hide.bs.tab イベントと同じタブ）
shown.bs.tab（新しくアクティブになったばかりの表示されたタブ、show.bs.tab イベントと同じタブ）

アクティブなタブがない場合、hide.bs.tab イベントと hidden.bs.tab イベントは発生しません。

イベントタイプ	説明
show.bs.tab	このイベントは、タブが表示される前、タブの表示時に発生します。`event.target` および `event.relatedTarget` を使用して、それぞれアクティブなタブと以前のアクティブなタブ（利用可能な場合）をターゲットにします。
shown.bs.tab	このイベントは、タブが表示された後、タブの表示時に発生します。`event.target` および `event.relatedTarget` を使用して、それぞれアクティブなタブと以前のアクティブなタブ（利用可能な場合）をターゲットにします。
hide.bs.tab	このイベントは、新しいタブが表示されようとする時（したがって、以前のアクティブなタブが非表示にされようとする時）に発生します。`event.target` および `event.relatedTarget` を使用して、それぞれ現在のアクティブなタブと新しくアクティブになるタブをターゲットにします。
hidden.bs.tab	このイベントは、新しいタブが表示された後（したがって、以前のアクティブなタブが非表示になった後）に発生します。`event.target` および `event.relatedTarget` を使用して、それぞれ以前のアクティブなタブと新しいアクティブなタブをターゲットにします。

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})

ナビゲーション

ベースナビゲーション