# 第六週直播切版
###### tags: `網頁切版直播班 - 2021 夏季班`
---

# BS5 scss載入（架構圖）
---

案例：
$primary: pink;
$primary: blue !default;
$primary: #ff0000 !default;

h1{
color:$primary;
}
此時會顯示pink顏色，因為沒有寫!default會先覆蓋掉

:::warning

Q:如何覆蓋掉!default;?
A:直接寫
$primary: pink;後面不用家東西，就可以蓋掉
:::

:::success
Q:放在下面或上面有差異嗎？
放在上面的會先吃到顏色，如果都有

:::

:::info
靠上面的會先覆蓋下面的!defaul

:::

# boostrap5 色系與樣式
---

depndeancies
npm instll
node_modules

dist/assets/js/all.js vendor.js
vendor裡面有
boostrap

layout.ejs
index.html

sass
functions
variables

gulp
要用feature/bs5這個檔案下載
放到vs code


:::success
theme-color 改這裡７０行關鍵中的關鍵
:::

:::danger
1rem是16px
spacer1=4px

:::

:::success
underline改成none
連結不加下底線

:::
:::info

修改字體
ROboto
Noto sans CJK TC
這次第六週作業要用的字體
微軟正黑體,window最常出現的用到的字體。通常不用新細明體，不好看。
system-ui是apple的
“微軟正黑體”寫這樣是吃不到的，要寫“Microsoft JhengHei"這樣才吃得到字體
:::
:::warning
先載入"Microsoft JhengHei" 接著載入"微軟正黑體" 的中文字體

:::

:::success
只要改Variables這個其他第一跟第三個不要改

:::

# 格線系統
---
===

<div class="grid_1">
grid 必須滿版相加等於１２，如果超過數量就會下一行
<hr>

:::info

排版工具 layoutit.com
可以放元件，可以放卡片，裡面還可以再放元件。

:::

col

![Uploading file..._cdphuym5j]()
![Uploading file..._cfeade3c0]()

:::info

先寫手機的寫法
container
row
menu

:::
.container{

}



左邊站三欄右邊站九欄

如何清掉編號列號

寫list-style:none;
class : list-unstyle;

col 的外層只能是row
column的外層只能是row
按照規則
ul.row>li.col-3>h2

不要在col這層做ms-2 me-2 會跑掉
因為加起來要12欄位

varialbes.scss
兩者是連接的，上面是斷點，

footer要寫在container外層

row justify-content-centar
col-5佔五欄位

row 本身就是d-flex

自行切換斷點

內建就有，左三右九

md

７６８以上 md
９９２以上 lg 觸發
自動會pc ipad 手機 rwd

４：８ 在pc
3:9 pad

pad 寬度 以下會變成上下兩行



排序
自訂 class 元件 card util text-primary\ mb-3 mb-md-3


斷點

col1-12可以加margin-top margin-bottom 不要改水平軸，會導致換行。