(3) Bootstrap 5 筆記
以Bootstrap來說這麼大的框架原始檔案會是由許多小元件組成。
但是這個別的檔案並無法被瀏覽器所解析,透過Sass編譯器能夠將這些小元件組成完整的CSS,並且能夠在瀏覽器運行。
比較常用到的 bootstrap 有表格、表單、api 和 helpers。
如何使用 Sass 操作 Bootstrap
- 將 node_moduels 裡面的 _variable.scss 複製
- 放到 stylesheets 資料夾中,新增一個資料夾叫做 helpers
- 修改 _variable.scss 裡的變數就可以使用
all.scss 檔案裡,可以參照官方文件。也可以針對只想載入的部分進行載入。
1 |
|
當需要特別調整某些元件的使用方法時,需要查詢官方文件。
如何產生獨立的元件
在 stylesheet 下新增 components,這裡的元件是可以重複利用的,以按鈕來說 裡面可以寫
1 |
|
就不需要到原始碼裡面改內容。
scss 需要注意的事情
- 不要過多層級(巢狀)
- 盡可能使用變數
(3) Bootstrap 5 筆記
https://phoebeho.com/Bootstrap/20220405/874685226/