【主線攻略】_W6

相关文章推荐

被表白的遥控器 · OpenTelemetry ...· 1 年前 ·

精明的茶叶 · MaxCompute中的JSON数据处理-阿 ...· 2 年前 ·

含蓄的人字拖 · Linux必备下载命令之curl详解 - 知乎· 2 年前 ·

坏坏的黑框眼镜 · react.js - react ...· 3 年前 ·

乖乖的啄木鸟 · 图形处理引擎 - 知乎· 3 年前 ·

**【來源】** > :::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 element」來找到這個部分。 ```CSS= // Settings for the `` element. // $body-bg: $white !default; $body-bg: #f3f1e5 !default; // *custom // $body-color: $gray-900 !default; $body-color: #030303 !default; // *custom 以上就是一些比較重要的變數設定。同學還有其他樣式需要客製化的話，可以善用搜尋關鍵字的方式來尋找變數。可以慢慢測試，測試哪些變數會修改到哪些樣式。熟練之後就會找得很快了唷~ 現在，我們已經了解到可以從變數來修改樣式。接下來我們就來看看一些運用的例子吧。 ## 第六週設計稿 ### 「活動錦集」卡片我們接著來運用看看元件搭配工具類別的威力吧~ 以「活動集錦」這個區塊的四張卡片為例子： ![](https://hackmd.io/_uploads/SJgNTyq2n.png) 這區塊有四張卡片，但是這四張卡片，同學可以看到，和 Bootstrap 卡片（如下圖）預設的顏色或間距，都差非常多。不管是背景色、邊緣的內距、卡片外框顏色... 都不一樣。 ![](https://hackmd.io/_uploads/rJJUT1933.png) 這個時候我們就可以運用工具類別來更改元件樣式囉。以下是一些使用工具類別來調整元件樣式的方式： - .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

...

光是元件搭配工具類別，就可以產生很多種變化囉以上就是一些第六週修改變數的方式與小訣竅。希望有幫助到同學~