美文网首页每天写1000字让前端飞
Bulma-基于 Flexbox 的现代化的 CSS 框架

Bulma-基于 Flexbox 的现代化的 CSS 框架

作者: SevDot | 来源:发表于2018-08-21 10:19 被阅读0次

    我的个人网站是基于 PHP 框架 Laravel 和 CSS 框架 Bulma 开发的,从认识 Bulma 以后我就非常喜欢它了,一直使用,现在推荐出来给大家,希望能为您开发网页样式节省一些时间

    我为什么选择 Bulma?

    Bulma是一个基于 Flexbox 的现代化的 CSS 框架,其响应式、模块化、开源免费,可以轻松用来实现各种简单或者复杂的内容布局,支持:Chrome、Edge、Firefox、InternetExplorer(10+)、Opera以及Safari等浏览器。
    选择 bulma 是基于以下几点:

    • 轻量,无依赖。
    • 基于 flexbox 布局和使用 rem。

    轻量,无依赖。

    Bulma 是一个轻量、易用的 CSS 框架,许多 CSS 框架的要么比较大,要么依赖于 Jquery 这样的 JS 库,与我而言,更喜欢轻量、无依赖的,这样方便我更好的搭配组合

    基于 flexbox 布局和使用 rem 单位。

    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。Rem(font size of the root element)是指相对于根元素的字体大小的单位,宽度自适应,可以完美适配不同宽度的屏幕。

    Bulma 还是 Bootstrap ?

    Bulma 的作者自己在博客文章中说到他自己也是 Bootstrap 的粉丝,Bulma 是受 Bootstrap 的目标和目的的启发而产生的,对此他做了一个比较供选择不定的人的一些参考。

    图片来源于截图

    选择 Bulma :

    • 更现代化,基于 flexbox 布局和使用 rem 单位
    • 简单的栅格系统
    • 易于学习
    • 支持 Font Awesome 5
    • 拥有 100 多个 css 类助手
    • 没有 Javascript 依赖

    选择 Boostrap:

    • 大量 jQuery 插件
    • 使用人数多,社区强大
    • 对 IE 浏览的兼容性更好
    • 有一些 Bulma 的组件,比如 列表组,wells 插图,页眉

    学习资源

    首推的当然是官方网站Github,其次推荐一些国内的学习资源:

    1. 阮一峰的教程 - CSS 框架 Bulma 教程
    2. lqzhgood 翻译的开源中文文档

    当然我最近也打算在我的个人网站上翻译和维护一份 Bulma 中文文档,目的很简单,加强记忆和练习英语。

    感谢阅读,我是 sevdot,全栈开发工程师和终身学习者。
    不喜勿喷,以人为善,比聪明更重要。
    欢迎留言和关注,且接受任何宝贵的建议。
    了解更多

    相关文章

      网友评论

        本文标题:Bulma-基于 Flexbox 的现代化的 CSS 框架

        本文链接:https://www.haomeiwen.com/subject/mujdiftx.html