# HTML(10/10) Day 22 五倍紅寶石(第八屆共筆)(2021/7/27)
## 框架(Framework)：
別人寫好的功能跟零件，可以輕鬆把架構建出來，自己再客製化細節部分。
建議 Bootstrap、Tailwind 都學一下，結業專案使用自己覺得好用的就好了。

### BootStrap：
主要的運用如下：
1. 格線系統：container、row、col、@media...的運用都跟HTML(8/10)的一樣。
2. Flex 原理：99% 橫向排列都是用 flex 做的。
3. 組件的使用與修改。
4. 共用 class 的運用。
5. 大部分功能都是分成六個層級(0~5)。
6. 色彩有八大色彩。

先複製 Starter template 到編輯器，就可以開始使用 Bootstrap 框架。

---

### 常用功能：
- Layout
- Breakpoints:各裝置大小，xs ≥ 0px、sm ≥ 576px、md ≥ 768px、lg ≥ 992px、xl ≥ 1200px、xl ≥ 1400px。
- Containers:無斷式推薦用 container-xl 以上的，container-fluid 全 100%。
- Grid:網格，grid 或 gutters **可拿來做信用卡欄位**。
- Gutters:水溝，欄與欄之間的間距，g-0~5。

---

- Forms三大類型，建議可用成 snippet

- Overview:label 的 class = form-label、label 的 input = form-control，appearance:none 可以把輸入位置的外框拿掉。
- Select:下拉選單。
- Checks and radios:勾選 & 單一選單。
- Range:左右可拉式選單。
- Floating labels:炫炮表單。

---

- Components
- Accordion:手風琴，= Collapse 2.0，target 對應 id，parent 對應 id，若有多個Accordion，記得要改 parent 的 id 名，不然可能會控制錯誤。

- Breadcrumb:麵包屑，目前所在位置。
- Buttons:按鈕(分開)。
- Button group:按鈕(連在一起)。
- Card:上圖下文，像遊戲王卡一樣。
- Image overlays:文字蓋在圖片上。
- Collapse:摺疊選單，可開關，href、target 對應 id，toggle 對應 class。

- List group:清單，直排的有可能也是使用到 flex。
- Modal:互動視窗，類似彈出一個蓋板廣告。
- Navbar:導覽列，裡面是用 flex 橫向排列的。
- Pagination:分頁導覽。
記得拿掉 style="width: 18rem;"。

---

- Utilities
- Colors:
可對文字、背景、邊框、表格設定。
- 8大色彩 + 透明度。
- Dispaly:
d-
- Flex:
- Grow and shrink、Wrap為特例，跟其他的寫法(屬性-裝置-值)不太一樣。
- Spacing:
- padding:ps、pe(start、end)、px、py-0~5。
- margin:同上-0~5、auto。
- Text:
- Text alignment:文字對齊，text-start~end。
- text-wrap:固定寬度換行。
- word-break:英文字連在一起時會幫你換行，不會跑版。
- Font size:fs-1~6。

---

###### tags: `HTML` `CSS`