ナビゲーションバー - Bootstrap4移行ガイド
- ナビゲーションバーコンポーネントを使うと、サイトでよく見るヘッダーをつくることができる
- ナビゲーションバーを表示するには、
.navbar とレスポンシブ可能な折り畳みのために .navbar-expand{-sm|-md|-lg|-xl} が必要になるのと、バーの文字色や背景色を決定するために配色クラスが必要になる
- ナビゲーションバーでコンテナーの横幅一杯に広がる
- ナビゲーションバー内の要素は空白やFlexユーティリティクラスを使って配置する
- ナビゲーションバーはロゴやハンバーガーメニューを内包できる
.navbar-brand ... サイトのロゴや名前を、テキスト、または画像、または画像とテキストの組み合わせで表示する.navbar-toggler ... ハンバーガーボタン.navbar-nav ... ハンバーガーボタンを押したときに表示されるメニュー.collapse.navbar-collapse ... メニューの表示・非表示を切り替える.form-inline ... 入力欄と検索ボタンなど、検索フォームを挿入する.navbar-text ... ナビゲーションバーに最適化された見た目のテキストを表示する
- カラーユーティリティクラスを使えば、ナビゲーションバーの配色を変更できる
- 背景色を指定しても文字がしっかり見えるように、明るい背景色には
.navbar-light （暗い文字色）、くらい背景色には .navbar-dark （明るい文字色）を指定する
- ナビゲーションバーを最上部に固定するには、
.navbar.fixed-top を指定する
- ナビゲーションバーを固定にするとスクロールしたときに最上部のコンテンツと重なるので、ナビゲーションバーの親要素に
padding-top の指定が別途必要になる
- ナビゲーションバーを最下部に固定するには、
.navbar.fixed-bottom を指定する
- 最上部の固定と同様に、コンテンツを隠さないために親要素に
padding-bottom が必要になる
- ナビゲーションバーが最上部に達したときに固定したい場合は、
.navbar.sticky-top を指定する
- ナビゲーションバーのレスポンシブ対応は、
.navbar-toggler, .navbar-collapse, .navbar-expand{-sm|-md|-lg|-xl} を使用して実現可能
