專案開發技巧篇(五) : Bootstrap 元件客製化

每日一談

嗨，大家好 ! 我是阿蘇
今天是Day27 ，今天分享的是 Bootstrap 元件客製化教學， 試著用一個元件去寫看看我們要的樣式及內容，讓大家知道如何去修改元件學會元件客製化，讓我們進入今天主題吧 !

Modal 元件 - 寫一個彈出視窗 (bootstrap 教學)

試著用 bootstrap 元件 寫看看一個 modal 彈出視窗 ，讓我們跟著一步一步做看看

1. 複製 modal 元件
先在文檔找到 modal 元件

2. 複製至你的html 標籤
因為 bootstrap 元件有些很長，可以加上註解，在修改管理上會比較好辨識

3. 拆解元件，找出內容修改
可以看到bs元件很多都會有content 內容，大部分要修改都是在這邊，也可以在區塊加入class樣式

4. 修改彈出視窗按鈕
直接加入class，這邊示範的都是bs的class，要注意的是如果是自己寫class，要注意覆蓋全種問題，因為bs預設class很多權重很重，要覆蓋要用更高權重來覆蓋

5. 修改客製元件樣式
這邊我們要變更成黑底白字，然後增加邊框、取消分隔線，還有取消圓角，在variables 裡面我們可以找到元件修改位置，試著變更看看

6. 新增/修改內容

1. 新增tittle 文字－喵喵喵
2. 取消關閉按鈕（這邊不想使用）
3. 新增內容 - img 喵喵圖片 + p 一起學貓叫
4. 修改按鈕文字 - 關閉、跟我一起喵
   

7. 修改class樣式

1. 調整 tittle 文字－ 字體大小2
2. 調整 margin － ms、me-auto 水平置中
3. 內容排版 - 文字置中 text-center 文字置中 text-center
4. 修改按鈕樣式 - 複製上面樣式
   

6. 完成!成功客製元件
只要懂原理知道在對應位置寫內容修改樣式，其他就跟我們一般寫css樣式一樣

這邊我們都是使用bs預設class去修改，也可以自行寫css 加入class，會發現我們只是去找到對應位置，加入我們想要的內容修改樣式，我們只要學會靈活運用，每個元件及class客製都大同小異，是不是不會很難呢 ! 試著用看看元件吧