Bulma 布局完整参考

Bulma 是一个基于 Flexbox 并且具备响应式设计的 CSS 框架，可以快速构建现代化的网页布局。Bulma 的优点包括易于使用、可自定义性高以及跨浏览器兼容性强等。在本文中，我们将介绍 Bulma 的主要布局类及使用示例。

安装 Bulma

首先，我们需要使用 npm 或者 yarn 安装 Bulma。

npm install bulma

# 或者

yarn add bulma

然后在 HTML 文件的头部引入 Bulma：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">

使用 Bulma

与其他 CSS 框架类似，Bulma 的布局类主要是基于 HTML 元素的 class 属性实现的。在本节中，我们将介绍几个常用的布局类及其用法。

容器

容器类用于包含你的网页内容，默认情况下具有 max-width 和居中的样式。

<div class="container">
  <!-- 网页内容 -->
</div>

栅格系统

Bulma 的栅格系统采用了 Flexbox 布局，可以快速构建网页中的列布局。

列布局

列布局通常被用于将网页内容按行排列。

<div class="columns">
  <div class="column">
    <!-- 网页内容 -->
  </div>
  <div class="column">
    <!-- 网页内容 -->
  </div>
  <div class="column">
    <!-- 网页内容 -->
  </div>
</div>

带缩进的列布局

可以使用 is-offset-* 类为列布局添加左侧缩进。

<div class="columns">
  <div class="column is-8 is-offset-2">
    <!-- 网页内容 -->
  </div>
</div>

响应式列布局

可以使用以下类来实现响应式的列布局：

• is-mobile
• is-tablet
• is-desktop
• is-widescreen
• is-fullhd

<div class="columns is-mobile">
  <div class="column">
    <!-- 网页内容 -->
  </div>
  <div class="column">
    <!-- 网页内容 -->
  </div>
  <div class="column">
    <!-- 网页内容 -->
  </div>
</div>

<div class="columns is-desktop">
  <div class="column is-8">
    <!-- 网页内容 -->
  </div>
  <div class="column is-4">
    <!-- 网页内容 -->
  </div>
</div>

布局元素

可以使用以下类来实现布局元素：

• box：带边框和阴影的盒子
• notification：通知框
• tag：标签
• button：按钮
• icon：图标

<div class="box">
  <!-- 网页内容 -->
</div>

<div class="notification is-warning">
  <!-- 网页内容 -->
</div>

<span class="tag is-info">标签</span>

<button class="button is-primary">按钮</button>

<span class="icon">
  <i class="fas fa-user"></i>
</span>

导航栏

可以使用以下类来实现导航栏：

• navbar
• navbar-brand
• navbar-item
• navbar-menu
• navbar-start
• navbar-end

<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="https://bulma.io/images/bulma-logo-white.png" alt="logo">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#">首页</a>
      <a class="navbar-item" href="#">博客</a>
      <a class="navbar-item" href="#">联系我们</a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary" href="#">登录</a>
          <a class="button is-light" href="#">注册</a>
        </div>
      </div>
    </div>
  </div>
</nav>

总结

本文介绍了 Bulma 的主要布局类及使用示例，包括容器、栅格系统、布局元素和导航栏。Bulma 是一个非常优秀的 CSS 框架，易于使用、可自定义性高以及跨浏览器兼容性强。使用 Bulma 可以快速构建现代化的网页布局。