Source

ナビ

Bootstrap に含まれるナビゲーション コンポーネントの使用方法に関するドキュメントと例。

ベースナビ

Bootstrap で利用可能なナビゲーションは、基本.navクラスからアクティブおよび無効な状態まで、一般的なマークアップとスタイルを共有します。モディファイヤ クラスを交換して、各スタイルを切り替えます。

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

基本.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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

クラスは全体で使用されるため、マークアップは非常に柔軟になります。<ul>アイテムの順序が重要な場合は、上記のように sを使用する<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

利用可能なスタイル

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

水平方向の配置

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

中心.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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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

<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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

<nav>に基づくナビゲーションを使用する場合は、必ず.nav-itemアンカーに含めてください。

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

ベースのナビゲーション.nav-fillを使用した例と同様に、必ずアンカーに含めてください。<nav>.nav-item

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

フレックス ユーティリティの操作

応答性の高いナビゲーション バリエーションが必要な場合は、一連のフレックスボックス ユーティリティの使用を検討してください。これらのユーティリティはより冗長ですが、レスポンシブ ブレークポイント全体でより優れたカスタマイズを提供します。以下の例では、ナビゲーションは最下位のブレークポイントに積み重ねられ、小さなブレークポイントから始まる利用可能な幅を満たす水平レイアウトに適応します。

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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

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

ナビゲーション バーは、.nav-tabsクラスでタブとして視覚的にスタイル設定されている場合でも、属性を指定しないでください。WAI ARIA Authoring Practicesで説明されているように、これらは動的なタブ付きインターフェイスにのみ適しています。例については、このセクションの動的タブ付きインターフェースのJavaScript の動作を参照してください。role="tablist"role="tab"role="tabpanel"

ドロップダウンの使用

少し余分な 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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

JavaScript の動作

タブ JavaScript プラグインを使用して (個別に、またはコンパイル済みbootstrap.jsファイルを介してインクルード)、ナビゲーション タブとピルを拡張して、ローカル コンテンツのタブ可能なペインをドロップダウン メニューからでも作成します。

JavaScript をソースからビルドする場合はutil.js、 .

WAI ARIA Authoring Practicesで説明されているように、動的なタブ付きインターフェイスには、支援技術 (スクリーン リーダーなど) のユーザーに構造、機能、および現在の状態を伝えるために、、、、および追加の属性role="tablist"がrole="tab"必要role="tabpanel"です。aria-

ユーザビリティとアクセシビリティの両方の問題が発生するため、動的なタブ付きインターフェイスにはドロップダウン メニューを含めないでください。使いやすさの観点から、現在表示されているタブのトリガー要素が (閉じたドロップダウン メニュー内にあるため) すぐに表示されないという事実は、混乱を招く可能性があります。アクセシビリティの観点からは、現在、この種の構造を標準の WAI ARIA パターンにマッピングする賢明な方法はありません。つまり、支援技術のユーザーが簡単に理解できるようにすることはできません。

おそらく聞いたことのない未加工のデニム ジーンズショーツ オースティン。ネスカント 豆腐 スタンプタウン アリクア、レトロ シンセ マスター クレンズ。口ひげのクリシェ テンポ、ウィリアムズバーグ カルレス ビーガン ヘルベチカ。Reprehenderit ブッチャー レトロ クーフィーヤ ドリームキャッチャー シンセ。Cosby セーター eu banh mi, qui irure terry Richardson ex squid. アリクイップは、サルビア・チルムのiPhoneに置きます。Seitan aliquip quis カーディガン アメリカン アパレル、ブッチャー voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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>

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

その結果、オカエキャット・ウラムコは、エウスモッド・ノストラッド・ドロレ・イルレ・インシディダント・エスト・デュイス・アニム・サント・オフィシアに出会った。Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpaexcepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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>

そして縦の丸薬で。

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollitexcepteur labourum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velitexcepteur labourum mollit dolore eiusmod. occaecat commodo et voluptate minim reprehenderit mollit pariatur の Ipsum dolor。Deserunt non labourum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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"要素にまたはを指定するだけで、JavaScript を記述することなく、タブまたはピル ナビゲーションを有効にすることができますdata-toggle="pill"。.nav-tabsまたはでこれらのデータ属性を使用します.nav-pills。

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

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

フェード効果

タブをフェードインするには、.fadeそれぞれに を追加します.tab-pane。最初のタブ ペインでも.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

タブ要素とコンテンツ コンテナーをアクティブにします。タブには、DOM 内のコンテナ ノードを対象とするdata-targetまたはが必要です。href

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').tab('show')
  })
</script>

.tab('表示')

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

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

.tab('破棄')

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

イベント

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

  1. hide.bs.tab(現在アクティブなタブ上)
  2. show.bs.tab（表示されるタブで）
  3. hidden.bs.tabhide.bs.tab(前のアクティブなタブで、イベントと同じもの)
  4. shown.bs.tabshow.bs.tab(新しくアクティブになったばかりのタブで、イベントと同じもの)

タブがまだアクティブになっていない場合、hide.bs.tabおよびhidden.bs.tabイベントは発生しません。

イベントタイプ 説明
show.bs.tab このイベントは、タブの表示時に発生しますが、新しいタブが表示される前です。と を使用event.targetしevent.relatedTargetて、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
表示された.bs.tab このイベントは、タブが表示された後にタブ表示で発生します。と を使用event.targetしevent.relatedTargetて、それぞれアクティブなタブと以前のアクティブなタブ (利用可能な場合) をターゲットにします。
hide.bs.tab このイベントは、新しいタブが表示される (したがって、以前のアクティブなタブが非表示になる) ときに発生します。と を使用event.targetしevent.relatedTargetて、それぞれ現在アクティブなタブと新しい間もなくアクティブになるタブをターゲットにします。
hidden.bs.tab このイベントは、新しいタブが表示された後に発生します (したがって、以前のアクティブなタブは非表示になります)。と を使用event.targetしevent.relatedTargetて、それぞれ前のアクティブなタブと新しいアクティブなタブをターゲットにします。 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})