亚洲三级网站,日本黄色网站在线观看,成年免费网站在线入口,国产一级 片内射新月直播磨磨

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

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

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

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

        來源:時(shí)間:2020-08-14 04:02:15 閱讀:-

        介紹

        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+,它有著驚人的潛力和受歡迎程度!


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


        Github

        https://github.com/jgthms/bulma


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


        為什么選擇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ì)比:

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

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

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

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

        效果展示

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

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

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



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



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


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

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


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

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


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


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

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


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


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


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


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


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


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


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


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

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


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


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


        快速使用

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

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


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


        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!


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