---
tags: Bootstrap5 實戰營
---

# Bootstrap5 實戰營第四週筆記

## 下載 Bootstrap5

新手與未接觸過 npm 者請參照以下方式下載直接使用：
1. 進入官網
2. 進入 文件 - 快速開始 - 下載
3. 找到原始檔案 點擊下載原始碼

後期技術熟練並使用過 npm 者則可用 npm 安裝 Bootstrap ：
1. 建立資料夾
2. 開啟終端機 進入剛才建立的資料夾
3. 在終端機中輸入 npm i bootstrap@next

## 介紹流程
1. 首先會開一個資料夾
2. 裡面建立一個 scss 資料夾
3. 在 scss 資料夾裡面新增三隻 scss 檔案
4. 下載 BS 原始碼 把 BS 色系改掉(等等下方範例都只改變數(_variable.scss)那支檔案)

## 編譯

由於瀏覽器不認識 scss 所以需要將 scss 編譯後瀏覽器才懂

編譯方式有兩種
一個是使用 VS Code 編輯器中的 [Live Sass CompilerPreview 套件](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)
一個是下載 [Prepros 軟體](https://prepros.io/)
這部分可以參考第三週主線講義中最下方的 [SCSS 教學](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ryar-vGOd/%2FcwKx6XSMSgGElDL6AFCoNA#SCSS-%E6%95%99%E5%AD%B815-%E5%B0%8F%E6%99%82)

另外在此順便建議想更了解 SCSS 的同學觀看 50 小時課程中 [SCSS 的部分](https://courses.hexschool.com/courses/20201112/lectures/32535800)
該 50 小時影音課程只開放觀看到六月底，請把握哩！

## 根據第四週主線講義那張圖片來跑流程

首先新增資料夾在桌面 這邊取啥都可以你自己記得就好
然後用 VS Code 編輯器打開這個資料夾
在裡面新增一個 index.html 檔案
再開一個 SCSS 資料夾 裡面新增 all.scss 檔案

我們先在 all.scss 寫東西 點 watching 測試編譯

成功後繼續往下

這邊在 SCSS 資料夾中建立 _index.scss 跟 _faq.scss 檔案

我們在 _index.scss 跟 _faq.scss 裡面分別隨意加上樣式如下：

// index.scss
.index { 
  color: red; 
} 
// faq.scss
.faq { 
  color: red; 
} 

待會測試時需要使用

接下來開啟 all.scss
使用 @import 方式引入剛才的 index.scss 與 faq.scss 如下：

@import "./index";
@import "./faq";

這邊注意：
@import 會自動找 _ 開頭的 scss
加上下底線表示這隻檔案不需要被編譯 是要拿來引入用的

## 修改 Bootstrap 原始碼

首先打開下載的 Bootstrap5 原始檔

原始檔的部分我們只需要修改 SCSS 資料夾 其他不管他
這邊我們先把 Bootstrap 的 SCSS 資料夾單獨拉出來放到你剛才建立的資料夾中(這邊將 Bootstrap 的 SCSS 資料夾改名為 bootstrap)

然後在 all.scss 裡面引入 bootstrap/bootstrap.scss

all.scss 現在內容如下：

@import "bootstrap/bootstrap.scss";
@import "./index";
@import "./faq";

以上到這邊正式將 bootstrap 載入完成 可以點擊 watching 測試看看是否編譯成功

## 修改 Bootstrap 變數檔案

我們先在 index.html 中引入 scss/all.scss 編譯後的 all.css 檔案

然後找到 bootstrap/_variable.scss 檔案 打開它

這邊先說一下 通常收到設計稿時會先找主色 再來找輔助色(第二多出現的顏色) 找到後就可以修改 bootstrap/_variable.scss

bootstrap/_variable.scss 的從上到下的排序是這樣的：

1. 色系(primary、secondary、danger、info...)
2. 預設樣式(enable-xxx 用來設定一些預設樣式是否啟用 如圓弧、陰影等)
3. 間隔(用來設定 padding margin 等跟間距有關的東西)
4. body(如 body-bg body-color)
5. 連結(可以想像成 a 標籤的預設樣式)
6. 斷點(sm、md、lg、xl...)

### !default

先說一下 !default 為預設值的意思 當你沒有設定該變數的值時 默認會使用加上 !default 的那個預設值 可以當作加上 !default 的權重比沒有加的低
舉例如下：

$primary: #000;
$primary: #fff !default;
// 這情況下最後 $primary 的值會是 #000

### $theme-colors

要改色系時 改的是 `$theme-colors: (...)`這個地方
可以將原本設定的值直接刪除並改成你要的值
如你要白色為主色 原本是 `$primary: #000;` 就把 `#000` 刪掉 改填上 `#fff` 即可(設完後所有在 bootstrap 原始檔中有使用到該 `$primary` 的地方就會全部變成白色)

除了修改也可以在 `$theme-colors` 裡面新增顏色
新增後可以自動建立各種其他元件的主題色系
如你想新增一個粉色 就直接在 `$theme-colors: (...)` 中添加 `$pink: pink,` 即可

### Options

這裡是改預設樣式的區塊
你會看到一串都是 enable-XXX 的東西
用來做統一管理的 關掉值為 false 打開值為 true
裡面有圓角、陰影、樣式的動畫效果等等可以選擇是否要開啟
設置後所有的 bootstrap 會同時受到影響
比如在這邊設置：

// 本來是 $enable-rounded: true !default; 改成如下
$enable-rounded: false;

編譯後會發現所有本來有圓角效果的東西全部都沒有圓角了

## Spacing

修改間距
首先會看到 `$spacer: 1rem !default;`
這個默認的 `1rem = 16px`
如果不喜歡 16px 也可以改成你想要的 然後下去計算 用什麼單位都可以
修改這邊後 所有的 padding margin 就都會吃到
另外這邊也可在：

$spacers: (
  0: 0,
  1: $spacer / 4,
  2: $spacer / 2,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
) !default;

修改與添加 比如第一個的 /4 不夠小 可以改成 /5
另外可以新增 6: $spacer * 5 就可以使用 padding-5 margin-5 等樣式了(斷點也有 即 padding-md-5 這樣)

### body 部分

可以改 body-color 看大多數使用的文字顏色是啥就設啥
也可以改 body-bg 如果你的網站預設有背景色的話

### link

連結部分可設定預設連結色、連結是否需要下底線 連結默認 hover 的顏色下底線等等

## 簡單帶過關於按鈕的部分

首先 bootstrap 的按鈕文字顏色 默認會根據背景的偏亮或偏暗設置為黑或白 但你可以通過給按鈕添加 text-xxx 的 class 蓋掉文字顏色

另外 設計稿按鈕 hover 的效果要修改原始碼的話比較麻煩 所以這邊建議直接新增樣式添加在按鈕身上
比如新增一個 bg-hover-danger 的 class 來使用(愛心通常是 i 標籤所以可以在裡面寫 `& > i{ color:$danger; }` 實現)

## 一些 Q&A

Q: 只有一點點地方要用到 我不想改 bootstrap 原始碼但想加顏色怎麼弄
A: 可以自己命名宣告一個class 但名稱建議通用性高一點 比如直接設顏色的名稱 如下：

.darkGray{
 color: darkgray;
}

Q: 為什麼檔名要下底線？
A: 告訴 SCSS 不用單獨編譯這個檔案

Q: 不管幾個頁面都是共用同一支CSS嗎？
A: 對 把所有檔案 @import 合併後，直接引入 all.scss 這樣的好處是請求速度會比較快，因為請求少

Q: scss 編譯 css 速度很慢，導致常常當機 請問這有解決方法？
A: 買 Mac M1(開玩笑的) SCSS 編譯本來就慢 無解 除非用 Ruby 或 Node.js 寫 編譯就會比較快 另外也可以研究 Gulp 寫法 或者可以改用 Prepros 軟體來編譯

Q: 為什麼要分這麼多個有底線的 SCSS ，不一開始就寫在同一個?
A: 管理跟搜尋比較快 分出來跟團隊合作時也可以跟手下說改哪個檔案就好 不准改其他的

Q: 一般分類要分多細呢？
A: 3 層 校長自己 2 層 超過 3 層請找校長探討為什麼

Q: Bootstrap5 原始檔 有幾層
A: 進入 SCSS 開始看 算 2 層

Q: 頁面的部分會不會 import 一堆不同頁面的 scss
A: 通常建議你新增一個叫 pages 的資料夾裡面放各頁面的 scss 檔
但有例外 比如購物車有二十個不同的樣式 就把購物車單獨做一個 carts 資料夾放在 pages 資料夾裡面這樣

Q: 請問透過 BS5 的 Sass 去修改 跟直接在自己的 Code 上 !importer 哪個手法會比較好 會有什麼影響嗎？
A: 假設你要改的是主色顏色 變成每個東西都要再寫一次 .xxx-primary 然後 !important 這樣產能很差 建議是改原始檔的 SCSS 一次從根本解決問題

Q: 想改色一定下載嗎？有點懶
A: 同上題回答

Q: 會推薦直接改 _variables 還是寫在 all.scss 上面
A: 通常建議改 _variable.scss 不寫在 all.scss

Q: 只下載 variables 檔案，其他用 cdn 放前面可以嗎？
A: 不行 要編譯會引入其他的檔案 所以要下載整個原始檔

Q: 請問 theme-colors 裡面的色系 就是會套用到所有的 class 名稱有含 primary 的顏色嗎? EX border-primary btn-primary 之類的 新增自己的名稱色系也是這樣嗎？
A: 對的 理解正確

Q:想請問顏色變數的名稱怎麼命名比較好，可以參考什麼資料呢
A:顏色-100~900

Q:px rem 哪個好
A:喜歡就好都可以

Q:請問Sass編譯完的 map 檔，是否不用留在專案裡？
A:對 可刪除 他用來看這是哪隻檔案編譯出來的