ナビゲーション - Bootstrap4移行ガイド
- 複数のリンクが水平・垂直方向に並んだコンポーネント
- ナビゲーションコンポーネントを使うには
.nav を指定し、その中でいくつかのクラスを指定する
- ナビゲーションの配置には基本的にFlexboxが使われている
- ナビゲーションコンポーネントに
.active 状態は含まれていない
- このコンポーネントは
ul と li を使ってつくることもできるし、nav と a を使ってつくることもできる
- ナビゲーションの配置を変更するには、Flexユーティリティクラスを使う
.nav.justify-content-center で水平方向の中央揃え.nav.justify-content-end で水平方向の右端揃え.nav.flex-column でリンクを縦積みにする
.nav.nav-tabs でナビゲーションをタブにすることもできる.nav.nav-tabs でナビゲーションをタブにすることもできる。これには .active 状態を表すクラスが含まれている。動作させるにはJavaScriptを使う.nav.nav-pills でピルナビゲーションにすることもできる。これには .active 状態を表すクラスが含まれている。動作させるにはJavaScriptを使う- ナビゲーションを幅いっぱいで表示するには
.nav.nav-fill を指定する。ただし、これはすべてのリンクの幅が均等になるわけではない
- リンクの幅を均等にしたければ
.nav.nav-justified を指定する
- リンクの領域を示すために、
.nav.nav-pills が一緒のほうがいいかも
- ナビゲーションをレスポンシブ対応するにはFlexユーティリティクラスを使い、ブレークポイントを指定する
- ドロップダウンコンポーネントと組わわせることで、ドロップダウンつきナビゲーションがつくれる
- ドロップダウンつきピルナビゲーションも同様につくれる
