百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

20万+名开发人员都在使用的免费开源纯CSS框架一览——bulma.css

ccwgpt 2024-11-21 11:20 22 浏览 0 评论

介绍

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



Github

https://github.com/jgthms/bulma



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

下面通过截图简单对比:

效果展示

  • 最简单的网格系统

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



  • 按钮



  • 表单

  • 提醒通知

  • 进度条

  • 表格

  • 标签

  • 面包屑

  • 下拉框

  • 菜单

  • 模态框

  • 导航栏

  • 分页

  • 面板

  • Tab标签

  • 颜色

  • 布局

快速使用

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

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



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!



相关推荐

腾讯开源框架TarsCpp-rpc设计分析-server(二)

2Tars协议2.1是什么借用官方说法:TARS编码协议是一种数据编解码规则,它将整形、枚举值、字符串、序列、字典、自定义结构体等数据类型按照一定的规则编码到二进制数据流中。对端接收到二进制数据流...

微服务调用为什么用RPC框架,http不更简单吗?

简单点,HTTP是协议,RPC是概念!实现RPC可以基于HTTP协议(Feign),TCP协议(Netty),RMI协议(Soap),WebService(XML—RPC)框架。传输过程中,也因为序列...

go-zero:开箱即用的微服务框架(gin框架微服务)

go-zero是一个集成了各种工程实践的Web和rpc框架,它的弹性设计保障了大并发服务端的稳定性,并且已经经过了充分的实战检验。go-zero在设计时遵循了“工具大于约定和文档”的理...

SOFARPC :高性能、高扩展性、生产级的 Java RPC 框架

#暑期创作大赛#SOFARPC是一个高性能、高扩展性、生产级的JavaRPC框架。在蚂蚁金服,SOFARPC已经使用了十多年,已经发展了五代。SOFARPC致力于简化应用程序之间的RPC...

自研分布式高性能RPC框架及服务注册中心ApiRegistry实践笔记

痛点1.bsf底层依赖springcloud,影响bsf更新springboot新版本和整体最新技术版本升级。2.eureka已经闭源,且框架设计较重,同时引入eureka会自行引入较多sprin...

Rust语言从入门到精通系列 - Tonic RPC框架入门实战

Rust语言是一种系统级语言,被誉为“没有丧失性能的安全语言”。Rust语言的优势在于其内存安全机制,在编译时就能保证程序的内存安全。Tonic模块是Rust语言的一个RPC(RemoteProce...

腾讯开源框架TarsCpp-rpc设计分析-client(一)

前言Tars是腾讯开源的微服务平台,包含了一个高性能的rpc框架和服务治理平台,TarsCpp是其C++版本。对于以C++为主要开发语言,同时还想深入了解rpc和微服务框架具体实现的同学来说,Tars...

设计了一款TPS百万级别的分布式、高性能、可扩展的RPC框架

为啥要开发RPC框架事情是这样的,在开发这个RPC框架之前,我花费了不少时间算是对Dubbo框架彻底研究透彻了。冰河在撸透了Dubbo2.x和Dubbo3.x的源码之后,本来想给大家写一个Dubbo源...

rpc框架使用教程,超级稳定好用,大厂都在使用

rpc是什么远程调用协议如何使用导入依赖<dependency><groupId>org.apache.dubbo</groupId><art...

Layui 框架实战:动态加载 Select 与二级联动全解析

在现代Web开发中,下拉选择框(Select)是用户输入数据时不可或缺的组件。很多时候,我们需要的选项并非静态写死在HTML中,而是需要根据业务逻辑从后端动态获取。更有甚者,我们可能需要实现“...

15个能为你节省数百小时的前端设计神器,从UI库到文档生成

无论你是刚开始开发之旅的新手,还是疲于应付生产期限的资深程序员,有一个真理始终不变:正确的工具能彻底改变你的工作流程。多年来,我测试了数百个开发工具——有些实用,大多数平庸。但有一批免费网站经受住了时...

Layui与WinForm通用权限管理系统全解析

嘿,小伙伴们,今天咱们来聊聊Layui和WinForm这两个框架在通用权限管理系统中的应用。别担心,我会尽量用简单易懂的语言来讲解,保证让大家都能跟上节奏!首先说说Layui。Layui是一个前端UI...

纯Python构建精美UI!MonsterUI让前端开发效率飙升

“无需CSS知识,告别类名记忆,11行代码实现专业级卡片组件”在传统Web开发中,构建美观界面需要同时掌握HTML、CSS、JavaScript三剑客,开发者不得不在多种语言间频繁切换。即使使用Boo...

WebTUI:将终端用户界面(TUI)之美带到浏览器的CSS库

在当今Web技术飞速发展的时代,界面设计愈发复杂多样。然而,随着现代化工具的广泛使用,一些开发者开始回归极简风格,追求一种简洁而富有韵味的设计。WebTUI正是这样一款CSS库,它将经典的终...

人教版二年级下册生字描红汇总(拼音+笔顺+描红),可打印!

可定制内容,评论区留言。本次整理的为人教版二年级下册所有生字,共计300个;写字是小学阶段一项重要的基本功训练,把汉字写得正确、工整、美观,可以提高运用汉字这一交际工具的准确性和效率。对小学生进行写字...

取消回复欢迎 发表评论: