開發環境架設(三) : Bootstrap 自訂基礎樣式

每日一談

嗨，大家好 ! 我是阿蘇
今天是day22 ，今天分享開發環境架設 第三篇，我們來教大家如何用 bootstrap 來自訂專案基礎樣式，這邊會教學常使用的 color、spacing 、font ，其他的設定也是大同小異，讓我們看下去吧。

第三階段 - 開發環境架設

前面兩篇分享了開發環境架設的知識點和一些實作分享，幫大家統整下 Side Project 開發第三階段 - 開發環境架設我們應該要做的準備，事前的規劃跟開發環境架設，會讓你在開發上更順暢、更有條理

• EJS版型規劃
• 格線系統 (依照版型可以先拉出格線)
• Scss架構
• 查看設計稿
• 框架自訂基礎樣式

拿到設計稿的第一件事

睜大眼睛看清楚你的設計稿，我們要看的重點有幾個，這會決定到我們的基礎配置、版型規劃、開發順序等，腦中要先架構出畫面，還有時程表，之後才能更好的安排開發順序及核心開發

查看設計稿重點

• 版型
  思考RWD、格線系統配置
• 字體大小
  16px 、24px 、32px ...
• 字體粗細
  Bold、lighter、normal ...
• 字型
  新細明體、微軟正黑體、思源黑體 Noto Sans...
• 色系 Color
  primary 主色、secondary 副色、設計稿常用顏色
• 間距
  常出現的Spacing (4px、8px、16px、32px ...)

有個基本概念後，這時候我們可以進入到開發環境架設，試著把設計稿常出現的參數新增調整，接下來進入重點讓我們看下去

開發環境架設(三)

• color 顏色配置
• spacing 間距設定
• Font 字體設定

還記得我們在 DAY20 - 開發環境架設(一) 篇章裡提到的，bootstrap 開發前複製的兩個檔案variables、utilities，我們現在要用到其中一個檔案 variables 來自訂調整我們的 bootstrap ，
下面會分享如何修改 variables 來自訂我們需要的基礎樣式

color 顏色配置

來看看Bootstrap-Color文檔
，可以看到基礎的設定好的color( primary、secondary、success、danger、warning、info、light、dark)，但是這些顏色不一定是我們設計稿需要的顏色，我們第一步就是要把這些改成自己的需要的 color

修改Color

• 開啟 variables ，找到裡面的 color ，可以看到裡面有 primary、secondary... 顏色參數

• 修改後面的變數為你指定的Color ，也可自己至下方新增

Su 專題經驗談 (自訂基礎樣式)
我的專案色系是以黑白色系為主，主要有五個顏色，那我先把主色、副色決定，新增調整上去，再把其他也會用到的顏色也新增上去，light 因為有兩個顏色很接近，所以我特別新增一個light2 變數，加上black 也會很常使用，所以我也新增了 black 變數，這就是我的專案基礎顏色配置

當你學會看 variables 裡面參數，會發現修改自訂其實都是大同小異，我們只是去修改 bs設定好的變數，只要知道位置在哪裡，善用ctrl + F 跟文檔查詢，修改沒有想像中的困難，試試看吧 !

spacing 顏色配置

Bootstrap-spacing文檔
spacing 是使用在 margin 、padding ，前面我們有分享到設計稿要規格化，那這邊開始就會感覺到差異了，好的設計稿會有完整、統一的樣式，我們會將設計稿我們整理出來的spacing 設定在基礎樣式上

修改 spacing

• 開啟 variables ，找到裡面的 spacer ，裡面可以看到0、1、2..對應的spacing

• 例如:我預設樣式裡沒有20px 的spacing ，我想新增上去，只要中間插入新增(由小寫到大，格式相同)

補充知識 - 學會查看文檔查看修改位置
範例 -Bootstrap-spacing文檔

Font 字體設定

• 開啟 variables ，ctrl+F 搜尋裡面的 font-size ，這邊以我的side project 設定作範例給大家參考
• 跟上面一樣，我們可以找到對應變數來修改，也可以自行新增變更
• 單行可以用註解註記修改前樣式，未來在觀看才清楚知道哪些有修改過

這邊能看到我在設計稿中設定的尺寸為14 、16、20、24、28、32、40、48px ，我就一一把大小加入到我們的基礎字體設定，h1~h6 設定常見的，額外的我是用新增的方式，要使用在呼叫class來使用，這樣設定可以省下很多重複寫class，也可以讓我們開發上更快速、更便利

自訂基礎樣式其實原理都大同小異，只要學會看文檔跟踏出第一步，修改新增都很容易，試著嘗試設定看看吧