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

2023-01-04 小编

在你尝试自己建立一个网站之前，很难完全欣赏进入网站的所有内容。在这篇文章中，您将发现 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，看看哪个选项更适合您的风格。无论您选择哪种框架，我敢打赌，这都比浪费时间尝试在没有框架的情况下设计梦想中的网站要好。

1.由于本网站资源是网络搜集整理而成，版权均归原作者所有。本站仅提供一个观摩学习的环境，将不对任何资源负法律责任。

2.若无意中侵犯到您的版权利益，请来信联系我们，我们会在收到信息后会尽快给予处理！

3.本站为纯属分享资源站点，网站内所有资源仅供学习交流之用，请勿用作商业用途，并请于下载后24小时内删除，谢谢。

4.如有转发本站上的资源，请出转载说明，来源于今日网址导航：https://www.webtoday.cn/，谢谢合作。

本文地址：https://www.webtoday.cn/news/508.html