Bootstrap4移行ガイドを読む（コンポーネント編、ナビゲーションバー）

ナビゲーションバー - 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} を使用して実現可能