実例:ナビゲーションバー
ナビゲーションバーコンポーネントのすべてのレスポンシブとコンテナオプションのデモ。
※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
![幅一杯にナビゲーションバー 幅一杯にナビゲーションバー](https://bootstrap-guide.com/files/example_files/41/navbar-fluid.png)
幅一杯にナビゲーションバーv5.3.1設定変更
メニューがビューポートの両端に広がったナビゲーションバーの実例。
![メニューのみがサイトの本体と同じ幅のナビゲーションバー メニューのみがサイトの本体と同じ幅のナビゲーションバー](https://bootstrap-guide.com/files/example_files/42/navbar-container.png)
メニューのみがサイトの本体と同じ幅のナビゲーションバーv5.3.1設定変更
サイトの本体の両端と揃ったナビゲーションバーの実例。
![サイトの本体と同じ幅のナビゲーションバー サイトの本体と同じ幅のナビゲーションバー](https://bootstrap-guide.com/files/example_files/43/container-navbar.png)
サイトの本体と同じ幅のナビゲーションバーv5.3.1設定変更
メニュー部分のみがサイトの本体の両端と揃ったナビゲーションバーの実例。
![レスポンシブ・コンテナを使用したナビゲーションバー レスポンシブ・コンテナを使用したナビゲーションバー](https://bootstrap-guide.com/files/example_files/44/responsive-container.png)
レスポンシブ・コンテナを使用したナビゲーションバーv5.0.0新設 v5.3.1設定変更
ビューポートサイズに応じて両端の位置が変化するナビゲーションバーの実例。
![レスポンシブ・ナビゲーションバー レスポンシブ・ナビゲーションバー](https://bootstrap-guide.com/files/example_files/45/responsive-navbars.png)
レスポンシブ・ナビゲーションバーv5.2.3一部追加 v5.3.1設定変更
ナビゲーションバーの様々な配置のバリエーション。
![オフキャンバス付きナビゲーションバー オフキャンバス付きナビゲーションバー](https://bootstrap-guide.com/files/example_files/46/navbars-offcanvas.png)
オフキャンバス付きナビゲーションバーv5.2.0新設 v5.3.0設定変更
オフキャンバスコンポーネントを使用したナビゲーションバーの実例。
![静的トップナビゲーションバー 静的トップナビゲーションバー](https://bootstrap-guide.com/files/example_files/47/navbar-static.png)
静的トップナビゲーションバーv5.3.1設定変更
いくつかの追加コンテンツを持つ単一の静的なナビゲーションバーの実例。
![トップ固定のナビゲーションバー トップ固定のナビゲーションバー](https://bootstrap-guide.com/files/example_files/48/navbar-fixed.png)
トップ固定のナビゲーションバーv5.3.1設定変更
いくつかの追加コンテンツを持つ固定されたトップナビゲーションバーの実例。
![ボトム固定のナビゲーションバー ボトム固定のナビゲーションバー](https://bootstrap-guide.com/files/example_files/49/navbar-bottom-fixed.png)
ボトム固定のナビゲーションバーv5.3.1設定変更
いくつかの追加コンテンツを持つ固定されたボトムナビゲーションバーの実例。
![最上部に達すると固定されるナビゲーションバー 最上部に達すると固定されるナビゲーションバー](https://bootstrap-guide.com/files/example_files/50/navbar-sticky-top.png)
最上部に達すると固定されるナビゲーションバーv5.3.1設定変更
スクロールして最上部に達すると最上部に固定されるナビゲーションバーの実例。
![最下部に達するまで固定されるナビゲーションバー 最下部に達するまで固定されるナビゲーションバー](https://bootstrap-guide.com/files/example_files/51/navbar-sticky-bottom.png)
最下部に達するまで固定されるナビゲーションバーv5.2.0新設 v5.3.1設定変更
スクロールして最下部に達するまで最下部に固定されるナビゲーションバーの実例。
![オフキャンバスナビゲーションバー オフキャンバスナビゲーションバー](https://bootstrap-guide.com/files/example_files/52/offcanvas-navbar.png)
オフキャンバスナビゲーションバーv5.0.0カテゴリ変更 v5.3.0設定変更
拡張可能なナビゲーションバーをスライドオフキャンバスメニューに変更(オフキャンバスコンポーネントは不使用)。