久久精品无码砖区,亚洲每日更新在线国产精品原创巨作AV,国产99视频精品免费视频6,久久精品影视免费观看

<i id="lznb9"><strike id="lznb9"><strong id="lznb9"></strong></strike></i>

<u id="lznb9"></u>
<video id="lznb9"></video>
  • <wbr id="lznb9"><ins id="lznb9"></ins></wbr> <u id="lznb9"><bdo id="lznb9"></bdo></u>

    <u id="lznb9"></u>
      <wbr id="lznb9"><center id="lznb9"></center></wbr>

      湖北企業(yè)新聞網(wǎng),歡迎您!

      幫助中心 廣告聯(lián)系

      網(wǎng)站關(guān)鍵詞: 湖北企業(yè)新聞網(wǎng)

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

      來源:時間:2020-08-14 04:02:15 閱讀:-

      介紹

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


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


      Github

      https://github.com/jgthms/bulma


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


      為什么選擇Bulma?

      • 現(xiàn)代特色

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

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

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

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

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

      • Font Awesome 支持

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

      • 100多個有用的CSS助手

      Bulma隨附了100多個助手來指定顏色,顯示和間距。

      • 沒有JavaScript

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

      對比Bootstrap

      下面通過截圖簡單對比:

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

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

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

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

      效果展示

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

      只需添加列,它們就會自動調(diào)整大小

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



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



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


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

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


      • 進(jìn)度條
      20萬+名開發(fā)人員都在使用的免費開源純CSS框架一覽——bulma.css

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


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


      • 標(biāo)簽
      20萬+名開發(fā)人員都在使用的免費開源純CSS框架一覽——bulma.css

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


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


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


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


      • 模態(tài)框
      20萬+名開發(fā)人員都在使用的免費開源純CSS框架一覽——bulma.css


      • 導(dǎo)航欄
      20萬+名開發(fā)人員都在使用的免費開源純CSS框架一覽——bulma.css


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


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


      • Tab標(biāo)簽
      20萬+名開發(fā)人員都在使用的免費開源純CSS框架一覽——bulma.css

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


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


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


      快速使用

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

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


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


      Bulma是高度可定制的,這要歸功于在28個文件中使用的415個Sass變量。這些變量存在4個級別:

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

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


      瀏覽器兼容性

      Bulma使用自動前綴程序使(大多數(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!


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


      推薦閱讀:only時尚網(wǎng)