bulma.css_在5分钟内学习Bulma CSS-初学者教程

bulma.css

Bulma is a simple, elegant, and modern CSS framework that a lot of developers prefer over Bootstrap. Personally, I think Bulma has a better design by default, and it also feels more light-weight.

Bulma是一个简单，优雅，现代CSS框架，许多开发人员都喜欢Bootstrap。 就个人而言，我认为布尔玛默认情况下具有更好的设计，而且感觉也更轻巧。

In this tutorial, I’ll give you a super quick introduction to the library.

在本教程中，我将为您提供对该库的超快速入门。

We’ve also created a free Bulma course. Click here to check it out!

我们还创建了免费的布尔玛课程。 点击这里查看！

设置 (The setup)

Setting up Bulma is super easy, and you can do it in several different ways, whether you prefer NPM, downloading it directly from the docs, or using a CDN. We’re just going to link to a CDN from our HTML file, like this:

设置Bulma非常容易，您可以通过几种不同的方式进行设置，无论您是喜欢NPM还是直接从文档中下载它，或者使用CDN都可以 。 我们将链接到HTML文件中的CDN，如下所示：

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

This will give us access to the Bulma classes. And that’s actually all Bulma is - a collection of classes.

这将使我们能够访问布尔马类。 这实际上就是布尔玛的全部内容-类的集合。

修饰符 (Modifiers)

The first thing you should learn about Bulma is the modifier classes. These allow you to set alternative styles to almost all of the Bulma elements. They all start with is-* or has-*, and then you replace the * with the style you want.

您应该了解布尔玛的第一件事是修饰符类。 这些使您可以为几乎所有布尔玛元素设置替代样式。 它们都以is-*或has-*开头，然后将*替换为所需的样式。

To understand this concept properly, let’s start off by looking at buttons.

为了正确理解这个概念，让我们先看一下按钮。

纽扣 (Buttons)

To turn a normal button into a Bulma button, we’ll simply give it the class of button.

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

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

Which results in the following style:

结果为以下样式：

As you can see, it has a nice flat design by default. To change the styling, we’ll use Bulma modifiers. Let’s start off by making the button bigger, green, and with rounded corners:

如您所见，默认情况下它具有不错的平面设计。 要更改样式，我们将使用布尔玛修饰符。 让我们先将按钮变大，变绿并带有圆角：

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

This result is a pleasant-looking button:

结果是一个令人愉悦的按钮：

You can also use modifiers to control the state of buttons. Let’s, for example, add the class is-focused, which adds a border around it:

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

Finally, let’s also use one of the has-* modifiers. These typically control what’s inside the element. In our case, the text. Let’s add has-text-weight-bold.

最后，我们还使用has-*修饰符之一。 这些通常控制元素内部的内容。 在我们的例子中，文字。 让我们添加has-text-weight-bold 。

Here’s the result:

结果如下：

I’d recommend that you play around with combinations of the various classes in order to understand how flexible this system is. The combinations are almost endless. Check out the buttons section in the docs for more info.

我建议您尝试各种类的组合，以了解该系统的灵活性。 组合几乎是无止境的。 查看文档中的按钮部分以获取更多信息。

列 (Columns)

At the core of any CSS framework is how they solve columns, as that’s relevant for almost every website you’ll ever build. Bulma is based on Flexbox, so it’s really simple to create columns. Let’s create a row with four columns.

任何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>

First, we’re creating a container <div> with a class of columns, and then we give each of the children a class of column. It results in the following:

首先，我们创建一个具有一columns的容器<div> ，然后为每个子级提供一个column类。 结果如下：

I’ve also added a border around the columns to make them more apparent.

我还在列周围添加了边框，使它们更加明显。

Note that you can add as many columns as you want. Flexbox takes care of dividing the space up equally between them.

请注意，您可以根据需要添加任意多的列。 Flexbox负责将它们之间的空间平均分配。

To give the columns colours, we can replace the text inside them with a <p> tag, and give it the notification class and an is-* modifier. Like this for example:

为了给列提供颜色，我们可以用<p>标记替换其中的文本，并为其指定notification类和一个is-*修饰符。 例如：

First column

第一栏

Let’s do this using the is-info, is-success, is-warning and is-danger modifiers, which results in the following:

让我们使用is-info ， is-success ， is-warning和is-danger修饰符进行操作，结果如下：

The notification class is actually meant for alerting users about something, as it allows you to fill the background with a colour using the is-* modifiers. Here it works well for separating the columns.

notification类实际上是用于向用户notification警告，因为它允许您使用is-*修饰符为背景填充颜色。 在这里，它很好地用于分离列。

We can also easily control the width of a column. Let’s add the is-half modifier to the green column.

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

<div class="column is-half">

Which results in the second column now occupying half the width, while the three other takes up a third of the remaining half each.

这导致第二列现在占据宽度的一半，而其他三列则占据其余一半的三分之一。

Here are the options you can use for controlling the width of columns:

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

• is-three-quarters

  is-three-quarters

• is-two-thirds

  is-two-thirds

• is-half

  is-half

• is-one-third

  is-one-third

• is-one-quarter

  is-one-quarter

• is-four-fifths

  is-four-fifths

• is-three-fifths

  is-three-fifths

• is-two-fifths

  is-two-fifths

• is-one-fifth

  is-one-fifth

英雄 (Hero)

Finally, let’s also learn how to create a hero in Bulma. We’ll use the semantic <section>, and give it a class of hero and is-info to give it some colour. We also need to add a <div> child with the class hero-body.

最后，我们还学习如何在布尔玛创造英雄。 我们将使用语义<section> ，并给它提供一个hero和is-info来为其赋予颜色。 我们还需要添加一个带有class hero-body的<div>子代。

<section class="hero is-success">

In order to make this hero do something meaningful, we’re going to add a container element inside the body and add a title and subtitle.

为了使这位英雄做点有意义的事情，我们将在正文中添加一个容器元素，并添加标题和副标题。

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

Now it’s starting to look good! If we want it to be bigger, we can simply add is-medium on the <section> tag itself.

现在开始看起来不错！ 如果我们希望它更大，我们可以简单地在<section>标签本身上添加is-medium 。

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

And that’s it!

就是这样！

You’ve now gotten a basic taste of how Bulma works. And the best part is, the rest of the library is as intuitive and easy as the concepts you’ve seen up until now. So if you understand this, you’ll understand the rest of it without trouble.

您现在已经基本了解了布尔玛的工作方式。 最好的部分是，库的其余部分与您到目前为止所看到的概念一样直观且容易。 因此，如果您了解这一点，那么您将毫无困难地了解其余内容。

Be sure to check out the free Bulma course on Scrimba if you want to learn more!

如果您想了解更多信息，请务必在Scrimba上查看免费的布尔玛课程 ！

---

---

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！ 我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营 。

翻译自: https://www.freecodecamp.org/news/learn-bulma-in-5-minutes-ec5188c53e83/

bulma.css