# bs

熟悉度？
- CSS
- Box Model?
- 權重?
- 怎麼看console?
- flexbox?
- display?
- [css basics](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics)
- BS

## Intro
- introduce with component

## Getting started
- 如何安裝使用
- introduction
- download (or npm?)
- *檔案結構、@import*
- Content
- Javascript 最後說

## Components

- Layout
- [Breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/)
- Mobile first
- class infix (以下為預設值)
- sm (Small devices) phones
- md (Medium devices) tablets
- lg (Large devices) desktops
- xl (X-Large devices)
- xxl (XX-Large devices)
- class 同時寫在一個元素 (element) 上的時候沒有 Class infix 的 class 會在畫面縮到最小時一定會生效
- eg: `class="col-12 col-md-6 col-lg-3"` 手機版 `col-12` 會生效，畫面大於 `md` 會生效 `col-6`，以此類推
- [DEMO: Pricing](https://getbootstrap.com/docs/5.3/examples/pricing/)
- Containers
- `max-width`
- Grid system
- [參考 (Material Design)](https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins)
- `container`>`row`>`col`
- `container` 用來置中跟處理網頁內容與畫面邊界之間的空間 (`padding`)
- `row` 用來包住直欄的 (col)
- `col` 直欄，放內容，外層必須要有 `row`
- 12 欄的格線系統 (DEMO)
- Gutter
- 比較少用，僅用在比較小範圍的客製化
- Utilities for layout
- display
- flexbox
- margin & padding
- Content
- Forms
- Components
- 要點
- base class
- variant ([sample](https://daisyui.com/))
- semantic: primary, secondary, success, danger, warning, info, light, dark
- Buttons
- Navbar
- Modal
- data-bs-toggle
- data-bs-target
- data-bs-dismiss
- Helpers
- Utilities
- Extend
- Icons

## Customize
- Color
- CSS variables

[BS SCSS on Github](https://github.com/twbs/bootstrap/tree/v5.3.1/scss)

## 注意

- scss 相關內容皆可跳過，他不是原生 css，瀏覽器看不懂
- `$`、`@include`
- `@media` 這是 css 原生語法，可以直接用，不要跟上面的搞混
- 建議使用 jquery，上手比較快速簡單