Bootstrap3
日本語リファレンス
広告
  1. Bootstrap3日本語リファレンス
  2. コンポーネント
  3. ナビゲーション・バー

ナビゲーション・バー　　Navbar

ウェブサイトやアプリケーションのナビゲーション・ヘッダーに最適なスタイル。

表示領域の幅が狭いモバイルなどには、メニューを非表示にし、メニュー表示を切り替えるためのボタンを表示する。メニューは縦に並べて表示する。

表示領域の幅が広いパソコンなどには、メニューを水平に表示する。

サンプル
使い方 　 基本 　 ブランド・イメージ 　 フォーム 　 ボタン 　 テキスト 　 テキストにリンクを貼る 　 左寄せ、右寄せ 　 トップ固定ナビゲーション・バー 　 ボトム固定ナビゲーション・バー 　 トップ配置ナビゲーション・バー 　 反転ナビゲーション・バー

使い方

ポイントは６つ。

  1. class属性に、navbar navbar-defaultを指定したnav要素を用意する。
  2. nav要素内に、class属性にnavbar-headerを指定したdiv要素と、collapse navbar-collapseを指定したdiv要素を配置する。
  3. 2でnavbar-headerを指定したdiv要素内に、button要素とa要素を配置する。
  4. 3で配置したbutton要素のclass属性にnavbar-toggle collapsedを指定、data-toggle属性にcollapseを指定する。更に、data-target属性に、collapse navbar-collapseを指定したdiv要素のid属性値（下記コードの場合navbarEexample）を指定。
  5. 3で配置したa要素のclass属性にnavbar-brandを指定する。a要素内には、ウェブサイトサイト名などのテキストを配置する。
  6. 2でcollapse navbar-collapseを指定したdiv要素には、id属性を指定。要素内には、class属性にnav navbar-navを指定したul要素を配置する。ul要素内に配置するli要素とa要素がメニュー項目となる。
<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">タイトル</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">メニューＡ</a></li>
				<li><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
		</div>
	</div>
</nav>

基本

基本的使い方。

表示サンプル

ソースコード

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">タイトル</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample1">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
		</div>
	</div>
</nav>

ブランド・イメージ

タイトル・テキストの代わりに、画像を使うこともできる。

表示サンプル

ソースコード

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample2">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				<img alt="Brand" src="brandImage.png" style="height: 20px;">
			</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample2">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
		</div>
	</div>
</nav>

フォーム

ナビゲーション・バー内に、フォーム（form要素）を配置することもできる。

form要素のclass属性にnavbar-formを指定する点に注意。

表示サンプル

ソースコード

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample3">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				タイトル
			</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample3">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="検索キーワード">
				</div>
				<button type="submit" class="btn btn-default">検索</button>
			</form>
		</div>
	</div>
</nav>

ボタン

ナビゲーション・バー内に、ボタン（button要素）を配置することもできる。

button要素のclass属性にnavbar-btnを指定する点に注意。

表示サンプル

ソースコード

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample4">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				タイトル
			</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample4">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
			<button type="button" class="btn btn-default navbar-btn">Sign in</button>
		</div>
	</div>
</nav>

テキスト

ナビゲーション・バー内に、テキストを配置することもできる。

テキストは、class属性にnavbar-textを指定したp要素で括る。

表示サンプル

ソースコード

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample5">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				タイトル
			</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample5">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
			<p class="navbar-text">ようこそ ゲスト さん。</p>
		</div>
	</div>
</nav>

テキストにリンクを貼る

class属性にnavbar-textを指定したp要素内のテキストにリンク（a要素）を貼ることもできる。

表示サンプル

ソースコード

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample6">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				タイトル
			</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample6">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
			<p class="navbar-text">ようこそ <a href="#" class="navbar-link">ゲスト</a> さん。</p>
		</div>
	</div>
</nav>

左寄せ、右寄せ

メニュー項目、フォーム、テキストなどは、左寄せ、右寄せを指定できる。

左寄せにする場合、class属性にnavbar-leftを指定する。

右寄せにする場合、class属性にnavbar-rightを指定する。

表示サンプル

ソースコード

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample7">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				タイトル
			</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample7">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
			<p class="navbar-text navbar-right">ようこそ <a href="#" class="navbar-link">ゲスト</a> さん。</p>
		</div>
	</div>
</nav>

トップ固定ナビゲーション・バー

nav要素のclass属性にnavbar-fixed-topを追加すると、ナビゲーション・バーをトップに固定表示できる。

ナビゲーション・バーをトップに固定表示する場合、body { padding-top: 70px; }のようにして、body要素の上部に70px程の余白を指定する必要がある。。

表示サンプル

ソースコード

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"data-toggle="collapse"data-target="#navbarEexample8">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				タイトル
			</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample8">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
			<p class="navbar-text navbar-right">ようこそ <a href="#" class="navbar-link">ゲスト</a> さん。</p>
		</div>
	</div>
</nav>

ボトム固定ナビゲーション・バー

nav要素のclass属性にnavbar-fixed-topを追加すると、ナビゲーション・バーをボトムに固定表示できる。

ナビゲーション・バーをボトムに固定表示する場合、body { padding-bottom: 70px; }のようにして、body要素の下部に70px程の余白を指定する必要がある。。

表示サンプル

ソースコード

<nav class="navbar navbar-default navbar-fixed-bottom">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"data-toggle="collapse"data-target="#navbarEexample9">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				タイトル
			</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample9">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
			<p class="navbar-text navbar-right">ようこそ <a href="#" class="navbar-link">ゲスト</a> さん。</p>
		</div>
	</div>
</nav>

トップ配置ナビゲーション・バー

nav要素のclass属性にnavbar-static-topを追加すると、ナビゲーション・バーをトップにピッタリと隙間なく配置できる。固定表示ではないので、スクロールすると移動する。

表示サンプル

ソースコード

<nav class="navbar navbar-default navbar-static-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"data-toggle="collapse"data-target="#navbarEexample10">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				タイトル
			</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample10">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
			<p class="navbar-text navbar-right">ようこそ <a href="#" class="navbar-link">ゲスト</a> さん。</p>
		</div>
	</div>
</nav>

反転ナビゲーション・バー

nav要素のclass属性にnavbar navbar-inverseを指定すると、ナビゲーション・バー外観を、色を反転させたかの様に変更する。

表示サンプル

ソースコード

<nav class="navbar navbar-inverse">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample7">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				タイトル
			</a>
		</div>
		
		<div class="collapse navbar-collapse" id="navbarEexample7">
			<ul class="nav navbar-nav">
				<li><a href="#">メニューＡ</a></li>
				<li class="active"><a href="#">メニューＢ</a></li>
				<li><a href="#">メニューＣ</a></li>
			</ul>
			<p class="navbar-text navbar-right">ようこそ <a href="#" class="navbar-link">ゲスト</a> さん。</p>
		</div>
	</div>
</nav>
広告
関連ページ
アイコンドロップダウンボタン・グループドロップダウン・ボタンインプット・グループナビゲーションナビゲーション・バーパンくずリストページネーションラベルバッジジャンボトロンページ・ヘッダーサムネイルアラートプログレス・バーメディア・オブジェクトリスト・グループパネルレスポンシブな埋め込み埋め込み効果
広告