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ユーティリティクラスを使い、ブレークポイントを指定する
- ドロップダウンコンポーネントと組わわせることで、ドロップダウンつきナビゲーションがつくれる
- ドロップダウンつきピルナビゲーションも同様につくれる
