仅限 Bulma Container 宽屏或全高清

Bulma 是一款基于 Flexbox 的现代 CSS 框架，它提供了丰富的样式和布局组件，帮助开发者快速搭建现代 Web 应用程序。Bulma 的容器组件 Container，可以设置不同的宽度和响应式表现。其中，宽屏和全高清（Full HD）是它的两个重要宽度变体。

Bulma Container 概述

在 Bulma 中，Container 是一个最基础的布局组件，它将包含在其内部的其他元素（比如行 Row 和列 Column）居中，并设置一定的间距和边距。默认情况下，Container 的宽度是固定的，但是可以通过调整组件类名来实现不同的宽度和相应式表现，其中包括：

• container - 默认宽度容器，宽度为固定值
• is-widescreen - 适用于大屏幕设备的容器，宽度为固定值
• is-fullhd - 适用于全高清（Full HD）设备的容器，宽度为固定值

下面是一个简单的示例，展示了如何使用 Container，Row 和 Column 创建一个网格系统：

<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column">
        <p class="has-text-centered">
          <i class="fas fa-laptop fa-5x"></i>
        </p>
        <p class="title is-3 has-text-centered">
          Responsive
        </p>
        <p class="subtitle has-text-centered">
          Bulma is designed to be responsive from mobile to desktop.
        </p>
      </div>
      <div class="column">
        <p class="has-text-centered">
          <i class="fas fa-heart fa-5x"></i>
        </p>
        <p class="title is-3 has-text-centered">
          Open Source
        </p>
        <p class="subtitle has-text-centered">
          Bulma is an open source project hosted on GitHub.
        </p>
      </div>
      <div class="column">
        <p class="has-text-centered">
          <i class="fas fa-expand fa-5x"></i>
        </p>
        <p class="title is-3 has-text-centered">
          Flexible
        </p>
        <p class="subtitle has-text-centered">
          Bulma can be easily customized with CSS variables and utilities.
        </p>
      </div>
    </div>
  </div>
</section>

上述示例中，我们创建了一个 Section，它包含一个 Container。Container 中有一个 Columns 元素，其中包含了三个 Column。在移动设备上时，这三个 Column 会依次排列；在较大的设备上时，它们会并排显示，但是宽度和纵向间距会随着设备的宽度而变化。

Bulma Container 宽屏和全高清

Bulma 的宽度变体为开发者提供了更多选择，可以从容器的宽度中获取更多的空间。其中，Widescreen 和 Full HD 是两个最常见的变体。

Widescreen 容器的宽度为 1140 像素，适用于较大的设备（如笔记本电脑和台式机）：

<div class="container is-widescreen">
  <!-- Content goes here -->
</div>

Full HD 容器的宽度为 1344 像素，适用于全高清（Full HD）设备：

<div class="container is-fullhd">
  <!-- Content goes here -->
</div>

总结

Bulma Container 是 Bulma 框架的基础布局组件，提供了不同的宽度和响应式表现。通过使用容器的不同变体，开发者可以轻松地创建适合不同设备的网站布局。如果您想了解更多关于 Bulma 的信息，可以查看其官方文档。