bulma.css_如何建立一个？ Bulma CSS的自适应博客设计

bulma.css

by ZAYDEK

由ZAYDEK

oo (Ooooooh)

如何建立一个？ Bulma CSS的自适应博客设计 (How To Build A ? Responsive Blog Design With Bulma CSS)

谢谢，布尔玛！ (?‍‍ Thanks, Bulma!)

Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks! And now, back to our regular scheduled programming.

在开始阅读本文之前，我只想分享我正在开发的产品，并且我希望收集一些有关如何更好地为Web开发人员提供服务的数据。 在阅读本文之前或之后，我创建了一个简短的问卷调查表以进行检查。 请检查一下-谢谢！ 现在，回到我们的常规计划编程。

您好，互联网！ (Hello internet!)

I’m here to disabuse you of the belief that building websites has to be hard. Furthermore, in mere minutes we mere mortals will learn how to build a beautiful and(!) responsive blog design using Bulma.

我在这里使您不相信建立网站一定很困难。 此外，在短短的几分钟内，我们凡人将学习如何使用Bulma构建美观且响应Swift的博客设计。

布尔玛？ Bulma是CSS框架，是@jgthms的创意。 ？ (Bulma?! Bulma is a CSS framework and brainchild of @jgthms. ?)

我还在Scrimba.com上教授了免费的布尔玛CSS全长课程，我们在其中构建这些️？ 设计。 点击此处免费注册！ ？ (I also taught a free, full-length Bulma CSS course on Scrimba.com, where we build these ️? designs. Click here to enroll for free! ?)

Scrimba.com是面向前端开发人员的下一代平台，可以将其网站记录和共享为交互式截屏视频！ ？ (Scrimba.com is a next-generation platform for front-end developers to record and share their websites as interactive screencasts! ?)

布尔玛？ ¯\ _(ツ)_ /¯ (Bulma? ¯\_(ツ)_/¯)

Bulma solves a lot of problems—a lot. Whether you need a visual component, or you want to understand how a component might be codified, with best practices and best-in-class documentation, Bulma’s here to help! ?‍?

布尔玛解决了很多问题，很多。 无论您是需要视觉组件，还是想了解如何使用最佳实践和一流的文档来编写组件 ，布尔玛都将在这里为您提供帮助！ ‍

Bulma’s not even version 1.0, and has major adoption with 150K+ downloads a month and 26K+ stars on GitHub. Think of Bulma as a competitor to Bootstrap, despite the fact that it’s *just* CSS. ? Look ma, no YavaScript!

Bulma的版本甚至不是1.0，并且已被广泛采用，每月有150K +的下载量 ，在GitHub上有26K +的星级 。 尽管Bulma只是CSS，但可以将Bulma视为Bootstrap的竞争对手。 ？ 看吧，没有Y avaScript！

布尔玛如何运作？ (How does Bulma work?)

Bulma uses several techniques to create a cohesive interface for developers. We need just be concerned with describing our website’s design using semantic classes — not elements — or in other words, idiomatic templates.

Bulma使用多种技术来为开发人员创建一个紧密的接口。 我们只需要关心使用语义类(而不是元素)或惯用模板来描述我们网站的设计。

These semantic templates can be thought of as interconnecting building-blocks we use to build websites fast! ⚡️ These components are also responsive out-of-the-box, meaning we can focus more on our content than the code.

这些语义模板可以被认为是我们用来快速构建网站的相互联系的构建模块！ ⚡️这些组件也具有开箱即用的响应能力，这意味着我们可以比代码更专注于我们的内容。

困惑？ 开始吗？ ^ h 埃雷首先学习布尔玛的基本面。 (Confused? Start ? here to first learn the fundamentals of Bulma.)

那个怎么样 ？ 设计？ (What about that ? design?)

This design can be better understood as three parts:

此设计可以更好地理解为三个 部分 ：

☝️CSS Grid✌️ Bulma components? Content

CSS️CSS网格 ✌️布尔玛组件 ？ 内容

The CSS Grid spec is how we’re going to create a custom responsive design, where Bulma components give us useful templates and sections to compartmentalize our content, and content is…our content, of course! ?

CSS Grid规范是我们如何创建自定义响应设计的方式，其中布尔玛组件为我们提供了有用的模板和部分来分隔内容，而内容当然是我们的内容！ ？

CSS️CSS网格 (☝️ CSS Grid)

Despite that Bulma is responsive out-of-the-box, we’re going to instead opt for CSS Grid so that we maintain complete control of the responsive design. Afraid? Don’t be! Here’s a secret; it’s just 8 lines of human-readable code! ?

尽管Bulma开箱即用，但我们将选择CSS Grid，以便我们对响应式设计保持完全控制。 害怕？ 不用了 这是一个秘密； 这只是8行可读代码！ ？

It goes like this: we create an opt-in .grid class for general-use, wherefore specific circumstances, where we want our content to stand out and be wider, we create a special .grid-xl class we can use on a per-element basis:

它是这样的：我们创建了一个通用的.grid类，因此在特定的情况下，我们希望我们的内容脱颖而出并且更广泛，我们创建了一个特殊的.grid-xl类，可以在每个-元素基础：

First, we template a responsive 5-column grid with identifiers xl and md. Then we tell .grid * to span the md column, e.g. the content column, and .grid-xl to span columns xl, e.g. all columns. ?️

首先，我们用标识符xl和md模板化一个响应式5列网格。 然后，我们告诉.grid *跨越md列(例如，内容列) .grid-xl跨越第xl列(例如，所有列)。 ️️

Now, imagine creating various .grid-sm, .grid-lg, and etc. classes to extend different caveat widths. Think about it…this isn’t just concise or cool, it’s 100% modern responsive design. Look ma, no media queries!

现在，想象创建各种.grid-sm ， .grid-lg等类以扩展不同的警告宽度。 考虑一下……这不只是简洁或时尚，而是100％现代的响应式设计。 瞧，没有媒体查询！

困惑？ 您可以了解有关CSS Grid的更多信息吗？ ^ h 埃雷每！ (Confused? You can learn more about CSS Grid ? here with Per!)

B️布尔玛组件 (✌️ Bulma components)

Bulma components are at the core of our design. Despite that it can be fun, we don’t have to write CSS from *scratch* to create a beautiful design. Instead, we can lean into successful frameworks to arbitrate components.

布尔玛组件是我们设计的核心。 尽管它可能很有趣，但是我们不必从头开始编写CSS即可创建漂亮的设计。 相反，我们可以依靠成功的框架来仲裁组件。

Now, because Bulma can be terse or difficult to understand at first blush, ? I’ve recreated the design using ASCII art to demonstrate how we might model the design using different Bulma components:

现在，因为布尔玛乍一看可能会显得简洁或难以理解， 我已经使用ASCII艺术重新创建了设计，以演示如何使用不同的布尔玛组件对设计进行建模：

The truth is, Bulma is more terse, but that’s understandable given it’s HTML. Note I’m also obfuscating a few details to better emphasize how Bulma works. You can, however, view this interactive screencast to see the full code. ?

事实是，布尔玛(Bulma)更简洁，但考虑到它是HTML，这是可以理解的。 请注意，我也混淆了一些细节，以更好地强调布尔玛的工作方式。 但是，您可以查看此交互式截屏视频以查看完整的代码。 ？

Take a second look; notice .container (.grid) and .columns (.grid-xl)? The first one, for example, would translate to <div class="container grid">. This is *how* we can interpolate our grid with Bulma’s components!

再看一眼； 注意.container (.grid)和.columns (.grid-xl)吗？ 例如，第一个将转换为<div class="container gri d”>。 这就是我们如何用布尔玛的组件对网格进行插值！

You can learn more about Bulma’s components ? here. In this blog design, we used section, container, breadcrumb, media, image, columns, and content. And, despite that I’ve obfuscated it, we used modifiers, too! ?

您可以了解有关布尔玛组件的更多信息吗？ 嗯 在这个博客设计中，我们使用了s 挠度， Ç ontainer， b readcrumb，米EDIA，我的法师， Ç olumns，和c ontent。 而且，尽管我对此感到困惑，但我们也使用了整流器 ！ ？

将HTML视为塑料，将CSS视为油漆，将布尔玛视为LEGO。 ？ (Think of HTML as plastic, CSS as paint, and Bulma as LEGO. ?)

？ 内容 (? Content)

As promised, last is the content of our website. Of which belongs inside our .content component. Remember I said Bulma relies on opt-in classes? Well––that’s 99% of the time; inside .content, Bulma applies CSS to:

如所承诺的，最后是我们网站的内容 。 其中属于我们的.content组件。 还记得我说布尔玛依赖选择参加课程吗？ 好吧–那是99％的时间； 在.content ，布尔玛将CSS应用于：

• p paragraphs• ul, ol, dl lists• h1 to h6 headings• blockquote quotes• em and strong• table, tr, th, td tables• etc.

• p段落• ul ， ol ， dl列表• h1到h6标题• blockquote报价• em和strong • table ， tr ， th ， td表• 等等。

And where Bulma shine️s ✨ is that .content can be paired with modifiers. These include .is-small, .is-medium, and .is-large to change .content’s children’s font-size! You can learn more about .content here.

Bulmashine️swhere的地方是.content可以与修饰符配对。 其中包括.is-small ， .is-medium和.is-large以更改.content的孩子的font-size ！ 您可以在此处了解更多有关.content 信息 。

恭喜！ 谢谢阅读！ 6(^ω^)9 (Congratz! Thanks for reading! 6(^ω^)9)

Now is a phenomenal time like no other to get into front-end development. With the introduction of CSS specs like Flexbox and CSS Grid, and frameworks like Bulma, building for the web has never been more accessible!

现在是进入前端开发的绝佳时机。 随着诸如Flexbox和CSS Grid之类CSS规范的引入，以及诸如Bulma之类的框架的引入，为网络构建提供了前所未有的便利！

喜欢这篇文章吗？ 就像这样还有另一篇文章！ 点击？ e！ (Like this article?! There’s one more article just like it! Click ? here!)

翻译自: https://www.freecodecamp.org/news/how-to-build-a-responsive-blog-design-with-bulma-css-c2257a17c16b/

bulma.css