Bootstrap4のグローバルナビ Navbarで使われるクラス

Bootstrapで用意されているナビゲーションバー、Bootstrap4ではdiv.container-fluiddiv.navbar-header の設定は不要になりました。

基本・・・全幅

基本・・・全幅だけどメニューは「container幅」

基本・・・「container幅」

 

ナビゲーションバーを指定 → navbar

レスポンシブ可能な折り畳みのためのクラス → .navbar-expand{-sm|-md|-lg|-xl}

配色クラス

 

.fixed-top

.sticky-top

<nav> を <header> で囲むのは不可

ドロップダウン

 

応用・・・全幅だけどメニューは「container幅」+黒背景+等間隔に配置

 

配置

class=”navbar-nav”に加える場合

中央揃え

<ul class=”nav justify-content-center”>

</ul>

右寄せ

<ul class=”nav justify-content-end”>

</ul>

<ul class=“nav nav-pills nav-fill>

</ul>

<ul class=”nav nav-pills nav-justified”>

</ul>

配置(Flexboxプロパティ使用)

justify-content-start = 水平方向の左寄せ
justify-content-end = 水平方向の右寄せ
justify-content-center = 水平方向の中央寄せ
justify-content-between = 左右余白を開けず等間隔に配置
justify-content-around = 左右に余白を開け等間隔に配置

 

ブレークポイント

navbar-expand-sm = xs画面のモバイルメニュー<576px
navbar-expand-md = smスクリーン上のモバイルメニュー<768px
navbar-expand-lg = md画面のモバイルメニュー<992px
navbar-expand-xl = lg画面のモバイルメニュー<1200px
navbar-expand =モバイルメニューを使用しない
(no expand class) =常にモバイルメニューを使用

コメント

タイトルとURLをコピーしました