常時折り畳まれているナビゲーションバー .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 の灰色ナビゲーションバー

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

ユーティリティを含む灰色の中央揃えのナビゲーションバーv5.2.3追加

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

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

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

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


閉じる