首页 > 新闻 > Bulma CSS 框架:它是什么以及如何开始

Bulma CSS 框架:它是什么以及如何开始

2023-01-04 小编

在你尝试自己建立一个网站之前,很难完全欣赏进入网站的所有内容。在这篇文章中,您将发现 Bulma,这是 CSS 框架领域相对较新的参与者。

使用台式计算机对 Bulma CSS 进行编程的人

从托管到内容,从设计到安全,建立和维护在线形象既有令人难以置信的回报,又要求很高。因此,当出现减轻负担的东西时,您可以确定Web开发社区会渴望尝试它。CSS框架就是这种情况。

立即下载: 35 个免费的 HTML 和 CSS 代码模板

CSS 框架是一组工具,可以更轻松地编写 CSS 代码。我们将探讨是什么让 Bulma 成为一个独特的框架,为什么你可能想尝试它,以及如何开始使用它的一些基本元素。

为什么使用 Bulma CSS

如何使用 Bulma CSS

如何编写 Bulma CSS

让框架完成工作

什么是 Bulma CSS?

Bulma是一个免费的基于CSS类的框架。它允许开发人员比普通CSS更有效地在网页上实现CSS。Bulma于2016年首次发布,在前端开发人员中获得了吸引力,足以与Bootstrap等其他知名CSS框架竞争。

Bulma建立在Flexbox上,Flexbox是一个CSS布局模型,可以根据页面元素的宽度自动调整页面元素的宽度。Flexbox要求开发人员同时编写HTML和CSS来创建遵循此模型的元素。使用Bulma,Flexbox行为和大多数其他事情都可以用HTML类来处理。

Bulma CSS也是开源的——你可以在Bulma的GitHub存储库中查看它的源代码——它允许开发人员在框架内创建新函数。

为什么使用 Bulma CSS?

如果你最近学习了CSS作为一种语言,那么在它上面学习像Bulma这样的框架似乎有些过分。但是,虽然CSS框架不是构建网站所必需的,但它们可以减轻与CSS相关的许多挑战。

如果你想从头开始建立一个网站,以下是Bulma成为你朋友的一些原因:

  • 效率:像 Bulma 这样的框架通过为你实现更多参与的 CSS 效果来节省你的时间。
  • 单纯:正如我们将看到的,Bulma很容易添加到你的代码中。如果你了解CSS类,你就能理解Bulma。此外,Bulma 并没有被大量的选项所淹没——这都是 CSS。
  • 一致性:同样,Bulma 的语法是一致且直观的,因此如果您不是自己编写代码,它也很容易学习和解释。
  • 能力:Bulma的用户界面组件库处理网站前端所需的大多数内容,包括标题,菜单,表单和卡片。仅这些组件中的任何一个都需要大量普通的CSS来实现。使用 Bulma,只需几个基本命令即可设置这些相同的元素样式。
  • 模块性:Bulma包含~40个.sass文件(Sass是Bulma使用的一种CSS扩展语言),每个文件处理不同的接口组件。但是,如果您不想,则不必导入所有这些文件,只需导入所需的文件即可。在此处阅读操作方法。
  • 反应:由于 Bulma 基于 Flexbox,其内置组件在设计上具有响应性——这意味着元素将移动和缩放以适应任何屏幕或视口大小。

这些好处为布尔玛赢得了良好的声誉。而且,通过一些练习,您可以产生一些令人印象深刻的结果 - 查看Bulma的展示以了解可能性,并使用浏览器的检查元素工具来查看这些网站是如何制作的。

布尔玛 vs. 引导

如果你熟悉CSS框架,你可能熟悉Bootstrap,这是当今最流行的CSS框架。Bootstrap和Bulma都是免费的,开源的,移动优先的CSS框架,它们做类似的事情,但它们在受欢迎程度,功能和复杂性方面有所不同。

Bootstrap自2011年以来一直存在,因此拥有更大的用户群和支持社区。这意味着您更有可能找到 Bootstrap 比 Bulma 高级问题的解决方案。然而,Bulma的文档详细而直接,其开发人员社区正在增长。

Boostrap的库中还有更多元素,以及更多样式和实现选项。你可以在 Bulma 的框架内做很多事情,但值得研究一下 Bootstrap 的组件,以更好地了解它的不同产品。还应该注意的是,Bulma 缺乏 Bootstrap 提供的辅助功能,但 Bulma 会经常更新,并可能在未来版本中改进可访问性。

两者之间的另一个重要区别是Bootstrap集成了JavaScript,这是一种用于创建动态网站内容的脚本语言,而Bulma则没有。JavaScript 对于新的 Web 开发人员来说可能令人生畏。如果你还没有准备好学习一门新语言,Bulma可能是进入CSS框架的更友好的一步。虽然你不需要知道JavaScript来使用Bootstrap,但一些Bootstrap组件(如轮播和警报)需要它。

如何使用布尔玛CSS

说得够多了,让我们开始编码吧。在本节中,我将向您展示如何将Bulma添加到您的网站文件中,然后回顾Bulma的一些基本功能。

如何设置布尔玛

首先,我们需要让我们的HTML文件准备好使用Bulma框架。确保以下代码位于所有 HTML 文件的顶部:

 


<!DOCTYPE html>

 

接下来,将以下 <meta> 标记放在 HTML 文件的 <head> 部分中,以启用响应式元素:

 


<meta name="viewport" content="width=device-width, initial-scale=1">

 

现在您的 HTML 文件已准备就绪,您可以通过几种方式添加 Bulma 功能:

使用 NPM

要从 NPM 库安装 Bulma,请在终端中执行以下命令:

 


https://www.npmjs.com/

 

使用 Bulma CSS CDN

将以下代码放在 HTML 文件的 <head> 部分还可以访问 Bulma CSS 库:

 


<link rel="stylesheet" target="_blank" rel="noopener" href="https://cdn.jsdelivr.net/npm/Bulma@0.9.1/css/Bulma.min.css">

 

这是我稍后将用于示例的方法。

直接下载布尔玛文件

您也可以直接从布尔玛的网站下载必要的文件。下载后,打开软件包并在 HTML 文件中引用必要的 Bulma 文件。

如何编写布尔玛CSS

Bulma的语法基于HTML类。如果要设置页面元素的样式,只需在元素的 HTML 标记中添加一个或多个类。让我们先看看按钮组件的实际效果。

按钮

若要实现 Bulma 按钮,请将按钮类添加到 HTML <a>、<button>、<input type=“submit”> 或 <input type=“reset”> 元素:

Bulma 识别按钮类并应用一些基本样式以使其看起来不错。但是,我们可以做得更好。

除了基本元素类之外,Bulma 还具有为元素添加替代样式的修饰符类。修饰符类名以 is- 或 has- 开头,后跟样式。

让我们看看如何在按钮上使用修饰符,从 is rounded 类开始。这个修饰符类使我们按钮的角变圆:

修饰符类还会更改按钮的颜色和底纹:

正如您可能已经猜到的那样,我们可以对同一元素使用多个修饰符类。接下来,让我们为颜色应用一个修饰符类,以及一个名为 is-outline 的第二个修饰符类:

要添加更多详细信息,我们可以使用一些 has- 修饰符类来更改文本并填充按钮内部:

最后,我们可以使用几个修饰符类来控制按钮大小:

这只是您可以使用按钮执行的操作的开始 — 请参阅 Bulma 按钮文档以获取修饰符的完整列表等。

进度条

让我们看看 Bulma 库中另一个很酷的元素,进度条。要放置一个,请将 Bulma 类进度添加到 <progress> HTML 元素中:

与按钮一样,您也可以将修饰符类添加到进度条:

最终条形的运动效果是通过从标签中排除 value 属性来创建的。

用户输入

Bulma带有一组表单控件,用于收集用户提交信息的元素。这包括用于文本输入单选按钮、复选框选择下拉菜单的元素:

最后,我们将介绍 Bulma 列类,该类允许您创建根据容器宽度和页面上的列数调整大小的

列是网站格式不可或缺的一部分,但却是最难格式化的列之一,尤其是在适应不同窗口大小的方式中。如果我们将类附加到父 div,将类附加到每个子 div,Bulma 将为我们完成所有这些工作。

要设置不同的列宽,请尝试将 Bulma 的列宽修饰符之一添加到一个或多个子列元素中,其他列将自动调整其宽度。

同样,你可以用Bulma CSS中的列做更多的事情——这只是基础。有关所有可能性,请参阅列文档。

让框架完成工作

在现有的CSS知识之上学习CSS框架在短期内似乎是额外的工作。但是,您花在学习和实践前端开发上的时间越多,您就越会体会到 Bulma 等工具的好处。

Bulma并不是适合所有人的最佳CSS框架,因此最好评估其他选项,例如前面提到的Bootstrap CSS,看看哪个选项更适合您的风格。无论您选择哪种框架,我敢打赌,这都比浪费时间尝试在没有框架的情况下设计梦想中的网站要好。


*必填

您好,访客!有什么新鲜事想告诉大家?

点击按钮快速添加回复内容: 高兴 支持 激动 给力 加油 生气 路过 威武
发表
暂时还没评论,等你发挥!