#18 Bootstrapの各機能まとめ2 [Navbar, Dropdown, Containers]
Bootstrapを機能毎にまとめて行きます。
今回は第2弾として今回はNavbar, Dropdown, Containersの3つをまとめます。
前回まで
前回はBackground、Visually hidden、Form controlsの機能を中心にまとめました。
1. Navbar
1. navbar-expand{-sm|md|-lg|-xl|-xxl}
自動でレスポンシブ対応してくれる。expandの後ろに{-sm|md|-lg|-xl|-xxl}のどれかを指定することでどの画面幅でnavbarを折りたたむかを指定できる。
例)
<!-- width:992px以下になると折りたたむ -->
<nav class="nav navbar-expand-lg><nav>
ブレークポイント早見表
2. navbar{-light|-dark} bg-{light|･･･}
background-colorと組み合わせることでnavbarの色を変更することができます。
navbar{-light|-dark}で背景色を明度を変更することができます。
例)
<!-- 背景色を暗めの青に変更 -->
<nav class="navbar navbar-dark bg-primary><nav>
3. navbar-brand
会社、製品、プロジェクト名など入れる
例)
<!-- 会社、製品、プロジェクト名など入れる -->
<a class="navbar-brand" href="#">KEYENCE</a>
<!-- 画像も配置することができる -->
<a class="navbar-brand" href="#">
<img src="#" alt="ロゴ" width="#" height="#">
</a>
<!-- 画像と文字の両方も配置することができる -->
<a class="navbar-brand" href="#">
<img src="#" alt="ロゴ" width="#" height="#">
KEYENCE
</a>
4. navbar-toggler
1. navbar-expand{-sm|md|-lg|-xl|-xxl}によって設定されたブレークポイントを過ぎて画面が折りたたまれると、隠されていたハンバーガーメニューのアイコンがnavbar-togglerにより表示されます。
navbar-expand{-sm|md|-lg|-xl|-xxl}は指定したブレークポイントを超えると画面が折りたたまれるので、常に折りたたまれる場合は追加してはいけない
例)
<!-- 画面が折りたたまれるとハンバーガーメニューのアイコンが表示される -->
<a class="navbar-brand" href="#">KEYENCE</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
また、ブランド名(navbar-brand)とトグル(navbar-toggler)の位置によって表示される場所が変わります。
<!--左側にブランド名、右側にトグル(ハンバーガーメニュー)-->
<a class="navbar-brand" href="#">KEYENCE</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--右側にブランド名、左側にトグル(ハンバーガーメニュー)-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">KEYENCE</a>
5. collapse navbar-collapse
親のブレークポイントによってnavbarのコンテンツをグループ化及び非表示にする。
<nav class="nav navbar-expand-lg>
<div class="collapse navbar-collapse>Hello World</div>
<nav>
上記のようにnavbar-expand-lgと指定してあれば、画面幅が992より大きい場合、Hello Worldは表示され、画面幅が992以下の場合、Hello Worldは表示されない。
6. navbar-nav
親にnavbar-navを指定することで子の要素を横並びで表示できる
例)
<!-- 子要素(li)を横並びにする -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#>Home</a>
</li>
<li class="nav-item">bbb</li>
<li class="nav-item">ccc</li>
</ul>
nav-linkを記述することでカーソルを上に載せた際に文字色が変化します。
nav-link activeを記述することでアクティブな状態であることを示します。
また、nav-link disableと記述することで使用不可にします。
現在開かれているページがHomeである場合、aria-current="page"を追加する必要があるそうです。
6. navbar-nav-scroll
navbar-nav-scrollをnavbar-nav(または他のnavbarサブコンポーネント)に追加して、スクロールできるようになります。
ただし、水平方向のコンテンツが切り取られてしまう可能性があるので、状況に応じてて以下のようにstyleを追加する必要があります。
<ul class="navbar-nav navbar-nav-scroll" style="--bs-scroll-height: 100px;">
</ul>
7. fixed-top, fixed-bottom
<!-- 画面上部に固定 -->
<nav class="navbar fixed-top"></nav>
<!-- 画面下部に固定 -->
<nav class="navbar fixed-bottom"></nav>
2. Dropdowns
現在、自分の環境ではDropdownが上手く作動していない状況なので、原因を調査中です。
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a href="#">aaa</a></li>
<li><a href="#">bbb</a></li>
<li><a href="#">ccc</a></li>
</ul>
</div>
3. Containers
1. container-fluid
全てのブレークポイントでwidth:100%となる。
<div class="container-fluid"></div>
最後に
今回はNavbar, Dropdown, Containersの3つをまとめました。
Dropdownが自分の環境では上手く動かないので現在調査中です。
1. Navbar使用上の注意
下記コードのようにnavbarを使用すると非常に便利なのですが、自分で学習している中で<nav>タグ内の文字色を変更する際に注意がいることが分かりました。
<nav class="navbar"></nav>
Goole Chromeの検証を用いて``navbar``を確認すると、以下のような内容が設定されていることが分かります。 よって、この部分を自分のcssファイルで上書きすることで変更することができます。
例)
.navbar {
--bs-navbar-color: white;
}
上記のように書くことでnavbar内の文字の色を白色に変更することができます。
