# W6
:::warning
**【來源】**
> <https://discord.com/channels/801807326054055996/1141250096785268778/1141250096785268778>
:::
:::info
主要著重於如何修改 Bootstrap 來做客製化的樣式
[第六週設計稿](https://www.figma.com/file/1qhYNCLtQHg6qmBnzV5A6y/2023-%E5%88%87%E7%89%88%E5%A4%8F%E5%AD%A3%E7%8F%AD-W6---%E6%B4%BB%E5%8B%95%E8%A8%82%E7%A5%A8%E7%B6%B2?type=design&node-id=4-2&mode=design&t=AKXWiJMj6wZCKmRl-0 "第六週設計稿(https://www.figma.com/file/1qhYNCLtQHg6qmBnzV5A6y/2023-%E5%88%87%E7%89%88%E5%A4%8F%E5%AD%A3%E7%8F%AD-W6---%E6%B4%BB%E5%8B%95%E8%A8%82%E7%A5%A8%E7%B6%B2?type=design&node-id=4-2&mode=design&t=AKXWiJMj6wZCKmRl-0)")
:::
---
[TOC]
---
## Bootstrap 變數設定
同學下載完[第六週的初始專案](https://github.com/hexschool/web-layout-training-vite/tree/feature/bootstrap5 "第六週的初始專案
(https://github.com/hexschool/web-layout-training-vite/tree/feature/bootstrap5)") （記得要下載 Bootstrap 分支的檔案唷），可以看到 utils 資料夾內有一個名為 _variables.scss 的檔案，這個檔案就是我們之後要修改變數的地方。
## 尋找變數以及修改變數
打開專案的 assets/scss/utils/_variables.scss 這支檔案後，同學會看到，裡面是密密麻麻的變數程式碼。
這時有個小訣竅，建議善用 VS Code 的搜尋功能 Ctrl + F（系統 window 10 的熱鍵），使用英文關鍵字來尋找變數在哪裡。助教本身都是猜測關鍵字來找的 (。・∀・)ノ
比如找字型就搜尋 font、找連結就搜尋 link 相關設定；或是找特定元件的變數設定時也是用關鍵字找。
接下來會提到我們可以修改那些部份，來讓切版整體更符合設計稿樣式。
---
### 修改主色
搜尋關鍵字 `theme-color-variables` ，就可以直接找到改顏色變數的地方。
:::success
小建議：
同學改變數時，建議將要修改變數的那行複製一份起來，並且註解掉原始的設定，之後修改的會是新增的那一份變數。這樣做的優點是可以保留初始設定、讓開發者能一眼知道初始的設定是什麼。
另外，助教自己會在後方加入一段註解文字 *custom 的關鍵字，代表這個是「客製化過的程式碼」。
如此一來，日後只要搜尋關鍵字 custom 就可以馬上搜尋自己修改過哪些地方。
（這個是助教自己開發的習慣，同學要不要標示都可以喔~）
範例：
```CSS=
// $primary: $blue !default;
$primary: #030303 !default; // *custom
```
:::
---
### 修改字型
引入外部字型後，在 _variables.scss 搜尋關鍵字 scss-docs-start font-variables，可以直接跳到改字型的地方 $font-family-sans-serif 。 在最前方加入設計稿的文字 Yeseva One 和 Noto Sans TC 以及 Noto Serif TC。
如果是中間有空格的字型，都建議使用單引號來包住字型名稱唷。
範例：
```CSS=
// scss-docs-start font-variables
// stylelint-disable value-keyword-case
$font-family-sans-serif: 'Yeseva One', 'Noto Sans TC', 'Noto Serif TC', system-ui, -apple-system, 'Segoe UI',
Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
```
設定好 body 基本字型之後，也可以再新增一個 _font.scss 檔案，來調整文字字型，來應付需要客製化的部份。
範例：
```CSS!
.noto-tc-serif {
font-family: 'Noto Serif TC' !important;
}
.noto-tc-sans {
font-family: 'Noto Sans TC' !important;
}
```
---
### 移除掉所有圓角
Bootstrap 的元件樣式預設帶有圓角，由於第六週設計稿的樣式，幾乎是沒有圓角的。
所以可以先將樣式都調整為無圓角。
該設定變數名稱是 $enable-rounded。
只要改為 false 之後就可以移除掉預設的圓角囉。
```CSS=
// $enable-rounded: true !default;
$enable-rounded: false !default; // *custom
```
---
### 移除 a 連結底線
設計稿中的 a 連結也是幾乎沒有底線的，所以我們也可以移除底線。
範例：
```CSS=
// $link-decoration: underline !default;
$link-decoration: none !default; // *custom
```
---
### 移除標題標籤或 p 標籤預設的 margin-bottom
Bootstrap 的標題標籤、 p 標籤預設有 margin-bottom，如果同學不喜歡這個預設的 margin-bottom 的話，可以搜尋 $headings-margin-bottom 和 $paragraph-margin-bottom 來修改設定將預設的 margin-bottom 移除。
範例：
```CSS=
// $headings-margin-bottom: $spacer * 0.5 !default;
$headings-margin-bottom: 0 !default; // *custom
```
```CSS=
// $paragraph-margin-bottom: 1rem !default;
$paragraph-margin-bottom: 0 !default; // *custom
```
---
### 修改間距設定（.mb-1, .pt-2…）
搜尋 $spacers 則可以來到調整間距的地方。
建議同學可以先觀察設計稿的元素間距會有那些數值，然後來設定間距的數值。
範例：
```CSS=
// 記得也要先複製一份初始設定，註解掉後再開始寫新設定喔!
// scss-docs-start spacer-variables-maps
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer * .75,
4: $spacer * .875,
5: $spacer,
6: $spacer * 1.125,
7: $spacer * 1.5,
8: $spacer * 2,
9: $spacer * 2.25,
10: $spacer * 2.5,
11: $spacer * 3,
12: $spacer * 3.75,
// ...
) !default;
```
---
### 修改文字大小
搜尋 $font-sizes 可以來到調整間距的地方。
同學可以先觀察設計稿使用了那些文字大小，來調整這邊的設定。
範例：
```CSS=
// scss-docs-start font-sizes
$font-sizes: (
1: $font-size-base * 4,
2: $font-size-base * 3.75,
3: $font-size-base * 3,
// ...
) !default;
// $font-size-base 預設為 1rem，也就是 16px
// 所以 .fs-1 就是 16 * 4 = 64px
// 依此類推~
```
---
### 網站背景色以及文字基本顏色
Bootstrap 的變數檔案，也有可以修改網站 body 整體背景色的地方。
還有可以修改文字的基本顏色的地方~
同學可以搜尋 「Settings for the <body> element」來找到這個部分。
範例：
```CSS=
// Settings for the `<body>` element.
// $body-bg: $white !default;
$body-bg: #f3f1e5 !default; // *custom
// $body-color: $gray-900 !default;
$body-color: #030303 !default; // *custom
```
以上就是一些比較重要的變數設定。
同學還有其他樣式需要客製化的話，可以善用搜尋關鍵字的方式來尋找變數。
可以慢慢測試，測試哪些變數會修改到哪些樣式。
熟練之後就會找得很快了唷~
現在，我們已經了解到可以從變數來修改樣式。
接下來我們就來看看一些運用的例子吧。
---
## 第六週設計稿
### 「活動錦集」卡片
我們接著來運用看看元件搭配工具類別的威力吧~
以「活動集錦」這個區塊的四張卡片為例子：
這區塊有四張卡片，但是這四張卡片，同學可以看到，和 Bootstrap 卡片（如下圖）預設的顏色或間距，都差非常多。
不管是背景色、邊緣的內距、卡片外框顏色... 都不一樣。
這個時候我們就可以運用工具類別來更改元件樣式囉。
以下是一些使用工具類別來調整元件樣式的方式：
- .p-* 、.pb-*… 等等的間距工具類別，可以改變卡片的內距。
- .bg-transparent 可以讓卡片背景顏色變為透明、.bg-white 可以調整上方白色 TAG 的底色
- .border-2 改變卡片邊框的寬度
同學可以發現光是使用工具類別，就可以排列組合出很多種樣式。
即使同張設計稿有兩張樣式不同的卡片，都可以透過工具類別來調整。
:::success
這裡提供調整的範例給大家參考看看~： [第六週 -首頁 Albums -範例程式碼](https://codepen.io/izumi-dev/pen/GRwVxBK "第六週 -首頁 Albums -範例程式碼(https://codepen.io/izumi-dev/pen/GRwVxBK)")
（由於 CodePen 不方便修改變數檔案，為了在 CodePen 上順利呈現樣式，作法有經過調整。同學可以再依照自己的需求調整一下程式碼~）
:::
---
## 總結
現在同學應該瞭解更改變數、搭配工具類別，來寫樣式的威力了~
以下歸納幾個重點：
- 調整 _variables.scss 檔案的變數，可以修改主色、文字大小…等等的設定。
- 元件本身也有變數相關設定。例如：將 _variables.scss 中的變數 $card-bg 的值 $white 改為設定為 none; 就可以移除 card 元件的背景色…諸如此類，同學可以試試看如何讓元件的樣式更符合設計稿。
- 也可以讓元件搭配工具類別，來改變元件的模樣。例如把 card 元件加入 .border-0 來移除卡片元件的預設邊框。
```HTML
<div class="card border-0">...</div>
```
光是元件搭配工具類別，就可以產生很多種變化囉
以上就是一些第六週修改變數的方式與小訣竅。
希望有幫助到同學~
Sign in with Wallet
Connect another wallet