メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

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

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

基本のナビゲーション(Base nav)v4.2.1設定変更

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

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

1. リスト(<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="#">リンク1</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" href="#">リンク2</a>
	</li>
	<li class="nav-item">
		<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
	</li>
</ul>

クラスが全体を通して使用されるため、マークアップを柔軟に行うことが可能。上記のような <ul> を使用するか、<nav> 要素を使って自分自身を作動させる。.navdisplay: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" href="#" tabindex="-1" aria-disabled="true">無効</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 を追加

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

  • .disabled と同じ要素に tabindex="-1" aria-disabled="true"(支援技術にdisabled属性が指定されたのと同じ状態であること伝える)を入れる

【変更履歴】

  • 【v4.2.1】.disabled 関連のアクセシビリティの設定を追加

【Bootstrap3.xとの変更箇所】

  • .nav のみで横並びのナビゲーションの設定が可能に(v3では .nav.nav-pills にしなければ横並びにならなかった)
  • リンクにカーソルを合わせた際に、無効化カーソル(cursor: not-allowed;)に変化しなくなった
  • その他の変更は、タブナビゲーションまたはピルナビゲーションに記載

 

使用可能なスタイル(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" href="#" tabindex="-1" aria-disabled="true">無効</a>
	</li>
</ul>

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

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

見本
設定例
<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" href="#" tabindex="-1" aria-disabled="true">無効</a>
</nav>

【設定】

  • .nav.flex-column を追加

【Bootstrap3.xとの変更箇所】

  • .nav.nav-stacked.nav.flex-column

タブナビゲーション(Tabs)v4.0.0設定変更

上記の基本的なナビゲーションを使用して、.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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</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 を追加して縦積みにすることはできるが、レイアウト的には推奨しない

【Bootstrap3.xとの変更箇所】

  • li[role="presentation"]li.nav-item
  • aa.nav-link
  • アクティブ化したいタブ:li.activeli.nav-item > a.nav-link.active
  • 無効化したいタブ:li.disabledli.nav-item > a.nav-link.disabled

ピルナビゲーション(Pills)v4.0.0設定変更

同様の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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>

【設定】

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

【注意】

【Bootstrap3.xとの変更箇所】

  • li[role="presentation"]li.nav-item
  • aa.nav-link
  • アクティブ化したいリンク:li.activeli.nav-item > a.nav-link.active
  • 無効化したいリンク:li.disabledli.nav-item > a.nav-link.disabled

幅一杯と等幅サイズ(Fill and justify)

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

見本(<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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>

<nav> ベースのナビゲーションを使うときは、アンカーに .nav-item を必ず含めること。

見本(<nav> で設定する場合)
設定例
<nav class="nav nav-pills nav-fill">
	<a class="nav-item nav-link active" href="#">アクティブ</a>
	<a class="nav-item nav-link" href="#">かなり長めのリンク</a>
	<a class="nav-item nav-link" href="#">リンク</a>
	<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</nav>

【設定】

  • .nav.nav-fill を追加

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

見本(<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 href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">無効</a></li>
</ul>

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

見本(<nav> で設定する場合)
設定例
<nav class="nav nav-pills nav-justified">
	<a class="nav-item nav-link active" href="#">アクティブ</a>
	<a class="nav-item nav-link" href="#">かなり長めのリンク</a>
	<a class="nav-item nav-link" href="#">リンク</a>
	<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</nav>

【設定】

  • .nav.nav-justified を追加

【Bootstrap3.xとの変更箇所】

  • 等幅サイズのナビゲーション(.nav-justified)はv3.3.0でサポート外となったが、v4で復活。

 

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

 

アクセシビリティに関して(Regarding accessibility)

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

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

 

ドロップダウンつきナビゲーション(Using dropdowns)

少し追加した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-haspopup="true" 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-haspopup="true" 属性(ポップアップメニューが存在するかどうかを示す)を入れる
  • aria-expanded="false" 属性(要素の開閉の状態を示す)を入れる

【Bootstrap3.xとの変更箇所】

  • ドロップダウンリンク: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 > adiv.dropdown-menu > a.dropdown-item

ドロップダウンつきピルナビゲーション(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-haspopup="true" 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-haspopup="true" 属性(ポップアップメニューが存在するかどうかを示す)を入れる
  • aria-expanded="false" 属性(要素の開閉の状態を示す)を入れる

【Bootstrap3.xとの変更箇所】

  • ドロップダウンリンク: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 > adiv.dropdown-menu > a.dropdown-item

 

JavaScript動作(JavaScript behavior)

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

ソースファイルからJavaScriptを構築する場合は、util.js が必要

WAI-ARIA オーサリングプラクティスで説明されているように、動的タブ付きインタフェースは、role ="tablist"role="tab"role="tabpanel"、および追加の aria- 構造、機能、および現在の状態を支援技術(スクリーンリーダーなど)のユーザーに提供する。

動的タブ付きインタフェースには、ユーザビリティとアクセシビリティの両方の問題が発生するためドロップダウンのメニューを入れてはいけない。ユーザビリティの観点からは、現在表示されているタブの切替え要素が(閉じられたドロップダウンのメニューの中にあるので)すぐには見えないという事実が混乱の原因となる。アクセシビリティの観点からは、現在のところ、この種の構造を標準的なWAI ARIAパターンに割り付ける賢明な方法はなく、支援技術のユーザーには容易に理解できない。

見本
ホームの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
プロフィールの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
コンタクトの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
Bootstrap3.xの設定例 赤背景が変更箇所
<!-- タブ部分 -->
<ul id="myTab" class="nav nav-tabs" role="tablist">
	<li role="presentation" class="active">
		<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">ホーム</a>
	</li>
	<li role="presentation">
		<a href="#profile" id="profile-tab" role="tab" data-toggle="tab" aria-controls="profile">プロフィール</a>
	</li>
	<li role="presentation" class="dropdown">
		<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 href="#dropdown1" id="dropdown1-tab" role="tab" data-toggle="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">メニュー1の文章です。...</div>
	...
</div>
Bootstrap4.xの設定例 緑背景が変更箇所
<!-- タブ部分 -->
<ul id="myTab" class="nav nav-tabs" role="tablist">
	<li class="nav-item">
		<a href="#home" id="home-tab" class="nav-link active" role="tab" data-toggle="tab" aria-controls="home" aria-selected="true">ホーム</a>
	</li>
	<li class="nav-item">
		<a href="#profile" id="profile-tab" class="nav-link" role="tab" data-toggle="tab" aria-controls="profile" aria-selected="false">プロフィール</a>
	</li>
	<li class="nav-item">
		<a href="#contact" id="contact-tab" class="nav-link" role="tab" data-toggle="tab" aria-controls="contact" aria-selected="false">コンタクト</a>
	</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.0.0-beta.3設定変更

これは上記のように <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">ホーム</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">プロフィール</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">コンタクト</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>

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

見本
ホームの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
プロフィールの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
コンタクトの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
設定例
<!-- ピル部分 -->
<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">ホーム</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">プロフィール</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">コンタクト</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>

4. 縦積みのピルナビゲーション フェード効果つき

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

見本

ホームの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

プロフィールの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

メッセージの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

セッティングの文章です。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

設定例
<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>

【設定】

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

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

  • .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-beta.2】ドロップダウンの設定は不可となった

    aria-expandedaria-selected
    縦積みのピルナビゲーションで aria-orientation="vertical" 属性を追加

  • 【v4.0.0-beta.3】 ナビゲーションで設定する場合は、.nav.nav-tabsrole="tablist"属性の設定を <nav> に入れるのではなく、<div> 等に入れて、それを <nav> で囲む

データ属性を利用(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">
		<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">ホーム</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">プロフィール</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">メッセージ</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">セッティング</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>

JavaScript経由で(Via JavaScript)v4.0.0-beta.3設定変更 サンプル

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

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

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

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

【Bootstrap3.xとの変更箇所】

  • 最初のタブを選択:'#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番目から数える)

フェード効果(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>

【Bootstrap3.xとの変更箇所】

  • 初期のコンテンツ表示:.in.show

メソッド(Methods)

$().tab

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

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

HTML<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">ホーム</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">プロフィール</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">メッセージ</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">セッティング</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>
JavaScript<script>
	$(function () {
		$('#myTab li:last-child a').tab('show')
	})
</script>

.tab('show')

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

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

.tab('dispose') v4.0.0-beta.2追加

要素のタブを破棄。

イベント(Events)

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

  1. hide.bs.tab(現在のアクティブなタブに)
  2. show.bs.tab(次に表示されるタブに)
  3. hidden.bs.tab(以前のアクティブなタブでは hide.bs.tab イベントと同じもの)
  4. shown.bs.tab(新しくアクティブになって表示されるタブでは show.bs.tab イベントと同じもの)

既にアクティブなタブがない場合、hide.bs.tabhidden.bs.tab イベントは発動しない。

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