介紹
Bulma是一個免費的開源CSS框架，基於Flexbox（
彈性佈局），已有200,000多名開發人員使用。Bulma和Bootstrap都是CSS框架，使開發人員可以輕鬆快速地構建Web界面。儘管它們具有相當相似的功能，但它們仍在某些方面有所不同。截止目前bulma在Github上的stars數已經達到37k+，它有著驚人的潛力和受歡迎程度！
Github
https://github.com/jgthms/bulma
為什麼選擇Bulma？
- 現代特色
通過使用Flexbox等最新的CSS3功能，並計劃使用CSS變量和CSS網格，Bulma的目標是保持瀏覽器技術的前沿。
- 簡單的網格系統
要構建Bulma，只需一個.columns容器即可包裝任意數量的.column項目。
- 易於學習的語法
通過簡單的可讀類名像.button或者.title，和一個簡單的修飾系統像.is-primary或者.is-large，很容易在幾分鐘內上手使用！
- Font Awesome 支持
由於.icon，Bulma與Font Awesome 4和Font Awesome 5都兼容。
- 100多個有用的CSS助手
Bulma隨附了100多個助手來指定顏色，顯示和間距。
- 沒有JavaScript
通過僅關注CSS，Bulma提供了一種輕量級的解決方案，可以在任何開發環境中輕鬆實現。
對比Bootstrap
下面通過截圖簡單對比：
效果展示
- 最簡單的網格系統
只需添加列，它們就會自動調整大小
- 按鈕
- 表單
- 提醒通知
- 進度條
- 表格
- 標籤
- 麵包屑
- 下拉框
- 菜單
- 模態框
- 導航欄
- 分頁
- 面板
- Tab標籤
- 顏色
- 佈局
快速使用
- 使用npm安裝Bulma軟件包
- 使用cdnjs CDN鏈接到Bulma.css
- 使用GitHub存儲庫獲取最新的開發版本
npm install bulma
以下截圖就是其最簡單的一個模板（截圖不清晰，可查看官方文檔）：
Bulma是高度可定製的，這要歸功於在28個文件中使用的415個Sass變量。這些變量存在4個級別：
- 初始變量：帶文字值的全局變量
- 派生變量：具有引用其他變量或已計算值的全局變量
- 通用變量：用於不帶有CSS類的HTML元素
- 元素/組件變量：特定於Bulma元素/組件的變量
由於這些變量帶有!default標誌，因此可以在導入之前或之後為它們分配一個新值
瀏覽器兼容性
Bulma使用自動前綴程序使（大多數）Flexbox功能與早期瀏覽器版本兼容。Bulma與以下產品的最新版本兼容：
- Chrome
- Edge
- Firefox
- Opera
- Safari
僅部分支持Internet Explorer（10+)
總結
由於Bulma是純css框架，因此可以與任意前端框架集成，包括流行的Vue、React、Angular等等，其因極具現代化的風格而備受關注，如果你需要一款這樣的樣式庫，不防試一試它，Enjoy it！
分享到:
閱讀更多 最美分享Coder 的文章
