Bulma 是由 Jeremy Thomas 开发的开源 CSS 框架。该框架基于 CSS Flexbox 属性。它具有高度响应性,最大限度地减少了对响应行为的媒体查询的使用。
Bulma 的另一个优点是您只需了解 HTML 和 CSS 即可实现此框架(尽管了解 JavaScript 可以根据您的需要帮助现有功能)。
Bulma 还允许我们添加自己的 CSS 样式,但建议使用外部样式表而不是内联样式。
使用 Bulma:如果您是 Web 开发初学者,最简单的方法是使用链接标签在 HTML 文件的头部部分使用 jsDelivr CDN 链接。
Hello world!!
输出:
Hello world!!
Bulma 的另一个很酷的功能是,它可以简单地导入您想要应用 Bulma 样式的特定元素所需的 SASS 文件。例如,如果您想要表单元素的 Bulma 样式,则只能导入该 sass 文件。否则,您可以使用 npm 安装 Bulma 包。
示例: Bulma 语法极其简单,有预定义的类名可以帮助我们根据名称创建元素。
Hello Bulma!
Hello
它创建了一个带有 Hello 字样的程式化按钮。
创建的按钮与通用 HTML 按钮不同。
每个 Bulma 元素都有多种可用的替代样式,并且可以通过使用is-或has-类修饰符来应用这些样式。
例子:
这些修改器构成了在 Bulma 中操作对象的基础。 Bulma 提供的一些颜色修饰符是:
- 是主要的
- 信息
- 是成功
- 是危险
- 警告
大小修饰符范围从is-size-1到is-size-6 。这些有助于改变字体大小。尝试在 Bulma 中使用 h1到h6标签,但您会注意到可见字体大小没有变化。这是因为 Bulma 仅使用修饰符来更改文本的大小,而不是以标准的 HTML 方式。尝试运行此代码以了解 h1 到 h6 标签如何不影响文本大小:
Hello Bulma!
hello world
hello world
hello world
输出:
hello world
hello world
hello world
在元素类属性中添加多个变体。试试这个代码并观察我们使用了两个修饰符,一个用于颜色,第二个用于大小。
输出:
好处:
- 适用于所有设备(台式机、平板电脑和手机)的响应式设计。
- 易于阅读和编写代码。
- 它可以与任何 JavaScript 框架(AngularJS、ReactJS)结合使用。
缺点:
- 处于开发阶段。
- 需要小的改进。
- 新框架