松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › CSS › Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

迦娜王
1年前CSS
739 4

介绍

Bulma是一个免费的开源CSS框架,基于Flexbox(弹性布局),已有200,000多名开发人员使用。Bulma和Bootstrap都是CSS框架,使开发人员可以轻松快速地构建Web界面。尽管它们具有相当相似的功能,但它们仍在某些方面有所不同。截止目前bulma在Github上的stars数已经达到37k ,它有着惊人的潜力和受欢迎程度!


Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

Github

https://github.com/jgthms/bulma

Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

为什么选择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

下面通过截图简单对比:

Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

效果展示

  • 最简单的网格系统

只需添加列,它们就会自动调整大小

Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 按钮
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 表单
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 提醒通知
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 进度条
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 表格
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 标签
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 面包屑
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 下拉框
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 菜单
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 模态框
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 导航栏
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 分页
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 面板
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • Tab标签
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 颜色
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

  • 布局
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

快速使用

  1. 使用npm安装Bulma软件包
  2. 使用cdnjs CDN链接到Bulma.css
  3. 使用GitHub存储库获取最新的开发版本
npm install bulma

以下截图就是其最简单的一个模板(截图不清晰,可查看官方文档):


Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

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!


Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css

bulma.css CSS框架
4
Uber 开放公司内部《Go 语言风格指南》
上一篇
大牛总结的MySQL锁优化,写得太好了
下一篇
评论 (17)

评论已关闭。

聚合文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
2月前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
2月前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
2月前
新手必看的前端项目去中心化和模块化思想
2月前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
4
相关文章
「开源」10个优秀的SpringBoot项目,总有你喜欢的
vue-实用的几个vue开源库
10 个实用的 Vue.js 工具和库
推荐21个顶级的Vue UI库!
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
232 喜欢
  • 4
  • Top