# bootstrap5 快速查詢
{%hackmd BJrTq20hE %}
## CDN： [bootstrap5](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
CSS：
```htmlembedded
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
```
JS：
```javascript=
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
```
## 六角Gulp設定：
```htmlembedded
// bootstrap
@import "../../../node_modules/bootstrap/scss/functions";
@import "./helpers/variables";
@import "./helpers/utilities";
@import "../../../node_modules/bootstrap/scss/bootstrap";
```
只顯示外框：btn-outline-primary
大小： btn-sm、 btn-lg
- 格線系統：由column(欄)、gutter(間距)組成
- 排版三劍客： .container、.row、.col 1~12
- .container
- .container 固定寬度
- .container-fluid 滿版
- .row
 g-0：不需要 gutters
 g-1 ~ g-5：上下左右留白
 gx-?、gy-?：X軸或Y軸留白
- 名言 1：.col- 的外層只能是 .row
 offset- 偏移column [https://bootstrap5.hexschool.com/docs/5.0/layout/columns/#offsetting-columns](https://bootstrap5.hexschool.com/docs/5.0/layout/columns/#offsetting-columns)
- 名言 2：.row 裡面只能是 .col-
- 名言 3：網頁內容與元件請放在 .col- 裡面
常見錯誤，在 .col 增加寬度
常見錯誤，在格線系統調整左右 margin 與 padding
常見觀念：可以加上下 的 margin 與 padding
常見觀念：最外層至少補一個 container(因為通常會居中)
常見觀念：整體格線邏輯是一致
</br>
## BS的自訂斷點：
[https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/#min-width](https://bootstrap5.hexschool.com/docs/5.0/layout/breakpoints/#min-width)
- 最小寬度：`@include media-breakpoint-up(md) { ... }` //md(tablets, 768px and up) 以上(如BS預設)
- 最大寬度：`@include media-breakpoint-down(md) { ... }`
- 特定的斷點：`@include media-breakpoint-only(md) { ... }`
@media (min-width: 768px) and (max-width: 991.98px) { ... }
- 範圍斷點：`@include media-breakpoint-between(md, xl) { ... }`
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
## 圖片：
- `.img-fluid`：響應式圖片
- `.img-thumbnail`：讓圖片呈現圓角 1px 的邊框。
- `<figure>`：圖片加標題(放在圖片下方) [https://bootstrap5.hexschool.com/docs/5.0/content/figures/](https://bootstrap5.hexschool.com/docs/5.0/content/figures/)
```htmlembedded=
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
```
## Helpers ( 工具 )
- 連結顏色：
`.link-primary`
- 比例( Ratios )：嵌入式長寬比，用ratio包裹圖片或影片
`ratio` ratio-16x9 ( 有1x1、4x3、16x9、21x9 )
- 版面位置：
.fixed-top：固定頂端
.fixed-bottom
`.sticky-top`：黏住頂端
  sticky-sm-top
  sticky-md-top
  sticky-lg-top
  sticky-xl-top
- 垂直、水平堆疊：( BS v5.1.0 )
```javascript=
//vstack、hstack
<div class="vstack gap-3"> //垂直堆疊
<div class="hstack gap-3"> //水平堆疊
<div class="bg-light border">First item</div>
<div class="bg-light border">Second item</div>
<div class="bg-light border">Third item</div>
</div>
```
- Card：連結延伸 (Stretched link)：透過 CSS 將連結 “延伸”，令任何 HTML 元素或 Bootstrap 元件變得可點擊。
```javascript=
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">帶有延伸連結的卡片</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
//stretched-link
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
```
- 垂直分隔線：`<hr>` tag的兄弟
```javascript=
<div class="hstack gap-3">
<div class="bg-light border">First item</div>
<div class="bg-light border ms-auto">Second item</div>
//vr垂直分隔線
<div class="vr"></div>
<div class="bg-light border">Third item</div>
</div>
```
## Utilities ( 通用類別 )
- 背景顏色：
`bg-primary`
- 邊框：
- 增加邊框
```javascript=
//border
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
```
* 減少邊框
```javascript=
//border-0
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-end-0"></span>
<span class="border-bottom-0"></span>
<span class="border-start-0"></span>
```
- 邊框顏色：
```javascript=
<span class="border border-primary"></span>
```
* 邊框寬度：有1~5
```javascript=
<span class="border border-1"></span>
```
- 園角：
```javascript=
//rounded
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="..."> //右
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="..."> //左
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
```
- 園角尺寸半徑：0~3
```javascript=
<img src="..." class="rounded-0" alt="...">
//半徑如下：
$border-radius: 0.25rem !default;//rounded-1
$border-radius-sm: 0.2rem !default;//rounded-2
$border-radius-lg: 0.3rem !default;//rounded-3
$border-radius-pill: 50rem !default;
```
- Display：
`.d-{value} for xs`
`.d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.`
//value 為以下其中一個：
- none
- inline
- inline-block
- block
- grid
- table
- table-cell
- table-row
- flex
- inline-flex
```javascript=
//沒有!important的inline
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
```
- 浮動 ( Float )：
```javascript=
<div class="float-start">Float start on all viewport sizes</div><br>//左
<div class="float-end">Float end on all viewport sizes</div><br>//右
<div class="float-none">Don't float on all viewport sizes</div>//清除浮動
```
- 溢出 (Overflow)：
```javascript=
//overflow-auto
<div class="overflow-auto">...</div>//常用
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>
```
- 位置 (Position)：
```javascript=
//position-relative
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
//自訂responsive： position-lg-relative
```
- 排列元素：
- top - 用於垂直定位 top
- start - 用於水平定位 left (LTR)
- bottom - 用於垂直定位 bottom
- end - 用於水平定位 right (LTR)
其中，position 為以下的其中一種:
- 0 - 用於 0 的邊界定位
- 50 - 用於 50% 的邊界定位
- 100 - 用於 100% 的邊界定位
```javascript=
<div class="position-absolute top-50 start-50"></div>//元素中心點為右下角
<div class="position-absolute bottom-50 end-50"></div>//元素中心點為左上角
```
- 元素置中：以元素的重心為中間點
此類別將 transform 之 translateX(-50%) 與 translateY(-50%) 應用於元素，並結合使用邊界定位通用類別，讓你可以把元素完全置中。
```javascript=
<div class="position-absolute top-50 start-50 translate-middle"></div>//在外框的正中心
<div class="position-absolute top-0 start-50 translate-middle-x"></div>//只針對X軸的中心點
<div class="position-absolute top-50 start-0 translate-middle-y"></div>
//自訂responsive：translate-middle-lg
```
- 透明度：
```javascript=
//opacity-
<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>
```
- 陰影 (Shadows)：
```javascript=
//shadow
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
```
- 尺寸 (Sizing)：
- 預設包含 `25%, 50%, 75%, 100% 和 auto`
```javascript=
//w-25、h-25
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
```
- 您還可以根據需求使用 max-width: 100%; 和 max-height: 100%; 通用類別。
```javascript=
//mw-100、mh-100
<img src="..." class="mw-100" alt="..."> //max-width
<img src="..." class="mh-100" alt="..."> //max-height
```
- 相對於視窗(min)
```javascript=
//min-vw-100
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>
```
- 間隔 (Spacing)：
如果是適用於所有從 xs 到 xxl 斷點的間隔通用類別，就不需加入中斷點縮寫。因為從 min-width: 0 以上開始都將應用這些類別，因此不受 media query 的約束。但若是針對其餘斷點，就需要包含中斷點縮寫。
對於 xs 使用固定格式 {property}{sides}-{size} 命名，對於 sm、md、lg、xl 和 xxl，使用格式 {property}{sides}-{breakpoint}-{size} 命名。
*property* 設定:
- `m` - 設定 margin 的類別
- `p` - 設定 padding 的類別
*sides* 設定:
- `t` - 設定 margin-top 或是 padding-top 的類別
- `b` - 設定 margin-bottom 或是 padding-bottom 的類別
- `s` - (start) 在 LTR 設定 margin-left 或是 padding-left， RTL 設定 margin-right 或是 padding-right
- `e` - (end) 在 LTR 設定 margin-right or padding-right， RTL 設定 margin-left 或是 padding-left
- `x` - 同時設定 *-left 和 *-right
- `y` - 時設定 *-top 和 *-bottom
- `blank(空白)` - 同時設定 margin 或 padding 在元素的四個邊緣
*size* 設定:
- `0` - 設定 margin 或是 padding 為 0
- `1` - (預設) 設定 margin 或是 padding 為 $spacer * .25 //4
- `2` - (預設) 設定 margin 或是 padding 為 $spacer * .5 //8
- `3` - (預設) 設定 margin 或是 padding 為 $spacer = 1 rem //16
- `4` - (預設) 設定 margin 或是 padding 為 $spacer * 1.5 //24
- `5` - (預設) 設定 margin 或是 padding 為 $spacer * 3 //48
- `auto` - 設定 margin 為 auto
margin可以設為負值： [https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding](https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding)
自訂：
```sass
$spacers: (
0: 0,
1: $spacer * 0.25, //4
2: $spacer * 0.5, //8
25: $spacer * 0.75, //12
3: $spacer, //16
35: $spacer * 1.25, //20
4: $spacer * 1.5, //24
5: $spacer * 2, //32
6: $spacer * 2.5, //40
7: $spacer * 3, //48
l60: $spacer * 3.75, //60
l64: $spacer * 4, //64
) !default;
```
```javascript=
//複製貼上用
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
25: $spacer * 0.75,
3: $spacer,
35: $spacer * 1.25,
4: $spacer * 1.5,
5: $spacer * 2,
6: $spacer * 2.5,
7: $spacer * 3,
l60: $spacer * 3.75,
l64: $spacer * 4,
```
- 文字大小：對應.h1–.h6，有1~6(大~小)
```javascript=
<p class="fs-1">.fs-1 text</p> //2.5rem(40px)
<p class="fs-2">.fs-2 text</p> //2rem(32px)
<p class="fs-3">.fs-3 text</p> //1.75rem
<p class="fs-4">.fs-4 text</p> //1.5rem
<p class="fs-5">.fs-5 text</p> //1.25rem
<p class="fs-6">.fs-6 text</p> //1rem
```
```sa
六角的倍數：
$h1-font-size: $font-size-base * 4; //64px
$h2-font-size: $font-size-base * 3; //48px
$h3-font-size: $font-size-base * 1.75; //28px
$h4-font-size: $font-size-base * 1.5; //24px
$h5-font-size: $font-size-base * 1.25; //20px
$h6-font-size: $font-size-base; //16px
$h7-font-size: $font-size-base * 0.875 ;//14px，同<small>
$h8-font-size: $font-size-base * 0.75 ;//12px
6: $h6-font-size,
7: $h7-font-size,
8: $h8-font-size,
$display-font-sizes: (
1: 5rem, //80
2: 4.5rem, //72
3: 4rem, //64
4: 3.5rem, //56
5: 3rem, //48
6: 2.5rem, //40
) !default;
```
- 文字截斷(Text truncation)：.text-`truncate`：以透過刪節號截斷文字。需為 display: inline-block 或是 display: block。父層須限制寬度
- 文字顏色：
```javascript=
//text-primary
<p class="text-primary">.text-primary</p>
```
- 文字對齊：
```javascript=
//text-start
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
(text-md-start)
```
- 換行：使用 .text-nowrap 強制文字不換行。
```javascript=
//text-wrap、text-nowrap
<div class="badge bg-primary text-wrap" style="width: 6rem;">
<div class=" bd-highlight text-nowrap" style="width: 8rem;">
```
- 大小寫變換：
```javascript=
//text-uppercase
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p> //只有將第一個字母轉為大寫，而其他字母不受影響。
```
- 標題字：當你需要突出一個標題時，請考慮使用 display heading 以獲得更大、更細、稍具有風格化的標題樣式。有1~6(大~小)
```javascript=
//display-1
<h1 class="display-1">Display 1</h1>
```
- 行內 HTML5 元素的格式：
您可以使用==mark==標籤 強調 文本。 `<mark>`
~~這行文本將被視為已刪除的文本。~~ `<del>`
這行文本旨在被視為不再準確。 `<s>`
這行文本旨在被視為對文檔的補充。 `<ins>`
++這行文本將呈現為帶下劃線。++ `<u>`
<span style="font-size:14px">這行文本應被視為精美的印刷品。</span> `<small>`
**此行呈現為粗體文本。** `**<strong>**`( ctrl + b )
*此行呈現為斜體文本。* `*<em>*`( ctrl + i )
請注意，這些標籤目的目的：
- `<mark>` 代表被標記的重點是文本，以供參考或標記。
- `<small>` 代表旁注和小字體，例如版權聲明和版權文字。
- `<s>` 不再代表相關或不再準確的元素。
- `<u>` 代表一定範圍的行內文字，應表現出其具有非文本文字的方式。
如果你只是想在文本上加入樣式，你應該改用以下幾類：
- .mark與`<mark>`風格一致。
- .small與`<small>`風格一致。
- .text-decoration-underline與`<u>`風格一致。
- .text-decoration-line-through與`<s>`風格一致。
- 粗細和斜體：font-weight 或 font-style。font-style 通用類別的縮寫為 .fst-*， font-weight 通用類別的縮寫為 .fw-*。
```javascript=
//font-weight
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
//font-style
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
```
- 行高(line height)：
```javascript=
<p class="lh-1">This is a long paragraph written to show how the line-heigh</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height</p>
<p class="lh-base">This is a long paragraph written to show how the line-height</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height</p>
```
- 重置色彩：使用 .text-reset 來重置一個文字或連結色彩，以便它們繼承父層的顏色。
```javascript=
//text-muted
<p class="text-muted"> //柔和的文字
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
```
- 文字裝飾：
```javascript=
//text-decoration-none
<p class="text-decoration-underline">This text has a line underneath it.</p> //底線
<p class="text-decoration-line-through">This text has a line going through it.</p> //刪除線
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
```
- 文字排版：
- 無樣式：ul>li
```javascript=
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>This may still come in handy in some situations.</li>
</ul>
```
- 改為inline( 橫向排列 )：
```javascript=
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
```
- 表格：
```javascript=
<table class="table table-dark table-striped table-hover"> //表格顏色、條紋間距、hover變色
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
</tr>
</thead>
<tbody>
<tr class="table-active"> //用於凸顯整行
<th scope="row" class="table-active">1</th> //或是凸顯一格
<td>Mark</td>
</tr>
</tbody>
</table>
<table class="table table-bordered border-primary table-borderless"> //邊框、藍色邊框、無邊框
<div class="table-responsive"> //響應式表格( 要包在外面 )
<table class="table">
...
</table>
</div>
<table class="table align-middle"> //垂直置中
<thead>
<tr>
...
</tr>
</thead>
```
- 表單：
- 一般表單：
```javascript=
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input example</label> //mb-1
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
```
- 融合標籤與input的一體成形表單：
```javascript=
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
```
- 可輸入的下拉式選單：
```javascript=
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
</datalist>
```
- 下拉式選單：
```javascript=
<select class="form-select" aria-label="Default select example">
//<select class="form-select-lg" aria-label="Default select example">
//<select class="form-select-sm" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
</select>
```
- 非表單的下拉選單( 要BS的JS )：
```javascript=
<div class="input-group mb-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li> //分隔線
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
```
- 勾選或單選：
```javascript=
<div class="form-check form-switch form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
//使用 .form-switch 類別來呈現切換開關。
//透過把 .form-check-inline 加到任何 .form-check 來將核取方塊或選項按鈕組合放到同一水平行上。
```
- 調整bar：
```javascript=
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
```
- 把多個input整合成一行：
```javascript=
<div class="input-group mb-3">
//<div class="input-group input-group-sm mb-3">
//<div class="input-group input-group-lg mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
```
- 表單驗證：
```javascript=
<form class="was-validated">
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</form>
// .is-invalid 和 .is-valid 可以代表驗證成功或失敗
```
- 垂直對齊 (Vertical alignment)：(inline限定)
使用 vertical-alignment 通用類別改變元素的對齊。請注意，垂直對齊僅影響 inline、inline-block、inline-table、和 table 元素。
<u>若需要讓非行內元素的內容垂直置中（如 `<div>` 等等），請使用我們的 flex box 通用類別。</u>
```javascript=
//align-middle
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
```
- 可視性 (Visibility)：使用 visibility: hidden
```javascript=
<div class="visible">...</div>
<div class="invisible">...</div> //隱藏
<div class="md-invisible">...</div> //要去utlities加responsive
```
- `display: none` vs `visibillity: hidden`差別：
none：使用none的時候，該元素會被移除而導致畫面跳一下
hidden：該元素佔用空間持續存在，隱藏時不會跳一下
## components(元件)
- 麵包屑：
```javascript=
//breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
```
- 自訂屬性： [https://bootstrap5.hexschool.com/docs/5.0/utilities/api/#states](https://bootstrap5.hexschool.com/docs/5.0/utilities/api/#states)
如透明度：貼在_utilities.scss
```sass
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
```
- 徽章badge( 小圓點標籤 )：[https://getbootstrap.com/docs/5.0/components/badge/](https://getbootstrap.com/docs/5.0/components/badge/)
- modal關閉按鈕顏色： class="`btn-close` `btn-close-white`" //X按鈕有分為黑色、白色
- 進度線( progress )：
Sign in with Wallet
Connect another wallet