介紹

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與以下產品的最新版本相容：

ChromeEdgeFirefoxOperaSafari

僅部分支援Internet Explorer（10+)

總結

由於Bulma是純css框架，因此可以與任意前端框架整合，包括流行的Vue、React、Angular等等，其因極具現代化的風格而備受關注，如果你需要一款這樣的樣式庫，不防試一試它，Enjoy it！