yachen168/Template-6

Sass & Bootstrap 切版

Template-6

成果 Demo

GitHub page: https://yachen168.github.io/Template-6/

目標

1. 閱讀 W3C 與 MDN 規範，理解 CSS 排版原理。
2. 閱讀 Bootstrap4 官方文件、查找 source code，瞭解網格(Grid)系統、RWD，以及如何運用 Bootstrap4 的 components 與 classes。
3. 使用 npm 管理套件。
4. 使用 Sass。

使用技術

• Sass
• RWD
• npm
• Bootstrap4

學習重點紀錄

• box model
• containing block
• collapsing margins
• display
• line box
• formatting context
  • IFC
  • BFC
  • FFC
• position
• 語意化標籤
• flex
• Bootstrap4
• Sass
  • 檔案拆分
  • 變數
  • mixin 與 extend 差異

設計稿