ナビゲーション | コンポーネント

ナビゲーション Navs

Bootstrapで用意されているナビゲーション、.nav-tabsと.nav-pillsの紹介。グロバルナビの.navbarはグローバルナビページで紹介しています。
どのナビゲーションも.navでナビゲーションですと指定した上で、.nav-tabsや.nav-pillsや.navbarで装飾を変更する形になります。

タブ型ナビゲーション

.navと.nav-tabsを指定することでタブ型のナビゲーションになります。
.activeを指定することで選択中のタブを明示できます。

				<ul class="nav nav-tabs">
	      	<li class="active"><a href="#">Home</a></li>
	      	<li><a href="#">Profile</a></li>
	      	<li><a href="#">Messages</a></li>
	    	</ul>

ナビゲーションのデモ

ピル型ナビゲーション

.navと.nav-pillsを指定することでピル型のナビゲーションになります。
.activeを指定することで選択中のタブを明示できます。
※pillは英語で錠剤というような意味があるのでその形状からつけられた名前かと思います。

				<ul class="nav nav-pills">
	      	<li class="active"><a href="#">Home</a></li>
	      	<li><a href="#">Profile</a></li>
	      	<li><a href="#">Messages</a></li>
	    	</ul>

.nav-stackedを追加指定することで縦並びのピル型のナビゲーションになります。

				<ul class="nav nav-pills nav-stacked">
					...
	    	</ul>

ナビゲーションのデモ

バリエーション

ページ内遷移

上記で紹介したナビは、違うページへのリンクになります。
タブ型、ピル型ナビでページを移動せずに表示内容を変更する場合はタブ型は、data-toggle="tab"、ピル型はdata-toggle="pill"を追加します。
表示する内容は.tab-contentで囲みそれぞれの内容を.tab-paneを指定します。
.activeを指定することで最初の内容を表示しておけます。

				<ul class="nav nav-tabs">
	      	<li class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
	      	<li><a href="#tab2" data-toggle="tab">Profile</a></li>
	      	<li><a href="#tab3" data-toggle="tab">Messages</a></li>
	    	</ul>

	      <div class="tab-content">
	        <div class="tab-pane active" id="tab1">Tab1 Content</div>
	        <div class="tab-pane" id="tab2">Tab2 Content</div>
	        <div class="tab-pane" id="tab3">Tab3 Content</div>
	      </div>

ナビゲーションのデモ

均等配置ナビゲーション

.nav-justifiedをタブ型、ピル型のナビに追加で指定することで横幅一杯を均等に分割したナビゲーションになります。スマホサイズ(767px)以下では縦並びのナビになります。
※Safariではバグがありウインドウサイズをリサイズしていると表示が崩れるので使用の際には注意が必要です。
ブラウザの仕様なのか公式でも対応策の掲載も無いので仕事では使えないかも。。

				<!--均等配置のタブ型ナビゲーション-->
				<ul class="nav nav-tabs nav-justified"">
					...
	    	</ul>

				<!--均等配置のピル型ナビゲーション-->
				<ul class="nav nav-pills nav-justified"">
					...
	    	</ul>

ナビゲーションのデモ

ドロップダウンメニュー

タブ型、ピル型に追加でドロップダウンメニューを追加する方法。
まずドロップダウンメニューにするリストに.dropdownを指定します。
ドロップダウンメニューにするaタグに.dropdown-toggleクラスの追加、data-toggleにdropdownであることを明示します。.caretは下三角（▼）の表示用です。
最後にリストタグに.dropdown-menuを指定することでドロップダウンメニューになります。

				<ul class="nav nav-tabs">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Help</a></li>
					<li class="dropdown">
						<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
						<ul class="dropdown-menu">
							...
						</ul>
					</li>
				</ul>

ナビゲーションのデモ

リンクの無効化（表示上のみ）

.disabledを指定することでリンクが表示上のみ無効になります。
cursor: not-allowed;のスタイルが反映されて禁止マークが表示されますがクリックするとリンク先に飛びます。
公式でも本当にリンクを無効化したい時はJavaScriptを使用してくださいと書いています。
あまり意味が無い気がしますがどこで使用するのでしょう。。。

				<li class="disabled"><a href="#">Messages</a></li>

ナビゲーションのデモ