●常時折り畳まれているナビゲーションバー .navbar

●常時展開しているナビゲーションバー .navbar.navbar-expand

●ビューポート小以上で展開するナビゲーションバー .navbar.navbar-expand-sm

●ビューポート中以上で展開するナビゲーションバー .navbar.navbar-expand-md

●ビューポート大以上で展開するナビゲーションバー .navbar.navbar-expand-lg

●ビューポート特大以上で展開するナビゲーションバー .navbar.navbar-expand-xl

●ビューポート超特大以上で展開するナビゲーションバー .navbar.navbar-expand-xxl v5.0.0-alpha1追加

nav.navbar > div.container のナビゲーションバー

nav.navbar > div.container-xl(レスポンシブ・コンテナ)のナビゲーションバー

.container-xlと一致...

●折り畳みボタンが左側にあるナビゲーションバー

●中央揃えのナビゲーションバー .navbar-collapse.justify-content-md-center

div.container > nav.navbar の灰色ナビゲーションバー

●灰色の中央揃えのナビゲーションバー

ナビゲーションバーの実例

この実例は、ナビゲーションバーとその内容がどのように機能するかを簡単に示している。ナビゲーションバーによってはビューポートの幅が拡張されるものもあれば、.container 内に限定されるものもある。ナビゲーションバーの配置については、静的トップトップ固定の実例を確認すること。

極小のブレークポイントでは、リンクを非表示にするための折りたたみプラグインが使用され、折り畳まれたコンテンツを切り替えるメニューボタンが表示される。

ナビゲーションバーの解説へ »


閉じる