5分钟学会Bulma CSS

Bulma 是一个简洁、优雅且现代的 CSS 框架，很多开发者都更喜欢它而不是 Bootstrap。就我个人而言，我认为 Bulma 的默认设计更好，而且也更轻量级。

在本教程中，我将为您快速介绍该库。

我们还制作了一门免费的Bulma课程。点击这里查看！

您可以点击图片进入课程。

设置

安装 Bulma 非常简单，你可以通过多种方式进行安装，例如使用NPM 、直接从文档下载或使用CDN。我们这里只在 HTML 文件中链接到 CDN，就像这样：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">

这将使我们能够访问布尔玛的课程。而布尔玛实际上就是一系列课程的集合。

修饰符

关于布尔玛，你首先应该了解的是修饰符类。这些修饰符类允许你为几乎所有布尔玛元素设置不同的样式。它们都以 `<bulma_style>`is-*或 `<bulma_style>`开头has-*，然后将 `<bulma_style>` 替换*为你想要的样式。

为了更好地理解这个概念，我们先来看看按钮。

按钮

要将普通按钮变成布尔玛按钮，我们只需给它添加类名button。

<button class="button">Click here</button>

由此产生了以下风格：

如您所见，它默认采用简洁的扁平化设计。要更改样式，我们将使用 Bulma 修饰符。首先，让我们把按钮放大、变成绿色，并添加圆角：

<button class="button **is-large is-success is-rounded**">Click here</button>

结果是一个外观漂亮的按钮：

您还可以使用修饰符来控制按钮的状态。例如，我们添加一个类is-focused，它会在按钮周围添加边框：

最后，我们再使用一个has-*修饰符。这些修饰符通常控制元素内部的内容。在本例中，就是文本。我们添加has-text-weight-bold.

结果如下：

我建议您尝试各种类的组合，以便了解这个系统的灵活性。组合方式几乎无穷无尽。更多信息请查看文档中的按钮部分。

列

任何 CSS 框架的核心都在于如何处理列，因为这几乎与你构建的每个网站都息息相关。Bulma 基于 Flexbox，因此创建列非常简单。让我们创建一个包含四列的行。

<div class="columns">  
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth column</div>
</div>

首先，我们创建一个<div>类名为 `<container>` 的容器columns，然后给每个子元素添加一个类名为 `<children>` 的元素column。结果如下：

我还给列添加了边框，使它们更加醒目。

请注意，您可以根据需要添加任意数量的列。Flexbox 会自动将空间平均分配到每一列中。

要给列添加颜色，我们可以将列中的文本替换为一个<p>标签，并为其添加notification类名和is-*修饰符。例如：

第一列

is-info让我们使用、is-success和is-warning修饰符来实现is-danger，结果如下：

这个notification类实际上是用来提醒用户某些信息的，因为它允许你使用修饰符为背景填充颜色is-*。在这里，它非常适合用来分隔列。

我们还可以轻松控制列的宽度。让我们is-half给绿色列添加这个修饰符。

<div class="column is-half">    

这样一来，第二列就占据了宽度的一半，而其他三列则各自占据了剩余一半宽度的三分之一。

以下是一些可用于控制列宽的选项：

• is-three-quarters
• is-two-thirds
• is-half
• is-one-third
• is-one-quarter
• is-four-fifths
• is-three-fifths
• is-two-fifths
• is-one-fifth

英雄

最后，我们来学习如何在布尔玛中创建一个英雄。我们将使用语义<section>，并给它添加一个类名hero，再给is-info它一些颜色。我们还需要添加一个<div>带有类名的子元素hero-body。

<section class="hero is-success">  

为了让这个英雄做一些有意义的事情，我们将在 body 元素内添加一个容器元素，并添加标题和副标题。

<div class="container">
  <h1 class="title">Primary title</h1>
  <h2 class="subtitle">Primary subtitle</h2>
</div>

现在看起来不错了！如果我们想让它更大一些，只需把is-medium标签加上<section>去就行了。

<section class="hero is-info is-medium">  ...</section>

就这样！

现在你已经对布尔玛的运作方式有了基本的了解。最棒的是，库的其余部分也像你目前为止接触到的概念一样直观易懂。所以，如果你理解了这部分，理解其余部分就轻而易举了。

如果你想了解更多，一定要去Scrimba上看看免费的Bulma课程！

感谢阅读！我叫佩尔，是Scrimba的联合创始人，我热爱帮助人们学习新技能。如果您想收到新文章和资源的通知，请在Twitter上关注我。