# 從 Bootstrap 學習網站框架開發 ／ AMOS（李建杭）

{%hackmd @ModernWeb/HkqZxb98v %}

### [簡報下載](https://s.itho.me/modernweb/2020/Slides/d201.pdf)
> 共筆從這開始

大神#AMOS BS框架讚，下載就送 bootstrap 5 不刪檔公測
大神#AMOS 下載首抽送五星 modal 套件

## 框架要解決的問題
開發團隊每個人的風格、習慣都不一樣
接不同的專案可以用相同的方式開發
不會切版的人(後端)用 bootstrap 用起來很輕鬆

## 框架的必要性
* 團隊合作
* 獨立開發
* 視覺/前端/後端整合

## 框架需要哪些元素
### UI 元素
* 排版規則
* 色彩規劃
* 文字規劃
* 特別共用項目
* 特別組件規劃 (手刻組件事先規劃)

### 功能需求
* RWD 支援 (不熟斷言設定的話用框架更簡便)
* 動畫
* 互動功能
* 組件功能
* 互動和組件密不可分，功能可能包含 彈跳視窗 手風琴 提示視窗 收合選單等

### 為何選擇 Bootstrap
* Bootstrap 的優點
* 系統完整度高
* 學習曲線低
* 可擴充性高 (利用 sass)
* 通用性高 (現成的商業樣板多)
* 相關資源豐富 (線上資源可擴充)
* 官方文件完整 (只有原始碼的原理不會解說而已) [Document](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
* 控制簡單方便-全class控制 (Bootstrap 5之後開始)
* RWD 控制簡易且單純
* Bootstrap 的缺點
* 組件架構多樣，記憶困難
* 組件一致性不足 (尤其是表單組件 form-group 格線控制和標籤與其他組件不同)
* 規則多變
* RWD規則待完善
* 自己套用規則去完成他
* 權重設計不佳...important 也太多了
* 大大神#AMOSimportant : 就看他的開發觀念跟方式了，基本上...要進入他的世界才會懂
## Bootstrap的系統規畫
### 系統快速導覽
* RWD基本規則
* 格線系統
* 色彩系統
* 內容視覺系統
* 共用系統
* 組件群

### RWD基本規則-裝置代號
* 無代號 表示全部的size都會套用
* 因為裝置越來越大，所以後面新增了xxl的size

### 格線系統-尺寸標示
* 數值標示
* 0-5
* 0-12
Ex. `m-5`
* 代號標示
* sm(小)
* 不添加(預設)
* Ig(大)
Ex. `shadow-sm`(小陰影)

### 格線系統-分類
* 外層容器`.container`
* 分欄容器`.row`
* 欄容器-固定寬度格線`.col-3`
* 分欄容器-定欄自動格線`.row-cols-sm-3`
* 欄容器-自動分欄格線 `.col`
* 欄容器-手動控制 `.d-flex`
* 欄間距控制 `.g-3`
* 中間的間距要多大
* g-0~g-5

### 格線系統-RWD控制
* 裝置代號的置入`sm/md/lg/xl/xxl`
* col-裝置代號-欄寬
* row-cols-裝置代號-欄數
* d-裝置代號-flex
* 其它flex屬性
* `justify-content`之類的東東

### 格線系統-對齊與分佈
* justify-content-center
* justify-content-装置代號-center
* align-items-center
* align-items-裝置代號-center
* align-content-center
* align-content-裝置代號-center
* .mx-auto

### 格線系統-欄距控制

### 色彩系統
* 色彩系統
* 8大主色規劃
* 獨立組件擴充色彩
* 文字色彩
* 背景色彩
* 表格色彩
* 框線色彩
* 漸層色彩

### 色彩系統-8大主色
* Primary
* Secondary
* Success
* Danger
* Warning
* Info
* Light
* dark

### 色彩系統-獨立組件擴充色
* text的部分
* text-body
* text-muted
* text-white
* text-black-50
* text-white-50
* background color
* bg-white
* bg-transparent
* border-color
* border-white

### 色彩系統-漸層色

### 內容視覺系統-標題
* 內容視覺系統-標題
* HTML標籤等級
* h1~h6
* 標題class等級
* .h1~.h6

### 內容視覺系統-標語
* 廣告標語5等級
* .display-1
* .display-2
* .display-3
* .display-4
* .display-5

### 內容視覺系統-內文處理
* 文字對齊
* .text-位置
* .text-left
* .text-center
* .text-right
* ~~text-justify~~
* 英文不太需要這種東西，所以沒有支援

* 文字對齊RWD
* .text-裝置代號-位置
* .text-sm-left
* .text-sm-center
* .text-sm-right
* ~~text-sm-justify~~

* 粗體
* .text-weight-bold
* .text-weight-bolder
* .text-weight-normal
* text-weight-light
* text-weight-lighter
* 斜體
* .text-italic
* 正常體
* .text-normal

* 行高(line-height)
* .lh-1
* .Ih-sm
* .lh-base
* .lh-lg

* 等寬字
* font-monospace

* 裝飾(text-decoration)
* .text-decoration-underline
* .text-decoration-through
* .text-decoration-none
* .text-decoration-overline

### 共用系統-裝飾用
> 不太會因為RWD而有差別，所以沒有RWD額外設定
* 邊框 & 單邊有框
* .border
* .border-top
* .border-right
* .border-bottom
* .border-left
* 無邊框 & 單邊無框
* .border-0
* .border-top-0
* .border-right-0
* .border-bottom-0
* .border-left-0

* 圓角
* .rounded-0
* .rounded
* .rounded-top
* .rounded-right
* .srounded-bottom
* .rounded-left
* .rounded-circle
* .rounded-pill
* .rounded-sm
* .rounded-Ig

### 共用系統-排版用
> 排版會用到position，沒有因為RWD而改變的設計，請自己設計。
* 定位 position
* .position-static
* .position-relative
* .position-absolute
* .position-fixed
* 文繞圖 float
* .float-none
* .float-left
* .float-right

* 寬 width

* 高 height

* viewport對應

### 組件群-快速一覽
* 互動程式組件
* Navbar
* Dropdown
* Tooltip
* Popover
* Collapse
* Accordion
* Modal
* Tabs
* Alert
* Carousel
* Scrollspy
* Toasts

* 一般組件
* Form-group
* Input-group
* Form-check
* Form-file
* Form-select
* Badge
* Spinners
* Progress
* Tables
* Figures

* 表單組件
* Form-group
* Input-group
* Form-check
* Form-file
* Form-select
* Badge
* Spinners
* Progress
* Tables
* Figures
* Form-group
* Input-group
* List-group

## Live DEMO
* 用快速搜尋找到自己要看的class名稱。
* 官方網站很慢QQ
* 一邊看官方DOC，搭配HTML一起看。
* Amos大大的[文章](https://ithelp.ithome.com.tw/users/20112550/articles)多看一點

###### tags: `MW20` `框架與應用` `Bootstrap`