官網https://getbootstrap.com/

客製化

修改 variables.scss 檔案

• 更改顏色
  • primary
  • secondary
  • light
  • dark
  • blue(藍), cyan(青藍)
  • green(綠), teal(青綠)
  • purple(紫), indigo(青紫)
  • gray(灰), yellow(黃), orange(橘), red(紅), pink(粉紅)
• 其他選項
  • rounded ⇒ 圓角 false
  • shadows ⇒ 陰影 false
  • spacers ⇒ 空間 8px(1), 16px(2), 24px(3), 32px(4), 40px(5)
  • body ⇒ 整體 body-bg, body-color
  • link ⇒ 底線 none
  • grid-columns ⇒ 分成 24 格

佈局

breakpoint

手機 375 px, 平板 768 px, 桌機 1024 px

• sm ⇒ ≥ 576 px
• md ⇒ ≥ 768 px
• lg ⇒ ≥ 992 px
• xl ⇒ ≥ 1200 px

container

• container ⇒ max-width ⇒ 固定容器
• container-fluid ⇒ width: 100% ⇒ RWD 容器

column

• row ⇒ 行 ⇒ 可以運動 flex 做調整
• col ⇒ 列 ⇒ 單純 col 為自動或是 col-<number> 做格線
• row-cols-<number> ⇒ 可以設定一列幾個

gutter