ナビゲーション～Bootstrap4移行ガイド

Bootstrapのナビゲーションコンポーネントの使用方法に関する解説と例

基本のナビゲーション（Base nav）v4.6.1設定変更

Bootstrapで利用可能なナビゲーションは、基本となる .nav クラスからアクティブ状態、無効状態、一般的なマークアップとスタイルを共有。修飾子クラスを入れ替えて各スタイルを切り替える。

基本の .nav コンポーネントはFlexboxで構築され、すべてのタイプのナビゲーションコンポーネントを構築するための強力な基盤を提供。これには（リストを操作するための）スタイル再定義、ヒット領域のリンク埋め込み、基本的な無効状態のスタイルが組み込まれている。

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

1. リスト(`<ul>` > `<li>`)で設定

見本

設定例（v4.6.1～）

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

クラスが全体を通して使用されるため、マークアップを柔軟に行うことが可能。上記のような <ul> を使用するか、<nav> 要素を使って自分自身を作動させる。.nav は display：flex を使用するので、ナビゲーションのリンクはナビゲーションのアイテムと同じように動作するが、特別なマークアップはない。

2. ナビゲーション(`<nav>`)で設定

見本

設定例

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

【設定】

<ul> を使用する場合：ul.nav > li.nav-item > a.nav-link
<nav> を使用する場合：nav.nav > a.nav-link
リンクをアクティブにする場合：a.nav-link に .active を追加
リンクを無効にする場合：a.nav-link に .disabled を追加

【変更履歴】

【v4.0.0】
- .nav のみで横並びのナビゲーションの設定が可能に（v3では .nav.nav-pills にしなければ横並びにならなかった）
- リンクにカーソルを合わせた際に、無効化カーソル（＝cursor: not-allowed;）に変化しなくなった
- その他の変更は、タブナビゲーションまたはピルナビゲーションに記載
【v4.2.1】
- .disabled 関連のアクセシビリティの設定を追加（v4.6.1で削除）
【v4.6.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"（リンクにキーボードフォーカスを受け取らないようにする）、aria-disabled="true"（支援技術に要素が無効の状態であることを伝える）の設定が不要に（参考）

使用可能なスタイル（Available styles）

修飾子とユーティリティを使用して .nav コンポーネントのスタイルを変更。必要に応じてミックスしたり、自分で作成可能。

水平方向の位置合わせ（Horizontal alignment）v4.0.0新設

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

1. 中央揃え

.justify-content-center で中央揃え：

見本

設定例

<ul class="nav justify-content-center">
	...
</ul>

2. 右寄せ

.justify-content-end で右寄せ：

見本

設定例

<ul class="nav justify-content-end">
	...
</ul>

【設定】

中央揃え：.nav に .justify-content-center を追加
右寄せ：.nav に .justify-content-end を追加

縦積み（Vertical）v4.0.0設定変更

Flexアイテムの方向を .flex-column ユーティリティで変更して、ナビゲーションを縦積みにする。それらをいくつかのビューポートだけで縦積みにする必要があるなら、レスポンシブ対応クラス（.flex-sm-columnなど）を使用。

1. リスト(`<ul>` > `<li>`)で設定

見本

Bootstrap3.xの設定例赤背景が変更箇所

<ul class="nav nav-stacked">
	<li role="presentation" class="active">
		<a href="#">アクティブ</a>
	</li>
	<li role="presentation">
		<a href="#">リンク1</a>
	</li>
	<li role="presentation">
		<a href="#">リンク2</a>
	</li>
	<li role="presentation" class="disabled">
		<a href="#">無効</a>
	</li>
</ul>

Bootstrap4.xの設定例緑背景が変更箇所

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

2. ナビゲーション(`<nav>`)で設定

<ul> を使わない縦積みナビゲーションも可能。

見本

設定例（v4.6.1～）

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

【設定】

.nav に .flex-column を追加

【変更履歴】

【v4.0.0】
- .nav.nav-stacked ⇒ .nav.flex-column
【v4.6.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に

タブナビゲーション（Tabs）v4.6.1設定変更

上記の基本的なナビゲーションを使用して、.nav-tabs クラスを追加してタブ付きのインターフェースを生成。それらを使用して、タブJavaScriptプラグインでタブ可動領域を作成。

見本

Bootstrap3.xの設定例赤背景が変更箇所

<ul class="nav nav-tabs">
	<li role="presentation" class="active"><a href="#">アクティブ</a></li>
	<li role="presentation"><a href="#">リンク1</a></li>
	<li role="presentation"><a href="#">リンク2</a></li>
	<li role="presentation" class="disabled"><a href="#">無効</a></li>
</ul>

Bootstrap4.xの設定例緑背景が変更箇所

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

【設定】

ul.nav.nav-tabs > li.nav-item > a.nav-link
最初に表示するタブは、あらかじめ a.nav-link.active でアクティブ化しておく
無効化したいタブは、a.nav-link.disabled にする

【注意】

タブを使ったコンテンツの切替についてはJavaScriptの動作を参照
.nav.nav-tabs に .flex-column を追加して縦積みにすることはできるが、レイアウト的には推奨しない

【変更履歴】

【v4.0.0】
- li[role="presentation"] ⇒ li.nav-item
- a ⇒ a.nav-link
- アクティブ化したいタブ：li.active ⇒ li.nav-item > a.nav-link.active
- 無効化したいタブ：li.disabled ⇒ li.nav-item > a.nav-link.disabled
【v4.6.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に

ピルナビゲーション（Pills）v4.6.1設定変更

同様のHTMLを使用するが、代わりに .nav-pills を使用：

見本

Bootstrap3.xの設定例赤背景が変更箇所

<ul class="nav nav-pills">
	<li role="presentation" class="active"><a href="#">アクティブ</a></li>
	<li role="presentation"><a href="#">リンク1</a></li>
	<li role="presentation"><a href="#">リンク2</a></li>
	<li role="presentation" class="disabled"><a href="#">無効</a></li>
</ul>

Bootstrap4.xの設定例緑背景が変更箇所

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

【設定】

ul.nav.nav-pills > li.nav-item > a.nav-link
最初に表示するリンクは、あらかじめ a.nav-link.active でアクティブ化しておく
無効化したいリンクは、a.nav-link.disabled にする

【注意】

ピルを使ったコンテンツの切替についてはJavaScriptの動作を参照

【変更履歴】

【v4.0.0】
- li[role="presentation"] ⇒ li.nav-item
- a ⇒ a.nav-link
- アクティブ化したいリンク：li.active ⇒ li.nav-item > a.nav-link.active
- 無効化したいリンク：li.disabled ⇒ li.nav-item > a.nav-link.disabled
【v4.6.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に

幅一杯と等幅サイズ（Fill and justify）

.nav の内容を2つの修飾子クラスのうちの利用可能な幅の1つを強制的に拡張。使用可能なすべての空白に比例して .nav-items で満たすために .nav-fill を使用。すべての横方向の空白が占有されるが、すべてのナビゲーションメニューが同じ幅になるわけではない。

1. 幅一杯で不均等サイズ v4.6.1新設

見本（`<ul>` > `<li>` で設定する場合）

設定例

<ul class="nav nav-pills nav-fill">
	<li class="nav-item"><a href="#" class="nav-link active">アクティブ</a></li>
	<li class="nav-item"><a href="#" class="nav-link">かなり長めのリンク</a></li>
	<li class="nav-item"><a href="#" class="nav-link">リンク</a></li>
	<li class="nav-item"><a class="nav-link disabled">無効</a></li>
</ul>

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

見本（`<nav>` で設定する場合）v4.5.1設定変更

設定例

<nav class="nav nav-pills nav-fill">
	<a class="nav-link active" href="#">アクティブ</a>
	<a class="nav-link" href="#">かなり長めのリンク</a>
	<a class="nav-link" href="#">リンク</a>
	<a class="nav-link disabled">無効</a>
</nav>

【設定】

.nav に .nav-fill を追加

【注意】

<nav> で設定する場合、a.nav-link に .nav-item の追加は不要

【変更履歴】

【v4.5.1】
- <nav> で設定する場合：a.nav-link.nav-item ⇒ a.nav-link
【v4.6.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に

等しい幅の要素については、.nav-justified を使用。すべての横方向の空白はナビゲーションリンクで占有されるが、上記の.nav-fillとは異なり、すべてのナビゲーションメニューは同じ幅になる。

2. 幅一杯で等幅サイズ v4.0.0復活

見本（`<ul>` > `<li>` で設定する場合）

設定例

<ul class="nav nav-pills nav-justified">
	<li class="nav-item"><a href="#" class="nav-link active">アクティブ</a></li>
	<li class="nav-item"><a href="#" class="nav-link">かなり長めのリンク</a></li>
	<li class="nav-item"><a href="#" class="nav-link">リンク</a></li>
	<li class="nav-item"><a class="nav-link disabled">無効</a></li>
</ul>

.nav-fill の実例と同様に <nav> ベースのナビゲーションを使用する場合は、アンカーに .nav-item を必ず含めること。

見本（`<nav>` で設定する場合）v4.6.1設定変更

設定例

<nav class="nav nav-pills nav-justified">
	<a class="nav-link active" href="#">アクティブ</a>
	<a class="nav-link" href="#">かなり長めのリンク</a>
	<a class="nav-link" href="#">リンク</a>
	<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</nav>

【設定】

.nav に .nav-justified を追加

【注意】

<nav> で設定する場合、a.nav-link に .nav-item の追加は不要

【変更履歴】

【v4.0.0】
- 等幅サイズのナビゲーション（.nav-justified）はv3.3.0でサポート外となったが、v4で復活。
【v4.5.1】
- <nav> で設定する場合：a.nav-link.nav-item ⇒ a.nav-link
【v4.6.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"、aria-disabled="true" の設定が不要に

Flexユーティリティの使用（Working with flex utilities）

レスポンス型のナビゲーションが必要な場合は、一連のFlexユーティリティの使用を検討すること。これらのユーティリティは、より冗長になるが、レスポンス可能なブレークポイント全体にわたってより大きなカスタマイズを提供。下記の実例では、ナビゲーションは極小のブレークポイントでは縦積みになり、小のブレークポイントから利用可能な幅を埋め込む横並びのレイアウトに適応。

見本

設定例

<nav class="nav nav-pills flex-column flex-sm-row">
	<a class="flex-sm-fill text-sm-center nav-link active" href="#">アクティブ</a>
	<a class="flex-sm-fill text-sm-center nav-link" href="#">リンク1</a>
	<a class="flex-sm-fill text-sm-center nav-link" href="#">リンク2</a>
	<a class="flex-sm-fill text-sm-center nav-link disabled">無効</a>
</nav>

アクセシビリティに関して（Regarding accessibility）

ナビゲーションバーを提供するためにナビゲーション(navs)を使用している場合は、<ul> の最も論理的な親コンテナに role="navigation" を追加するか、ナビゲーション全体を <nav> 要素で囲むようにし、<ul> 自体に role 属性を追加しないこと。これは、補助技術に実際のリストとして通知されないようにするためである。

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

ドロップダウン付きナビゲーション（Using dropdowns）v4.6.1設定変更

少し追加したHTMLとドロップダウンJavaScriptプラグインでドロップダウンのメニューを追加。

ドロップダウン付きタブナビゲーション（Tabs with dropdowns）

見本

Bootstrap3.xの設定例赤背景が変更箇所

<ul class="nav nav-tabs">
	...
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン <span class="caret"></span></a>
		<ul class="dropdown-menu">
			<li><a href="#">メニュー1</a></li>
			...
		</ul>
	</li>
	...
</ul>

Bootstrap4.xの設定例緑背景が変更箇所

<ul class="nav nav-tabs">
	...
	<li class="nav-item dropdown">
		<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">ドロップダウン</a>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
		</div>
	</li>
	...
</ul>

【設定】

ul.nav.nav-tabs >（li.nav-item +）li.nav-item.dropdown > {a.nav-link.dropdown-toggle[data-toggle="dropdown"]《ドロップダウンリンク》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
※ul.nav.nav-tabs > li.nav-item.dropdown 内にドロップメニューを入れる

【アクセシビリティの設定】

ドロップダウンリンク（a.dropdown-toggle）に、
- role="button" 属性（ボタンの役割を示す）
- aria-expanded="false" 属性（要素の開閉の状態を示す）
をそれぞれ入れる

【変更履歴】

【v4.0.0】
- ドロップダウンリンク：li.dropdown > a.dropdown-toggle[data-toggle="dropdown"] ⇒ li.nav-item.dropdown > a.nav-link.dropdown-toggle[data-toggle="dropdown"]
- キャレット（▼）：<span class="caret"></span> の設定は不要
- ドロップメニュー：ul.dropdown-menu > li > a ⇒ div.dropdown-menu > a.dropdown-item
【v4.6.1】
- ドロップダウンリンクの設定で aria-haspopup="true" 属性（ポップアップメニューが存在するかどうかを示す）が不要に

ドロップダウン付きピルナビゲーション（Pills with dropdowns）

見本

Bootstrap3.xの設定例赤背景が変更箇所

<ul class="nav nav-pills">
	...
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">ドロップダウン <span class="caret"></span></a>
		<ul class="dropdown-menu">
			<li><a href="#">メニュー1</a></li>
			...
		</ul>
	</li>
	...
</ul>

Bootstrap4.xの設定例緑背景が変更箇所

<ul class="nav nav-pills">
	...
	<li class="nav-item dropdown">
		<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">ドロップダウン</a>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">メニュー1</a>
			...
		</div>
	</li>
	...
</ul>

【設定】

ul.nav.nav-pills >（li.nav-item +）li.nav-item.dropdown > {a.nav-link.dropdown-toggle[data-toggle="dropdown"]《ドロップダウンリンク》 + [div.dropdown-menu > a.dropdown-item]《ドロップメニュー》}
※ul.nav.nav-pills > li.nav-item.dropdown内にドロップメニューを入れる

【アクセシビリティの設定】

ドロップダウンリンク（a.dropdown-toggle）に、
- role="button" 属性（ボタンの役割を示す）
- aria-expanded="false" 属性（要素の開閉の状態を示す）
をそれぞれ入れる

【変更履歴】

【v4.0.0】
- ドロップダウンリンク：li.dropdown > a.dropdown-toggle[data-toggle="dropdown"][role="button"] ⇒ li.nav-item.dropdown > a.nav-link.dropdown-toggle[data-toggle="dropdown"]
- キャレット（▼）：<span class="caret"></span> の設定は不要
- ドロップメニュー：ul.dropdown-menu > li > a ⇒ div.dropdown-menu > a.dropdown-item
【v4.6.1】
- ドロップダウンリンクの設定で aria-haspopup="true" 属性（ポップアップメニューが存在するかどうかを示す）が不要に

JavaScript動作（JavaScript behavior）

個別にまたはコンパイルされた bootstrap.js ファイルに組み込まれているタブJavaScriptプラグインを使用して、タブまたはピルのナビゲーションを拡張し、ローカルコンテンツのタブ切替可能な領域が作成可能。

ソースファイルからJavaScriptを構築する場合は、ARIA Authoring Practices Guide tabs patternで説明されているように、動的タブ付きインタフェースでは、構造、機能、現在の状態を支援技術（スクリーンリーダーなど）のユーザーに伝えるために、role ="tablist"、role="tab"、role="tabpanel"、追加の aria- 属性が必要。動的な変更を発動するコントロールであるタブには、新しいページや場所に移動するリンクではなく、最善の技法として <button> 要素の使用を推奨。

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

1. タブナビゲーションの場合 v4.6.2設定変更

見本

タブパネルのプレースホルダーコンテンツ。これはホームタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

タブパネルのプレースホルダーコンテンツ。これはプロフィールタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

タブパネルのプレースホルダーコンテンツ。これはコンタクトタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

Bootstrap3.xの設定例赤背景が変更箇所

<!-- タブ部分 -->
<ul id="myTab" class="nav nav-tabs" role="tablist">
	<li class="active" role="presentation">
		<a id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">ホーム</a>
	</li>
	<li role="presentation">
		<a id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">プロフィール</a>
	</li>
	<li class="dropdown" role="presentation">
		<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">ドロップダウン <span class="caret"></span></a>
		<ul id="myTabDrop1-contents" class="dropdown-menu" aria-labelledby="myTabDrop1">
			<li><a id="dropdown1-tab" data-toggle="tab" href="#dropdown1" role="tab" aria-controls="dropdown1">メニュー1</a></li>
			...
		</ul>
	</li>
</ul>

<!-- パネル部分 -->
<div id="myTabContent" class="tab-content" style="margin-top:15px">
	<div id="home" class="tab-pane active" role="tabpanel" aria-labelledBy="home-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	<div id="profile" class="tab-pane" role="tabpanel" aria-labelledBy="profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	<div id="dropdown1" class="tab-pane" role="tabpanel" aria-labelledBy="dropdown1-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	...
</div>

Bootstrap4.6.2～の設定例緑背景が変更箇所

<!-- タブ部分 -->
<ul id="myTab" class="nav nav-tabs" role="tablist">
	<li class="nav-item" role="presentation">
		<button id="home-tab" class="nav-link active" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">ホーム</button>
	</li>
	<li class="nav-item" role="presentation">
		<button id="profile-tab" class="nav-link" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">プロフィール</button>
	</li>
	<li class="nav-item" role="presentation">
		<button id="contact-tab" class="nav-link" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">コンタクト</button>
	</li>
</ul>

<!-- パネル部分 -->
<div id="myTabContent" class="tab-content mt-3">
	<div id="home" class="tab-pane active" role="tabpanel" aria-labelledby="home-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	<div id="profile" class="tab-pane" role="tabpanel" aria-labelledby="profile-tab">タブパネルのプレースホルダーコンテンツ。...</div>
	<div id="contact" class="tab-pane" role="tabpanel" aria-labelledby="contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>

2. ナビゲーション(`<nav>`)で設定 v4.6.2設定変更

これは上記のように <ul> ベースのマークアップか任意の「独自のロール」マークアップをすれば動作するので、自分のニーズに合うように設定する。<nav> を使用する場合は、role="tablist" を直接追加しないように注意すること。これは、ナビゲーションの目印として要素の本来の役割を上書きするため。代わりに、代替要素（下記の実例では単純な <div>）に切り替え、それを <nav> で囲むこと。

見本

Bootstrap4.6.1の設定例赤背景が変更箇所

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">ホーム</a>
    <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">プロフィール</a>
    <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">コンタクト</a>
  </div>
</nav>

<div class="tab-content mt-3" id="nav-tabContent">
  <div class="tab-pane active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">タブパネルのプレースホルダーコンテンツ。...</div>
  <div class="tab-pane" 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>

Bootstrap4.6.2～の設定例緑背景が変更箇所

<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">ホーム</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">プロフィール</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">コンタクト</button>
  </div>
</nav>

<div class="tab-content mt-3" id="nav-tabContent">
  <div class="tab-pane active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">タブパネルのプレースホルダーコンテンツ。...</div>
  <div class="tab-pane" 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>

3. ピルナビゲーションの場合（フェード効果付き）v4.6.2設定変更

タブプラグインは、ピルとの併用も可能。

見本

Bootstrap4.6.1の設定例赤背景が変更箇所

<!-- ピル部分 -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
	<li class="nav-item" role="presentation">
		<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">ホーム</a>
	</li>
	<li class="nav-item" role="presentation">
		<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">プロフィール</a>
	</li>
	<li class="nav-item" role="presentation">
		<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">コンタクト</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 class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>

Bootstrap4.6.2～の設定例緑背景が変更箇所

<!-- ピル部分 -->
<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">ホーム</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">プロフィール</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">コンタクト</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 class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">タブパネルのプレースホルダーコンテンツ。...</div>
</div>

4. 縦積みのピルナビゲーションフェード効果付き、v4.6.2設定変更

そして縦積みのピルナビゲーションでも設置可能。

見本

タブパネルのプレースホルダーコンテンツ。これはメッセージタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

タブパネルのプレースホルダーコンテンツ。これはセッティングタブに関連している。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

Bootstrap4.6.1の設定例赤背景が変更箇所

<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">ホーム</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">プロフィール</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">メッセージ</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">セッティング</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">
				<p>タブパネルのプレースホルダーコンテンツ。...</p>
			</div>
			<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
				<p>タブパネルのプレースホルダーコンテンツ。...</p>
			</div>
			<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
				<p>タブパネルのプレースホルダーコンテンツ。...</p>
			</div>
			<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
				<p>タブパネルのプレースホルダーコンテンツ。...</p>
			</div>
		</div>
	</div>
</div>

Bootstrap4.6.2～の設定例緑背景が変更箇所

<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">ホーム</a>
			<button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" role="tab" type="button" aria-controls="v-pills-profile" aria-selected="false">プロフィール</button>
			<button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" role="tab" type="button" aria-controls="v-pills-messages" aria-selected="false">メッセージ</button>
			<button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" role="tab" type="button" aria-controls="v-pills-settings" aria-selected="false">セッティング</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">
				<p>タブパネルのプレースホルダーコンテンツ。...</p>
			</div>
			<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
				<p>タブパネルのプレースホルダーコンテンツ。...</p>
			</div>
			<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
				<p>タブパネルのプレースホルダーコンテンツ。...</p>
			</div>
			<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
				<p>タブパネルのプレースホルダーコンテンツ。...</p>
			</div>
		</div>
	</div>
</div>

【設定】

リストで設定：[ul.nav.nav-{tabs|pills} > li.nav-item > button.nav-link[data-bs-toggle="{tab|pill}" data-target type="button"]]《タブ/ピル部分》 + [.tab-content > .tab-pane]《パネル部分》
ナビゲーションで設定：[<nav> > div.nav.nav-{tabs|pills} > button.nav-link[data-bs-toggle="{tab|pill}" data-target type="button"]]《タブ/ピル部分》 + [.tab-content > .tab-pane]《パネル部分》
（タブ/ピルと同様に）最初に表示するパネルには、あらかじめ .tab-pane に .active を追加しておく
プラグインを使ってタブ/ピルを切り替えるために、無効化以外のタブ/ピルのアンカーリンク（<button>）に data-toggle="{tab|pill}" を入れる

【アクセシビリティの設定】

.nav.nav-{tabs|pills} に、role="tablist"（タブリストの役割を伝える）を入れる
li.nav-item に、role="presentation"（支援技術に要素の意味を打ち消していることを伝える）を入れる（ul.nav.nav-{tabs|pills}[role="tablist"] とセットで設定）
a.nav-link（またはa.dropdown-item）に、
- role="tab" 属性（支援技術にタブ部分の役割を伝える）
- aria-controls="パネルのID" 属性（タブパネルのタブ部分とパネル部分を関連付ける）
- 最初に表示するタブ/ピルに aria-selected="true" 属性、それ以外のタブ/ピルにaria-selected="false" 属性（支援技術に要素の選択の状態を伝える）
を入れる
div.tab-pane に、
- role="tabpanel" 属性（支援技術にパネル部分の役割を伝える）
- aria-labelledby="タブ/ピルのID" 属性（タブパネルのタブ部分とパネル部分を関連付ける）
を入れる
縦積みのピルナビゲーションでは、 div.nav.flex-column.nav-pills に、aria-orientation="vertical" 属性（支援技術に要素の向きが垂直であることを伝える）を入れる

【注意】

上下のタブ/ピルとパネルとの間には空白がないので、.nav-{tabs|pills} または .tab-content に空白ユーティリティクラスを追加して調整する（上記の見本ではタブ/ピルとパネルの間にマージンを1rem入れる設定）
ドロップダウンの設定は不可（ユーザビリティとアクセシビリティの両方の問題が発生するため）

【変更履歴】

【v4.0.0】
- ドロップダウンの設定は不可となった
- aria-expanded ⇒ aria-selected
- 縦積みのピルナビゲーションで aria-orientation="vertical" 属性を追加
- ナビゲーションで設定する場合は、.nav.nav-tabs や role="tablist"属性の設定を <nav> に入れるのではなく、<div> 等に入れて、それを <nav> で囲む
【v4.5.0】
- li.nav-item に、role="presentation"（視覚表現を行う要素に対して指定する属性）を再設定
【v4.5.1】
- ナビゲーションで設定する場合：a.nav-link.nav-item ⇒ a.nav-link
【v4.6.2】
- タブ/ピル部分：a.nav-link[href] ⇒ button.nav-link[data-bs-target type="button"]

データ属性を利用（Using data attributes）

要素に data-toggle="tab" または data-toggle="pill" と指定するだけで、JavaScriptを記述することなくタブまたはピルのナビゲーションを有効にすることが可能。これらのデータ属性は、.nav-tabs または .nav-pills で使用。

設定例

<!-- タブ部分 -->
<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">ホーム</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">プロフィール</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">メッセージ</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">セッティング</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>

JavaScript経由で（Via JavaScript）v4.6.2設定変更サンプル

JavaScriptを使用してタブ切替可能なタブを有効にする（各タブは個別に有効にする必要あり）：

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

様々な方法で個々のタブをアクティブにすることが可能：

JavaScript$('#myTab button[data-target="#profile"]').tab('show') // タブ名で選択
$('#myTab li:first-child button').tab('show') // 最初のタブを選択
$('#myTab li:last-child button').tab('show') // 最後のタブを選択
$('#myTab li:nth-child(3) button').tab('show') // 3番目のタブを選択

【変更履歴】

【v4.0.0】
- 最初のタブを選択：'#myTab a:first' ⇒ '#myTab li:first-child a'
- 最後のタブを選択：'#myTab a:last' ⇒ '#myTab li:last-child a'
- n番目のタブを選択：'#myTab li:eq(n-1) a' ⇒ '#myTab li:nth-child(n) a'（0番目から数える⇒1番目から数える）
【v4.6.2】
- #myTab a[href] ⇒ #myTab button[data-bs-target]
- #myTab li a ⇒ #myTab li button

フェード効果（Fade effect）v4.0.0設定変更

タブパネルをフェードインさせるには、各 .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>

【変更履歴】

【v4.0.0】
- 初期のコンテンツ表示：.in ⇒ .show

メソッド（Methods）

非同期メソッドと遷移

すべてのAPIメソッドは、非同期で遷移を開始する。それらは移行が始まるとすぐに呼び出し元に戻るが、終了する前に呼び出し元に戻る。さらに、遷移コンポーネントのメソッド呼び出しは無視される。

詳細については、Javascriptのドキュメントに記載。

`$().tab`

タブ要素とコンテンツコンテナをアクティブにする。タブには、DOM内のコンテナの接点をターゲットとする data-target が必要。

●最初のタブにactive設定していても最後のタブがアクティブになる例

HTML<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">ホーム</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">プロフィール</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">メッセージ</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">セッティング</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>

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

`.tab('show')`

指定されたタブを選択し、関連するコンテンツを表示。その前に選択された他のタブは選択解除され、関連するコンテンツは非表示になる。タブパネル区画が実際に表示される前（つまり、shown.bs.tab イベント発動前）に呼び出し元に戻る。

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

`.tab('dispose')` v4.0.0追加

要素のタブを破棄。

イベント（Events）

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

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` を使用して、前のアクティブなタブと新しいアクティブなタブをそれぞれターゲットにする

JavaScript$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
	event.target // 新しくアクティブ化されたタブ
	event.relatedTarget // 前のアクティブなタブ
})

ナビゲーション（Navs） v4.0.0一部変更 v4.2.1設定変更

基本のナビゲーション（Base nav）v4.6.1設定変更

1. リスト(<ul> > <li>)で設定

見本

設定例（v4.6.1～）

2. ナビゲーション(<nav>)で設定

見本

設定例

使用可能なスタイル（Available styles）

水平方向の位置合わせ（Horizontal alignment）v4.0.0新設

1. 中央揃え

見本

設定例

2. 右寄せ

見本

設定例

縦積み（Vertical）v4.0.0設定変更

1. リスト(<ul> > <li>)で設定

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

2. ナビゲーション(<nav>)で設定

見本

設定例（v4.6.1～）

タブナビゲーション（Tabs）v4.6.1設定変更

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

ピルナビゲーション（Pills）v4.6.1設定変更

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

幅一杯と等幅サイズ（Fill and justify）

1. 幅一杯で不均等サイズ v4.6.1新設

見本（<ul> > <li> で設定する場合）

設定例

見本（<nav> で設定する場合）v4.5.1設定変更

設定例

2. 幅一杯で等幅サイズ v4.0.0復活

見本（<ul> > <li> で設定する場合）

設定例

見本（<nav> で設定する場合）v4.6.1設定変更

設定例

Flexユーティリティの使用（Working with flex utilities）

見本

設定例

アクセシビリティに関して（Regarding accessibility）

ドロップダウン付きナビゲーション（Using dropdowns）v4.6.1設定変更

ドロップダウン付きタブナビゲーション（Tabs with dropdowns）

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

ドロップダウン付きピルナビゲーション（Pills with dropdowns）

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

JavaScript動作（JavaScript behavior）

1. タブナビゲーションの場合 v4.6.2設定変更

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.6.2～の設定例 緑背景が変更箇所

2. ナビゲーション(<nav>)で設定 v4.6.2設定変更

見本

Bootstrap4.6.1の設定例 赤背景が変更箇所

Bootstrap4.6.2～の設定例 緑背景が変更箇所

3. ピルナビゲーションの場合 （フェード効果付き）v4.6.2設定変更

見本

Bootstrap4.6.1の設定例 赤背景が変更箇所

Bootstrap4.6.2～の設定例 緑背景が変更箇所

4. 縦積みのピルナビゲーション フェード効果付き、v4.6.2設定変更

見本

Bootstrap4.6.1の設定例 赤背景が変更箇所

Bootstrap4.6.2～の設定例 緑背景が変更箇所

データ属性を利用（Using data attributes）

設定例

JavaScript経由で（Via JavaScript）v4.6.2設定変更 サンプル

フェード効果（Fade effect）v4.0.0設定変更

メソッド（Methods）

非同期メソッドと遷移

$().tab

1. リスト(`<ul>` > `<li>`)で設定

2. ナビゲーション(`<nav>`)で設定

1. リスト(`<ul>` > `<li>`)で設定

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

2. ナビゲーション(`<nav>`)で設定

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

見本（`<ul>` > `<li>` で設定する場合）

見本（`<nav>` で設定する場合）v4.5.1設定変更

見本（`<ul>` > `<li>` で設定する場合）

見本（`<nav>` で設定する場合）v4.6.1設定変更

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.6.2～の設定例緑背景が変更箇所

2. ナビゲーション(`<nav>`)で設定 v4.6.2設定変更

Bootstrap4.6.1の設定例赤背景が変更箇所

Bootstrap4.6.2～の設定例緑背景が変更箇所

3. ピルナビゲーションの場合（フェード効果付き）v4.6.2設定変更

Bootstrap4.6.1の設定例赤背景が変更箇所

Bootstrap4.6.2～の設定例緑背景が変更箇所

4. 縦積みのピルナビゲーションフェード効果付き、v4.6.2設定変更

Bootstrap4.6.1の設定例赤背景が変更箇所

Bootstrap4.6.2～の設定例緑背景が変更箇所

JavaScript経由で（Via JavaScript）v4.6.2設定変更サンプル

`$().tab`

`.tab('show')`

`.tab('dispose')` v4.0.0追加