介紹

Bulma是一個(gè)免費(fèi)的開源CSS框架，基于Flexbox（彈性布局），已有200,000多名開發(fā)人員使用。Bulma和Bootstrap都是CSS框架，使開發(fā)人員可以輕松快速地構(gòu)建Web界面。盡管它們具有相當(dāng)相似的功能，但它們?nèi)栽谀承┓矫嬗兴煌＝刂鼓壳癰ulma在Github上的stars數(shù)已經(jīng)達(dá)到37k+，它有著驚人的潛力和受歡迎程度！

Github

https://github.com/jgthms/bulma

為什么選擇Bulma？

• 現(xiàn)代特色

通過使用Flexbox等最新的CSS3功能，并計(jì)劃使用CSS變量和CSS網(wǎng)格，Bulma的目標(biāo)是保持瀏覽器技術(shù)的前沿。

• 簡(jiǎn)單的網(wǎng)格系統(tǒng)

要構(gòu)建Bulma，只需一個(gè).columns容器即可包裝任意數(shù)量的.column項(xiàng)目。

• 易于學(xué)習(xí)的語法

通過簡(jiǎn)單的可讀類名像.button或者.title，和一個(gè)簡(jiǎn)單的修飾系統(tǒng)像.is-primary或者.is-large，很容易在幾分鐘內(nèi)上手使用！

• Font Awesome 支持

由于.icon，Bulma與Font Awesome 4和Font Awesome 5都兼容。

• 100多個(gè)有用的CSS助手

Bulma隨附了100多個(gè)助手來指定顏色，顯示和間距。

• 沒有JavaScript

通過僅關(guān)注CSS，Bulma提供了一種輕量級(jí)的解決方案，可以在任何開發(fā)環(huán)境中輕松實(shí)現(xiàn)。

對(duì)比Bootstrap

下面通過截圖簡(jiǎn)單對(duì)比：

效果展示

• 最簡(jiǎn)單的網(wǎng)格系統(tǒng)

只需添加列，它們就會(huì)自動(dòng)調(diào)整大小

• 按鈕

• 表單

• 提醒通知

• 進(jìn)度條

• 表格

• 標(biāo)簽

• 面包屑

• 下拉框

• 菜單

• 模態(tài)框

• 導(dǎo)航欄

• 分頁

• 面板

• Tab標(biāo)簽

• 顏色

• 布局

快速使用

1. 使用npm安裝Bulma軟件包
2. 使用cdnjs CDN鏈接到Bulma.css
3. 使用GitHub存儲(chǔ)庫獲取最新的開發(fā)版本

npm install bulma

以下截圖就是其最簡(jiǎn)單的一個(gè)模板（截圖不清晰，可查看官方文檔）：

Bulma是高度可定制的，這要?dú)w功于在28個(gè)文件中使用的415個(gè)Sass變量。這些變量存在4個(gè)級(jí)別：

• 初始變量：帶文字值的全局變量
• 派生變量：具有引用其他變量或已計(jì)算值的全局變量
• 通用變量：用于不帶有CSS類的HTML元素
• 元素/組件變量：特定于Bulma元素/組件的變量

由于這些變量帶有!default標(biāo)志，因此可以在導(dǎo)入之前或之后為它們分配一個(gè)新值

瀏覽器兼容性

Bulma使用自動(dòng)前綴程序使（大多數(shù)）Flexbox功能與早期瀏覽器版本兼容。Bulma與以下產(chǎn)品的最新版本兼容：

• Chrome
• Edge
• Firefox
• Opera
• Safari

僅部分支持Internet Explorer（10+)

總結(jié)

由于Bulma是純css框架，因此可以與任意前端框架集成，包括流行的Vue、React、Angular等等，其因極具現(xiàn)代化的風(fēng)格而備受關(guān)注，如果你需要一款這樣的樣式庫，不防試一試它，Enjoy it！