Search
手把手自訂你的 Bootstrap 樣式
不用 gulp、webpack，只需要開啟 VSCode～
Q: 為什麼要客製化？
客製化可以使 Bootstrap 更符合專案的風格樣式。
Q: 用覆蓋不行嗎？一定要客製化嗎？
就經驗上來說，覆蓋通常會缺少許多的狀態，如按鈕的 hover, active, focus 等等，並且容易使樣式缺少一致性。
Q: 編譯？Bootstrap 不是 CSS 嗎？
Bootstrap 的 .css 檔案是編譯後的結果，它原始檔案是屬於 .scss 的結構，本文只會針對其中的變數檔案進行介紹，不需要會 .scss 也可以進行調整喔。
Q: 客製化環境是不是很複雜，如果沒有 gulp、webpack 使用經驗是否就無法？
不會，本章節介紹的方式僅需要使用 VSCode 即可（有安裝 Node.js 更好，但不強制）。
因為 廖洧杰 的推坑，現在要跟一堆高手 PK CSS
也就想到以前在寫 SCSS 的一些想法
其實我過去是不喜歡 Bootstrap 的
但在嘗試超越 Bootstrap 的過程中（自幹 CSS 框架）
發現觀念上的有很多的不足
因此開始研讀 OOCSS 及許多框架的概念
三年前（講古中...）
在公司中就依據這樣的概念重製的一套框架
並且加入許多變化讓框架的可用性更高
如：
- 元件樣式數量由變數決定
- 通用類別，可重複使用的 樣式類型 className
- Flex 設計元件
- z-index 統一管理
- 按鈕包含 outline 的款式
而這些也是我很喜歡 Bootstrap 4 的原因
這個版本實現了我當時的許多概念
並且做得更好，現在我引入 BS4 時
就好像在用當時自己做的框架一樣 😊
所以歡迎大家來 PK 我的 CSS
我可是超強的喔～
https://www.hexschool.com/2018/09/13/2018-09-13-hexschool-challenge/
Bootstrap 4 與 其他版本的差異
---
最近試著用 Bootstrap 4 製作一個網站
撇除目前還在測試中...不斷更新外
Bootstrap 4 有很多新功能我很喜歡
1. 額外提供 outline 版本的按鈕
2. float、text-align 均有提供不同解析度的版本 (xs, md...)
3. 雜項(utilities)多了很多 margin、padding 的樣式，讓排版更為自由
4. navbar 的底色是半透明，讓 navbar 的配色更為自由
5. 直接提供 sass 的版本
我是直接使用 sass 的版本
最痛的經驗是在更新的時候很多 className 換了 @_@
但整體來說挺滿意的
#bootstrap #css
... button attachedbootstrap input group buttonbootstrap input group button dropdownbootstrap segmented ... ... <看更多>
bootstrap按鈕 在 [CSS學習筆記] Bootstrap4 Button(按鈕)元件 - 1010Code 的推薦與評價
在Bootstrap 的顏色樣式都固定有那些，依據你的動作來使用相對應的標籤形式。 primary; secondary; success; info; warning; danger. <div class=" ... ... <看更多>