# 2023-3-10 Bootstrap
###### tags: `HTML` `CSS` `Bootstrap`
Bootstrap：前端的Library，有基本的前端能力才可以去客製化修改
## 使用方式
1. 使用CDN連接到雲端Library
2. 下載官方css and js library文件，本地端link
## 使用觀念
- 原始碼有一些是需要自己去修改的地方才能使用，建議建立屬於自己的snippet以增加使用效率
- 使用時可以先去臆測bootstrap的使用邏輯，要修改時多嘗試，不要馬上去翻原始碼
ex:

之前上課的網格系統與Bootstrap相同，還可在.row上面加上class以控制col的間距：gx-0 gy-0 g-0，0~5級
## 共用組件 Utilities
很多bootstrap會共用的性質，並不侷限於單一種component
- 很多CSS控制可簡單透過給予class名稱做設定
- 八大主要色彩：primary, secondary, success, danger, warning, info, light, dark，background, border, text...都可使用
- 遇到尺寸，幾乎都分成0~5的等級
- m, p 等簡短class名稱做排版控制
- bootstrap幾乎都是利用flex做排版的
- 單位是用 1rem = 16px
- 媒體尺寸：sm, md, lg, xl, xxl
- .row-cols有6個尺寸，要再多就自己看原始碼擴充
- row加上gx-? gy-? g-?控制間距
- Display: .d-{breakpoint}-{value}
- container-fluid的fluid拿掉，中間內容寬度會受限
## Component
navbar, breadcrumb, list-group, pagination, accordion, card, form
- card: card-header, card-body, card-footer
- input通常都有form-control的class
- bootstrap form的class版控不一定好，斟酌使用