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

簡報下載

共筆從這開始

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

框架要解決的問題

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

框架的必要性

• 團隊合作
• 獨立開發
• 視覺/前端/後端整合

框架需要哪些元素

UI 元素

• 排版規則
• 色彩規劃
• 文字規劃
• 特別共用項目
• 特別組件規劃 (手刻組件事先規劃)

功能需求

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

為何選擇 Bootstrap

• Bootstrap 的優點
  • 系統完整度高
  • 學習曲線低
  • 可擴充性高 (利用 sass)
  • 通用性高 (現成的商業樣板多)
  • 相關資源豐富 (線上資源可擴充)
  • 官方文件完整 (只有原始碼的原理不會解說而已) Document
  • 控制簡單方便-全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大大的文章多看一點

tags: MW20 框架與應用 Bootstrap