Bulma - 免费开源的纯 CSS 前端 UI 框架,专注于构建移动优先的响应式 web 界面

news2024/11/20 1:23:49

Bulma - 免费开源的纯 CSS 前端 UI 框架,专注于构建移动优先的响应式 web 界面

简单易用的 CSS 框架,虽然只有一个 CSS 文件,但功能很强大,在国外很受开发者欢迎,推荐给大家。

关于 Bulma CSS 框架

Bulma 是一个简单、很容易自定义的 CSS UI 框架,提供了众多预定义好的样式,开发者可以直接调用 class 名来使用,通过规范的组合,来达到快速构建 web 界面。

bulma 官网

Bulma 官方提供了数十个基础组件,这些组件非常漂亮,同样是用 CSS 实现,没有任何 Javascript 代码。

Bulma CSS 框架技术特性

  • 所有功能集合在一个 CSS 文件中,简单极致、无其他依赖
  • Bulma 提供预先定义好的 class 集合,开发者只需要在 HTML 代码上调用即可
  • Bulma 由众多模块化的 sass 文件组成,这种好处是我们可以按需引入,减少开发项目的打包占用空间
  • 专为响应式而生!和 bootstrap 一样,Bulma 是一个移动优先的框架,哪怕 CSS 语法不够熟悉,也能轻松搭建适配不同屏幕的界面

开发上手体验和使用建议

我们知道,Vue.js 是用来开发用户界面的 JavaScript 框架,这是一套声明式的、组件化的编程模型,使得我们无需再用繁琐的 JavaScript 或 jQuery 开发方式,能更高效开发界面。

Vue 解决的是数据和界面的互动,所以自诞生以来涌现了很多 Vue UI 组件库,一直以来,我分享了不少免费开源的 Vue UI 组件库。

Bulma 是一个很容易上手使用的 CSS UI 框架,和之前介绍的绝大多数 UI 框架不同,Bulma 所有的组件都是 CSS 实现的,所以完全能和 Vue / React 等热门 JS 框架使用。

bulma 网格系统

我在第一次看到 Bulma 时,就被优雅的组件设计和配色所吸引,相信你们也会喜欢。

使用 Bulma 最简单的方式是直接在 HTML 里引入全量的文件:

建议从官网下载项目后,本地引入 bulma-rtl.min.css 文件。

也可以用工程化方式安装:

bulma 按钮组件

bulma 表单组件

官网目前只支持英文,虽然借助翻译工具也能啃下,但技术型的文档被机器翻译很容易造成理解困难,上网翻了翻,找到了一位大神翻译的中文文档,网址在此。

免费开源说明

Bulma 的作者是开发者和设计师 Jeremy Thomas,他还是《CSS in 44 minutes》一书的作者,有15年的 web 开发经验,贡献的开源项目造福了数百万开发者。

Bulma 同样是一个免费开源的项目,源码基于 MIT 开源协议托管在 Github 上,任何个人和公司都可以免费下载使用,支持免费授权用在商业项目上。

原文链接:https://www.thosefree.com/bulma

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/147636.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

宠物吸毛器控制板开发,构建理想人宠共居空间

目前养宠物的人越来越多,猫狗等宠物一直存在着严重的掉毛情况,宠物毛发可能会引起过敏等疾病反应,日常生活中清理工作是一大难题,市面上关于宠物的吸毛产品非常的少,为此沐渥开发了一款宠物吸毛器控制板,适…

奇怪,郭德纲小儿子八岁生日,现场照片发布不久却被删除了

2022年1月5日,对于北京德云社来说,是一个双喜临门好日子,首先德云社相声春晚开始录制,其次郭德纲的儿子郭汾阳,也要过八岁生日了。郭汾阳作为德云社的少班主,是郭德纲老师和董事长王惠所生,老来…

与ChatGPT的聊天:如何使用Python连接Neo4j并创建无向图?

0. 前言 尝试请ChatGPT帮写代码: 但发现ChatGPT可以给出逻辑上正确的程序,一旦具体深入询问,有可能会产生错误。 当然,也可能因为提问的人比较少🤣 不管怎么说,这篇可以当成是对ChatGPT茶余饭后的谈资&am…

数据库,计算机网络、操作系统刷题笔记28

数据库,计算机网络、操作系统刷题笔记28 2022找工作是学历、能力和运气的超强结合体,遇到寒冬,大厂不招人,可能很多算法学生都得去找开发,测开 测开的话,你就得学数据库,sql,oracle…

产品重要更新: GcExcel Java Edition 6.0.2 Crack

重要产品更新: JDK 6 和 7 已经走到了生命的尽头。自此, GcExcel Java Edition将不再支持它们,现在将从最新的v6 版本及更高版本开始以JDK 8为目标。GcExcel Java Edition 6.0.2 Crack by Ω578867473 GcExcel高速 Java Excel 电子表格 API …

Zookeeper简介

引言 在分布式环境下,如果舍弃SpringCloud,使用其他的分布式框架,那么注册心中,配置集中管理,集群管理,分布式锁,分布式任务,队列的管理想单独实现怎么办。 Zookeeper介绍 Zookeeper…

Flink 运行架构

1 Flink 运行时的组件 Flink 运行时架构主要包括四个不同的组件,它们会在运行流处理应用程序时协同工作:作业管理器(JobManager)、资源管理器(ResourceManager)、任务管理器(TaskManager&#…

一篇文章让你掌握HTML(下)

目录 1. 列表标签 1.1 无序列表 1.2 有序列表 1.3 自定义列表 2. 表格标签 2.1 表格的基本标签 2.2 表格相关属性 2.3 表格标题和表头单元格标签 2.4 表格的结构标签 2.5 合并单元格 3. 表单标签 3.1 input系列标签 3.1.1 input系列标签-文本框 3.1.…

MATLAB-非线性方程(组)求解

求非线性方程或方程组解的问题也就是求函数零点的问题。对于任意函数,在求解范围内可能有零点,也可能没有;可能只有一个零点,也可能有多个甚至无数个零点。MATLAB没有可以求解所有函数零点的通用命令,下面将分别讨论一元函数和多元…

Nginx入门知识

一、什么是NginxNginx (engine x) 是一个高性能的HTTP和反向代理web服务器,Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强&am…

JavaScript 字符串

文章目录JavaScript 字符串JavaScript 字符串字符串长度特殊字符字符串可以是对象字符串属性和方法字符串属性字符串方法JavaScript 字符串 JavaScript 字符串用于存储和处理文本。 JavaScript 字符串 字符串可以存储一系列字符,如 “John Doe”。 字符串可以是插…

如何连接远程mysql数据库(原创)

一、连接远程数据库:(前提本地也有mysql的客户端) 1、显示密码 如:MySQL 连接远程数据库(192.168.5.116),端口“3306”,用户名为“rfid_hh”,密码“123456” C:/>mysq…

20230107报警器的测试

20230107报警器的测试 2023/1/7 13:01 新款夹子户外报警器防盗报警器果园自动打电话无线距离防水报警器 拼多多的货。不到30¥,也就那么回事了,没有太高期望。 需要在微信公众号注册。 拿掉强磁铁之后,GSM模块通电了!…

英国学校遭遇机密数据大规模泄露

在 2022 年发生攻击事件后,来自 14 所英国学校的机密数据已被黑客在线泄露。 泄露的文件包括孩子的 SEN 信息、学生护照扫描件、员工工资表和合同细节。在受影响的学校拒绝支付攻击者的赎金要求后,信息被泄露。 据报道,攻击和泄密是由威胁行…

前端开发--JavaScript高级

JavaScript高级这一篇就够了JavaScript高级1、基础总结深入1.1 数据类型的分类和判断1.2 数据,变量, 内存的理解1.3 对象的理解和使用1.4 函数的理解和使用2、函数高级2.1 原型与原型链2.2 执行上下文与执行上下文栈2.3 作用域与作用域链2.4 闭包2.5 内存溢出与内存泄露3、对象…

DC-1靶场实操

靶场部署 下载网址:Vulnerable By Design - Search: DC- ~ VulnHub tips:强烈建议各位师傅们使用迅雷或idm要不然下载靶场将是一个十分痛苦的环节 之后环境搭建操作步骤一致故此处搭建环境以DC-1为例 将下好的压缩包解压,你就会看到一个.…

2023春招面试专题:高并发解决方案

如何理解高并发? 高并发意味着大流量,需要运用技术手段抵抗流量的冲击,这些手段好比操作流量,能让流量更平稳地被系统所处理,带给用户更好的体验。 我们常见的高并发场景有:淘宝的双11、春运时的抢票、微…

kaggle平台学习复习笔记 | 计算机视觉

目录1.The Convolutional Classifier2.Convolution and ReLU3.Maximum Pooling4.The Sliding Window5.Custom Convnets6.Data Augmentation1.The Convolutional Classifier 使用Keras创建第一个计算机视觉模型。 用于图像分类的网络由两部分组成:卷积层和密集层 卷…

华为云服务器无法正常访问端口

出错场景: 2023年1月7日22:05:32 在新服务器上运行自己服务端软件,其他客户端无法访问端口 进行连接。 服务端的程序启动了,客户端无法交互,连接失败。 首先检查能不能ping通 ping IP地址–发现是可以ping通的,再测…

活动星投票国风正当红网络评选微信的投票方式线上免费投票

“国风正当红”网络评选投票_第三方投票平台_优秀微信小程序_小程序投票优势近些年来,第三方的微信投票制作平台如雨后春笋般络绎不绝。随着手机的互联网的发展及微信开放平台各项基于手机能力的开放,更多人选择微信投票小程序平台,因为它有非…