ナビメニュー

##基本的な使い方

1. head要素内（主にmetaタグ）に```viewport```のname要素を指定
2. ブロック要素に```navbar navbar-default```のclass要素を指定

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

```html
<nav class="navbar navbar-default"></nav>
```

###サイト名（ロゴ部分）にリンク配置
`nav-header`クラスを指定したdivタグの中に`navbar-brand`を指定したaタグを配置する

```html:サイト名
<div class="nav-header">
    <a class="navbar-brand" href="#">サイト名</a>
</div>
```

###テキストの配置
`navbar-text`を指定したpタグで配置する

```html:テキスト
<nav class="navbar navbar-default">
    <p class="navbar-text">テキスト</p>
</nav>
```

###ボタンの配置
`navbar-btn`を設定する

```html:ボタン
<nav class="navbar navbar-default">
    <button class="btn btn-default navbar-btn">Button</button>
</nav>
```

###フォームの配置
`navbar-form`と`navbar-left`or`navbar-right`クラスを設定したformタグを配置する
left or rightを設定しないとformタグの幅が横幅いっぱいになってしまう
入力項目は`form-group`で括らないと、横幅いっぱいに広がってしまう

```html:フォーム
<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要素を配置する

```html:一体化したボタン
<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"`を指定する

```html:ドロップダウンメニュー
<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**は”トグル（留め具）”という意味がある

```html:レスポンシブ対応
<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;`を設定する（余白をつくる）

```html:固定ナビゲーションバー
<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`クラスを指定する

```html:画面幅いっぱい
<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <p class="navbar-text">text</p>
    </div>
</nav>
```

###ナビゲーションバーの色を反転
`navbar-default`の代わりに`navbar-inverse`を指定すると、
色が反転したスタイルになる

```html:ナビゲーションバーの色を反転
<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>
```