---
# System prepended metadata

title: HTML(10/10) Day 22 五倍紅寶石(第八屆共筆)(2021/7/27)
tags: [CSS, HTML]

---

# 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

  ![](https://i.imgur.com/jyf1w7i.png)
  - Overview:label 的 class = form-label、label 的 input = form-control，appearance:none 可以把輸入位置的外框拿掉。
  ![](https://i.imgur.com/v1Ksuje.png)
  - Select:下拉選單。
  - Checks and radios:勾選 & 單一選單。
  - Range:左右可拉式選單。
  - Floating labels:炫炮表單。

---

- Components
  - Accordion:手風琴，= Collapse 2.0，target 對應 id，parent 對應 id，若有多個Accordion，記得要改 parent 的 id 名，不然可能會控制錯誤。
  ![](https://i.imgur.com/0yxJ3tO.png)

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

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