#18 Bootstrapの各機能まとめ2 [Navbar, Dropdown, Containers]

# #18 Bootstrapの各機能まとめ2 [Navbar, Dropdown, Containers]
Bootstrapを機能毎にまとめて行きます。
今回は第2弾として今回はNavbar, Dropdown, Containersの3つをまとめます。

# 前回まで
前回はBackground、Visually hidden、Form controlsの機能を中心にまとめました。

https://qiita.com/Jackoguro/items/d539196ffe57205d06bb

## 1. Navbar
https://getbootstrap.jp/docs/5.0/components/navbar/

### 1. navbar-expand{-sm|md|-lg|-xl|-xxl}
自動でレスポンシブ対応してくれる。``expand``の後ろに``{-sm|md|-lg|-xl|-xxl}``のどれかを指定することでどの画面幅でnavbarを折りたたむかを指定できる。

例)
```html
<!-- width:992px以下になると折りたたむ -->
<nav class="nav navbar-expand-lg><nav>
```

ブレークポイント早見表

https://getbootstrap.jp/docs/5.0/layout/breakpoints/

### 2. navbar{-light|-dark} bg-{light|･･･}
``background-color``と組み合わせることでnavbarの色を変更することができます。
``navbar{-light|-dark}``で背景色を明度を変更することができます。

例)
```html
<!-- 背景色を暗めの青に変更 -->
<nav class="navbar navbar-dark bg-primary><nav>
```
### 3. navbar-brand
会社、製品、プロジェクト名など入れる

例)
```html
<!-- 会社、製品、プロジェクト名など入れる -->
<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``により表示されます。

:::note warn
``navbar-expand{-sm|md|-lg|-xl|-xxl}``は指定したブレークポイントを超えると画面が折りたたまれるので、常に折りたたまれる場合は追加してはいけない
:::

例)
```html
<!-- 画面が折りたたまれるとハンバーガーメニューのアイコンが表示される -->
<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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/e0d79273-e1f7-6442-f443-55a69210b9c0.png)
<hr>

また、ブランド名(navbar-brand)とトグル(navbar-toggler)の位置によって表示される場所が変わります。
```html
<!--左側にブランド名、右側にトグル(ハンバーガーメニュー)-->
<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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/c6d253d2-25c8-b6d3-d805-e81053c0f1f7.png)
<hr>

```html
<!--右側にブランド名、左側にトグル(ハンバーガーメニュー)-->
<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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/a2ab0f33-31e6-1094-70fc-e815c2742f82.png)

### 5. collapse navbar-collapse
親のブレークポイントによってnavbarのコンテンツをグループ化及び非表示にする。
```html
<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``を指定することで子の要素を横並びで表示できる

例)
```html
<!-- 子要素(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"を追加する必要があるそうです。

https://temari.co.jp/blog/2021/07/12/aria-current-2/

### 6. navbar-nav-scroll
``navbar-nav-scroll``を``navbar-nav(または他のnavbarサブコンポーネント)``に追加して、スクロールできるようになります。
ただし、水平方向のコンテンツが切り取られてしまう可能性があるので、状況に応じてて以下のように``style``を追加する必要があります。
```html
<ul class="navbar-nav navbar-nav-scroll" style="--bs-scroll-height: 100px;">
</ul>
```
### 7. fixed-top, fixed-bottom
```html
<!-- 画面上部に固定 -->
<nav class="navbar fixed-top"></nav>

<!-- 画面下部に固定 -->
<nav class="navbar fixed-bottom"></nav>
```
## 2. Dropdowns
https://getbootstrap.jp/docs/5.0/components/dropdowns/

:::note warn
現在、自分の環境ではDropdownが上手く作動していない状況なので、原因を調査中です。
:::

```html
<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

https://getbootstrap.jp/docs/5.0/layout/containers/

### 1. container-fluid
全てのブレークポイントで``width:100%``となる。
```html
<div class="container-fluid"></div>
```

# 最後に
今回はNavbar, Dropdown, Containersの3つをまとめました。
Dropdownが自分の環境では上手く動かないので現在調査中です。

## 1. Navbar使用上の注意
下記コードのように``navbar``を使用すると非常に便利なのですが、自分で学習している中で``<nav>タグ``内の文字色を変更する際に注意がいることが分かりました。
```html
<nav class="navbar"></nav>
```
<br>
Goole Chromeの検証を用いて``navbar``を確認すると、以下のような内容が設定されていることが分かります。
よって、この部分を自分のcssファイルで上書きすることで変更することができます。

例)
```css
.navbar {
	 --bs-navbar-color: white;
}
```
上記のように書くことで``navbar``内の文字の色を白色に変更することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884987/a6c5855e-92ec-611d-eb2a-d2d09993ede4.png)