本当は、navsとnavbar作成に関しての記事を一つにまとめるつもりだったんですが、
内容が豊富すぎるので、（本サイトでもさすが２項目に分けるだけあって）navbarのコーディング方法を紐解いていきたいと思います。
navsの記事はこちら
navbarの基本
navbarを使用するにあたって、まず初めに知っておかないことがあるという記述が本サイトにはあります。
まずこちらから。
使い方
- navbarsには好きなブレイクポイントで折りたたみができるクラス
.navbar-expand{-sm|-md|-lg|-xl}とカラーバリエーショ（本サイトではカラースキームと表記されています。）が用意されているので、そのクラス.navbarをつけるのが必須となっています。 - navbarsは流動幅なので、固定させるためにはコンテナ
.containerに格納する必要があります。 - navbarsはflexboxを採用しているので、配置を決定（左寄せ・中央寄せ・右寄せなど）させるには位置オプションのクラスで定義します。
- navbarsは標準でも十分に動作しますが、カスタマイズが可能です。それぞれ設定したjavascriptによってそのカスタマイズは変わります。
<nav>によってアクセシビリティを確認する、もしくはaなどの要素で構成する場合はrole="navigation"使用するすべてのaタグに付与してユーザーに明確に認識させます。
使用前にこれらの項目が前書きとして本サイトにも記載されています。
（上記は意訳です）詳細は本サイトにて確認してください。
本サイトには他にもさらにnavbarsを使用するにあたって、必要な項目などが書かれています。
さて、前書きはこの辺にしておいて、
基本のコーディングを記載したいと思います。
表示サンプル
ソース
<nav class="navbar navbar-expand-md navbar-light bg-light"> <!--ブランド名・ロゴを入れる--> <a class="navbar-brand" href="#">ブランド</a> <!--レスポンシブの際のハンバーガーメニューのボタン--> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!--ナビバー内のメニュー--> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- ハンバーガーメニューのボタンを動かすためには、 上記id="navbarSupportedContent"部分と<button>内に記述のある data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 部分を一緒にする必要があります。--> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">メニュー1 <span class="sr-only">(カレント)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー3</a> </li> </ul> <!--ナビバー内の検索フォーム--> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>
ソースの記述方法としては、liを使用してメニュー部分を作成する記述とaを使用してメニュー部分を作成する記述方法とがあります。
構造的には、<nav>…</nav>の間に入るソースの構成としては、
ブランド名やブランドロゴが.navbar-brand入り、その後、ハンバーガーメニューのアイコンを入れる <button>が入り、その後ナビバー内のメニューの記述が入ります。
検索窓を入れたい場合は検索フォームの記述が入ります。
<nav>に入れてあるクラスの.navbarでこのソースがナビゲーションであることを定義.navbar-expand-{xs/md/lg/xl}でどのブレイクポイントで折りたたむかを定義しています。
.navbar-expand-の後に続く{xs/md/lg/xl}に関しては、グリッドシステムの.col-のブレイクポイントによってコンテナを分ける.col-xs.col-md-.col-lg.col-xlと同じ理解で問題ないと思います。
これを定義することによって、スマホの時にだけ折りたたんでハンバーガーメニューにするのか、スマホとタブレットのみ折りたたむのか、デスクトップも含めてすべてハンバーガーメニューにするのか、などの設定ができます。
その後に続く.navbar-light .bg-lightでカラースキーム、つまり設定されているNavbarsのカラーのスタイルを決定します。
カラースキームの詳細に関しては本サイトのこちらにさらに詳細が記述されています。
ちなみにフォームがない場合のnavbar
表示サンプル
ソース(liタグを使用したもの)
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">ブランド名</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー4</a> </li> </ul> </div> </nav>
ソース（aタグを使用したもの）
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">ブランド名</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">メニュー1 <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">メニュー2</a>
<a class="nav-item nav-link" href="#">メニュー3</a>
<a class="nav-item nav-link" href="#">メニュー4</a>
</div>
</div>
</nav>となります。
メニューの配置をどうにかしたい時
デフォルトで作成した場合は、すべて左寄せで作成となります。
ですが、デザインによっては、ブランド名やロゴを左寄せにし、メニュー部分は右寄せにしたり、と、デフォルト以外のレイアウトにしたい場合があるかと思います。
そんな場合の記述方法も紹介します。
ブランド名左寄せ、メニュー部分を中央寄せにしたい場合
単純にメニュー部分に.justify-content-centerをつける
表示サンプル（メニュー中央寄せ）
ソース
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">ブランド名</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-center" id="navbarNav1"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー4</a> </li> </ul> </div> </nav>
ブランド名左寄せ、メニュー部分を右寄せにしたい場合
こちらも単純にメニュー部分に.justify-content-endを入れています。
表示サンプル（メニュー右寄せ）
ソース
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">ブランド名</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNav2"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー4</a> </li> </ul> </div> </nav>
公式の記述では
<nav class="navbar navbar-light bg-light justify-content-between">というように、<nav>部分にを.justify-content-between入れて作成する方法が書かれています。
私個人的には上記で詳細したソースの方がブロック単位で考えるのでわかりやすいかなと思ったんですが、どちらでも見え方は同じなので、お好きな方を使用してください。
ドロップダウンメニューを入れたnavbar
もちろんドロップダウンを入れたものも作成できます。
ドロップダウンメニューの構造に関しては、navsを紹介したページで記載したものとほぼ変わりません。
応用して多階層のメニューの作成もできそうです。
表示サンプル
ソース
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <!--ブランド名・ロゴを入れる--> <a class="navbar-brand" href="#">ブランド</a> <!--レスポンシブの際のハンバーガーメニューのボタン--> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!--ナビバー内のメニュー--> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">メニュー <span class="sr-only">(カレント)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー</a> </li> <!-- ドロップダウンメニュー部分 --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ドロップダウン </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">ドロップダウンメニュー1</a> <a class="dropdown-item" href="#">ドロップダウンメニュー2</a> <a class="dropdown-item" href="#">ドロップダウンメニュー3</a> </div> </li> </ul> </div> </nav>
様々なバリエーションがあるnavbars
以上が基本的な構造ですが、
様々なオプションが用意されているので、それらを使用して地震のデザインにあったコーディングが可能なのではないでしょうか。
詳細は本サイトにて
bootstrap navbar
http://getbootstrap.com/docs/4.0/components/navbar/
自分の復習なども兼ねて、bootstrap使用法の記事を書き始めましたが、だいぶ疲れますねこれ。
他サイトさんのこういった記事をさらっと書いてらっしゃる方、本当に尊敬します。
今までそういう記事にすごく助けられてきたので、私も、この記事を書くことで、どこかしらでお役に立てればいいと思います。
しかし、4になってから、ますます面白い構造になっているbootstrap。
便利ですし本当。
このサイトはbootstrap３で作成していますが、仕事がひと段落したら勉強も兼ねて４で作り直そうと思っている次第でございます。