位置:設計主頁 > 網站制作 > CSS教程 >

免費開源純CSS框架一覽:bulma.css

來源:設計前沿網 作者:最美分享Coder 時間:2019-10-18 11:07

介紹

Bulma是一個免費的開源CSS框架,基于Flexbox(彈性布局),已有200,000多名開發人員使用。Bulma和Bootstrap都是CSS框架,使開發人員可以輕松快速地構建Web界面。盡管它們具有相當相似的功能,但它們仍在某些方面有所不同。截止目前bulma在Github上的stars數已經達到37k+,它有著驚人的潛力和受歡迎程度!


20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


Github

https://github.com/jgthms/bulma


20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


為什么選擇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

下面通過截圖簡單對比:

20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 

20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 

20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 

20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 

效果展示

最簡單的網格系統

只需添加列,它們就會自動調整大小

20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 

 


按鈕 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 

 


表單 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


提醒通知 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 

20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


進度條 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 

20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


表格 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


標簽 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 

20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


面包屑 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


下拉框 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


菜單 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


模態框 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


導航欄 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


分頁 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


面板 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


Tab標簽 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 

20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


顏色 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


布局 20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


快速使用

使用npm安裝Bulma軟件包 使用cdnjs CDN鏈接到Bulma.css 使用GitHub存儲庫獲取最新的開發版本

npm install bulma



以下截圖就是其最簡單的一個模板(截圖不清晰,可查看官方文檔):


20萬+名開發人員都在使用的免費開源純CSS框架一覽——bulma.css.jpg

 


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!

福彩幸运农场走势图表