Bootstrapでナビゲーションを作成する

Bootstrapのナビゲーション（ナビバー）に関しては、いくつかデザイン方法がありますけれど基本的な作成方法について書きます。

参考ページ：Navbar

ナビゲーションを作るには、nav（またdiv）のclassに”navbar navbar-default”を設定して、リスト（ul）のclassに”nav navbar-nav”を設定すると、下のようにナビゲーションが作成されます。

<nav class="navbar navbar-default">
	<ul class="nav navbar-nav">
		<li><a href="#">html</a></li>
		<li><a href="#">css</a></li>
	</ul>
</nav>

ナビゲーションにヘッダー要素も追加することができ、classに”navber-header”を設定して、その中のclassに”navbar-brand”と設定することで出来ます。

また、リスト（li）のclassに”active”を設定することで下の画像のようにアクティブに見せる（色を付ける）こともできます。

<nav class="navbar navbar-default">
	<div class="navbar-header">
		<a class="navbar-brand" href="#">WPCOS</a>
	</div>
	<ul class="nav navbar-nav">
		<li class="active"><a href="#">html</a></li>
		<li><a href="#">css</a></li>
	</ul>
</nav>