專案開發技巧篇(三) : Variable、Utilities

每日一談

嗨，大家好 ! 我是阿蘇
今天是Day25 ，在這篇會詳細說明 Variable、Utilities 擴增及運用，那大家知道在使用Bootstrap 我們該如何利用原生bs 樣式去擴增新增你的class ，前面幾篇有分享簡單使用 Variable、Utilities的方式，這邊會再做更深入的詳細教學，讓我們開始今天主題吧 !

在Day20 我們學會將Variable、Utilities這兩個複製出來使用、並學會正確引入檔案順序，今天這篇就來幫大家複習及熟悉實作運用方式，看看運用這兩個檔案能修改什麼 ? 還有能做到什麼 ?

常見實際運用
Day22 設定基礎樣式

• 開發環境架設 - 基礎樣式設定 ( color、其他基礎樣式 )
• 開發環境架設 - font 設定 (文字h1~h6 大小)
• 開發環境架設 - spacing 設定 (margin、padding)
• 修改預設樣式
• 修改元件樣式 ( 下篇、下下篇分享)

Day24 響應式網站

• Utilities 開啟rwd
• 擴增 class 樣式

修改預設樣式 - Variable

前面我們有分享調整 Variable 的方式，現在我們一起試著改看看吧 !

跟我一起改看看 ! 修改 body 顏色

• 開啟 Variable
• 搜尋 body
  
• 修改 背景顏色為 粉色
  
• 成功變更顏色 (灑花
  

善用 Bootstrap 文檔 ， 搜尋關鍵字修改預設 bootstrap 樣式

擴增 class 樣式 - Utilities

1. 新增/擴增 class - 調整透明度
我們在文檔裡會發現部分class沒有齊全，我們就要透過新增/擴增方式，讓他增加在bootstrap上，才能使用class，
我們試著在utilities 新增class - 調整透明度

• 首先打開Bootstrap - 透明度文檔會發現只有25、50、75、100可以使用，但是我想加入透明度為60的上去
  

• 查看文檔提示(最下面)，copy 複製
  

• 開啟 utilities 貼在下方
  

• 可自行擴增樣式，下面以透明度60 舉例
  

Variable、Utilities 新增/修改/擴增技巧

• 善用文檔搜尋關鍵字
• 了解兩個檔案的不同使用地方
• Utilities 擴增/新增
• Variable 修改參數、數值、基礎樣式

只要了解原理及熟悉兩個檔案，會發現修改擴增其實沒有那麼困難，大多大同小異，讓你的bootstrap 可以隨心所欲，照著你想要的方式去自訂修改，試著嘗試修改看看吧 !