# Bootstrap 5
###### tags: `html` `css` `bootstrap`

> BS5 希望更語意化，增加更多彈性

[下載範例元件檔案（官網）](https://getbootstrap.com/docs/5.1/examples/)

## BS5 不用引入 jQuery
<不過 jquery 還是有機會使用，可以先隱藏>

## 表單

以2022 數位政府高峰會報名頁為例。

1. 裡面包 input 的外層 form-group 改成--> input-group mb-3
2. control-label ---> form-label
3. <select class="form-control"> 改成--> form-select
4. 不要用 .form-check-input （BS4 有，但 BS5 外層不是 flex），可以刪掉
5. BS5 沒有 .btn-block，改成外層加 .col-sm-9 .d-grid，或是按鈕加 .d-block .w-100
範例一：外層加 .col-sm-9 .d-grid

<div class="col-sm-9 d-grid gap-2">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
</div>

或範例二：按鈕加 .d-block .w-100

<div class="col-sm-9">
    <button class="btn btn-primary d-block w-100" type="button">Button</button>
    <button class="btn btn-primary d-block w-100" type="button">Button</button>
</div>

## 版面
### container
- 新增尺寸：
.container-xxl
- BS4 以前最寬只有設定到 1200px {max-width: 1140px;}
BS5 支援到 1400px 裝置寬度，如下：

@media (min-width: 1400px)
.container {
    max-width: 1320px;
}

### row + g-* (上下左右的gutters)、gx-*(左右的gutters)、gy-*(上下的gutters)
- 是用變數控制，如下：

.g-5, .gx-5 {
    --bs-gutter-x: 3rem;
}
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y)); // -0rem
    margin-right: calc(-.5 * var(--bs-gutter-x)); // -1.5rem
    margin-left: calc(-.5 * var(--bs-gutter-x)); // -1.5rem
}
.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5); // 1.5rem
    padding-left: calc(var(--bs-gutter-x) * .5);  // 1.5rem
    margin-top: var(--bs-gutter-y);  //預設是 0
}

## Typography
- display-*，1~6， // 比 h1 ~ h6 更大更細的字，目前只想到用在首頁
- fs-1~6 // font-size 快速指定使用

## ICON
- 方法一：直接複製 svg 最快速
- 方法二：引入後，Icon font 更好 css 客製化
- 其他：[各種使用方式](https://icons.getbootstrap.com/#usage)

## Modal
- 燈箱加上 .modal-dialog-centered 可以置中
- 燈箱加上 .modal-dialog-scrollable 如果內文太長可以 scroll
- 範例，以上可同時用：

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

## Dropdown
- 跟BS4一樣，需要 Popper.js，記得 include popper.min.js 或是使用已經包含的 bootstrap.bundle.js
- BS5 data-toggle 這類屬性多加入'bs'避免和其他套件撞名,如：data-bs-toggle=""
- 新增如果不要有連結、hover樣式，加上.dropdown-item-text

## 好用 class Utilities

.mw-100 max-width: 100%
.text-bg-dark  //黑底白字
.text-bg-light  //白底黑字
.text-reset  //在a tag 字顏色不會變成連結色
.text-wrap  // white-space: normal!important; 可用在 tag外層，英文斷行
.float-*  // end -> float: right，start -> float: left

## Masonry 瀑布流 cards
<還沒試過>
- 需要額外引入

- adding data-masonry='{"percentPosition": true }' to the .row
    
    
    
## 新增 Offcanvas
左右側開燈箱
    
## 新增 Placeholders
還不會用也還沒用到
    
    
## BS5 大方向
- 元件 RWD，手機優先
- 元件 class 先有基本 class 打底，再加入修飾 Class
- 元件 states should obey a common z-index scale（!這我還不能理解）
- 盡可能 使用 css 執行，再考慮使用 js
- 盡可能使用工具class 而不是客製化 class
- 盡可能避免蓋不掉的 css 選擇器