基本的な使い方
- head要素内（主にmetaタグ）に
viewportのname要素を指定 - ブロック要素に
navbar navbar-defaultのclass要素を指定
<meta name="viewport" content="width=device-width, initial-scale=1">
<nav class="navbar navbar-default"></nav>
サイト名（ロゴ部分）にリンク配置
nav-headerクラスを指定したdivタグの中にnavbar-brandを指定したaタグを配置する
<div class="nav-header">
<a class="navbar-brand" href="#">サイト名</a>
</div>
テキストの配置
navbar-textを指定したpタグで配置する
<nav class="navbar navbar-default">
<p class="navbar-text">テキスト</p>
</nav>
ボタンの配置
navbar-btnを設定する
<nav class="navbar navbar-default">
<button class="btn btn-default navbar-btn">Button</button>
</nav>
フォームの配置
navbar-formとnavbar-leftornavbar-rightクラスを設定したformタグを配置する
left or rightを設定しないとformタグの幅が横幅いっぱいになってしまう
入力項目はform-groupで括らないと、横幅いっぱいに広がってしまう
<nav class="navbar navbar-default">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" />
</div>
<button type="submit" class="btn btn-default">検索</button>
</form>
</nav>
一体化したボタンの配置
navとnavbar-navを指定したul要素を配置する
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</nav>
ドロップダウンメニューを追加
liタグのclass要素にdropdownを指定し、そのタグ内にul要素の<ul class="dropdown-menu">を入れる
また親要素のli要素のa要素に対してclass="dropdown-toggle" data-toggle="dropdown"を指定する
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
親メニュー<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">子メニュー1</a></li>
<li><a href="#">子メニュー2</a></li>
</ul>
</li>
</ul>
</nav>
<b class="caret"></b>は"▼"
レスポンシブ対応
画面の幅が狭くなった時（スマホなどデバイスに対応）に各項目を非表示にして、メニューボタンで呼び出せるようにする
navbar-headerの中にbuttonタグで画面幅が小さくなったときに表示するボタンを配置する
幅が小さくなったときに非表示にする範囲をcollapseとnavbar-collapseを指定したdivタグを特定するためのセレクタをメニューボタンのdata-target属性に設定する
collapseは”折りたたむ”いう意味がある
toggleは”トグル（留め具）”という意味がある
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#collapse-target">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand"></a>
</div>
<div class="collapse navbar-collapse" id="collapse-target">
<ul class="nav navbar-nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
</nav>
固定グローバルナビゲーション
固定グローバルナビゲーションにしたい場合、navbarとnavbar-fixed-topのクラス属性を指定したブロック要素で括る
ナビゲーションバーの中身はcontainerまたはcontainer-fluidクラスを指定したdivタグで括る
ナビゲーションバーが直後の要素を覆い隠してしまうため、
body要素のスタイルにpadding-top: 50px;を設定する（余白をつくる）
<head>
<style>
body { padding-top: 50px;}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<p class="navbar-text">サイト名</p>
<ul class="nav navbar-nav">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
</nav>
画面の幅いっぱいまで利用する
navbar-static-topクラスを指定する
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<p class="navbar-text">text</p>
</div>
</nav>
ナビゲーションバーの色を反転
navbar-defaultの代わりにnavbar-inverseを指定すると、
色が反転したスタイルになる
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<p class="navbar-text">サイト名</p>
<ul class="nav navbar-nav">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
</nav>