快速提示：如何使用布尔玛构建博客布局

daique1908

于 2020-07-09 09:35:17 发布

阅读量398

点赞数

文章标签： java css python html 编程语言

在此快速提示中，我们将使用Jeremy Thomas流行的基于FlexboxCSS框架Bulma来构建响应式博客布局。

与往常一样，要初步了解我们将要创建的内容，请查看相关的Codepen演示（请查看较大的版本以获得更好的体验）：

布尔玛入门

Bulma只需要一个CSS文件。您可以通过程序包管理器（例如npm ）或CDN（例如cdnjs ）访问其GitHub页面来获取该文件的副本。

对于本教程，我们将选择最后一个选项。因此，我们在HTML文档的<head>中放置一个指向所需文件的链接：

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

现在，我们准备开始构建博客布局！

建立版面

我们的网格将具有最大宽度，并将水平居中。为此，我们使用Bulma的section和container帮助器类：

<section class="section">
  <div class="container">
    <!-- grid here -->
  </div>
</section>

在小屏幕上，所有文章都应垂直堆叠，如下所示：

默认情况下，布尔玛（Bulma）设计为移动优先，在769px的视口宽度下，文章彼此上下放置。我们要做的就是在视口超过768px时构建博客布局。

为此，我们只需要一个元素： tile 。稍后您将看到，诀窍是嵌套多个tile元素。

考虑到这一点，让我们仔细查看所需的桌面布局。从以下可视化图中可以看到，它包括三行：

对于每一行，布尔玛至少期望以下嵌套层次结构：

tile is-ancestor
|
└───tile is-parent
    |
    └───tile is-child

让我们解释一下：

我们从包含所有其他图块的顶层图块开始。
在其中，我们添加在水平轴上分布的图块。另外，基于十二列网格，我们可以为这些元素设置特定的宽度。这可以通过使用is-*类（其中*是1到12之间的数字）来实现。例如，具有is-6类的图块将占据水平空间的50％。
要垂直堆叠图块，我们使用is-vertical类。
一旦我们想向图块添加内容，就将is-child类分配给它，并将is-parent类分配给父tile。

至此，我们准备将这一理论付诸实践。

第一行包含三列。第一和第三列占据该行宽度的四分之一，而第二列占据该行宽度的一半。此外，第三列由两个子列组成。

根据我们上面讨论的内容，这是必需的标记：

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child green post">
      <!-- content here -->
    </article>
  </div>

  <div class="tile is-6 is-parent">
    <article class="tile is-child pink post">
      <!-- content here -->
    </article>
  </div>

  <div class="tile is-vertical is-parent">
    <article class="tile is-child blue post">
      <!-- content here -->
    </article>
    <article class="tile is-child gold post">
      <!-- content here -->
    </article>
  </div>
</div>

注意，我们仅通过is-6类为第二列定义了特定的宽度。当然，如果需要，我们也可以将is-3类添加到第一列和第三列。但这不是必需的，因为两列都增长（它们都有flex-grow: 1 ）来共享剩余的水平空间。

此外，仅出于样式目的，我们为每篇文章分配了一些自定义类。为了简单起见，我们忽略了文章的内容。

与第一行相似，第二行包含三列。第一个占行宽度的一半，而第二个和第三个占行宽度的四分之一。此外，第二列包括两个子列。

这是相关的标记：

<div class="tile is-ancestor">
  <div class="tile is-6 is-parent">
    <article class="tile is-child gray post">
      <!-- content here -->
    </article>
  </div>

  <div class="tile is-vertical is-parent">
    <article class="tile is-child blue post">
      <!-- content here -->
    </article>
    <article class="tile is-child gold post">
      <!-- content here -->
    </article>
  </div>

  <div class="tile is-parent">
    <article class="tile is-child red post">
      <!-- content here -->
    </article>
  </div>
</div>

第3行

第三行比较复杂。这里我们有两列。第一个是第二个的两倍。在第一列中，我们有两个子行。第一个子行包含三个相等大小的列，而第二个子行包含两个相等大小的列。

这种情况的标记如下：

<div class="tile is-ancestor">
  <div class="tile is-8 is-vertical">
  
    <div class="tile">
      <div class="tile is-parent">
        <article class="tile is-child blue post">
          <!-- content here -->      
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child gray post">
          <!-- content here -->      
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child red post">
          <!-- content here -->      
        </article>
      </div>
    </div>
    
    <div class="tile">
      <div class="tile is-parent">
        <article class="tile is-child pink post">
          <!-- content here -->      
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child gold post">
          <!-- content here -->      
        </article>
      </div>
    </div>
    
  </div><!-- /is-8 -->
  
  <div class="tile is-parent">
    <article class="tile is-child green post">
      <!-- content here -->
    </article>
  </div>
    
</div>

从上面的代码中您将看到，嵌套的层次结构如下所示：

tile is-ancestor
|
├───tile is-8 is-vertical
|   |
|   ├───tile /*Extra class for IE*/
|   |   |
|   |   ├───tile is-parent
|   |   |   └───tile is-child
|   |   |
|   |   ├───tile is-parent
|   |   |   └───tile is-child
|   |   |
|   |   └───tile is-parent
|   |       └───tile is-child
|   |
|   └───tile /*Extra class for IE*/
|       |
|       ├───tile is-parent
|       |   └───tile is-child
|       |
|       └───tile is-parent
|           └───tile is-child
|
└───tile is-parent
    └───tile is-child

如果您想更好地了解tile元素的工作原理，请务必查看文档并使用您喜欢的浏览器的开发人员工具检查关联的类。

浏览器支持

如今，Flexbox确实提供了强大的支持，因此我们的博客布局应可在所有现代浏览器中使用。

但是，当我在不同的浏览器中测试该页面时，我发现IE 11无法产生理想的结果。这是我所看到的：

另一方面，在Microsoft Edge进行测试时，我没有遇到这些问题。也许这是IE最新版本的某种错误。无论如何，我试图查看是否有任何快速解决方案可以避免这些问题。

我通过将flex-basis: auto添加到文章和第三行的is-vertical磁贴的顶层磁贴中来解决了这一问题（请参见前面的层次结构）。

同样，这是一个快速解决方案，似乎可以用于此特定示例。对于您自己的实现，您可能必须在代码中进行其他一些更改。

结论

在这个快速提示中，我们学习了如何使用Bulma构建响应式博客网格， Bulma是在Flexbox之上构建的框架。

您是否曾在任何项目中尝试过布尔玛？你怎么看呢？在下面的评论中分享您的经验。

翻译自: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-build-a-blog-layout-with-bulma--cms-28091

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速提示：如何使用布尔玛构建博客布局

在这个快速提示中，我们将使用Jeremy Thomas流行的基于FlexboxCSS框架Bulma来构建响应式博客布局。和往常一样，要初步了解我们将要创建的内容，请查看相关的Codepen演示（请查看较大的版本以获得更好的体验）：布尔玛入门 Bulma只需要一个CSS文件。您可以通过程序包管理器（例如npm ）或CDN（例如cdnjs ）访问其GitHub页面来获取该文件的副本。...
复制链接

扫一扫