Bulma -岩石教程

Bulma: A Modern CSS Framework

特点

基于Flexbox：所有布局均使用Flexbox构建，提供灵活且强大的响应式设计。
模块化设计：可按需引入组件，减少不必要的代码加载。
易于定制：通过Sass变量轻松自定义主题和样式。
无JavaScript依赖：专注于CSS，确保轻量级和快速加载。

使用场景

快速原型设计：简洁的语法和预定义样式使其非常适合快速创建网页原型。
企业级应用：灵活的响应式设计和模块化组件非常适合构建复杂的企业级应用程序。
博客和内容管理系统：其清晰的排版和内容样式使其非常适合内容丰富的网站。

安装方式

使用CDN：

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

使用NPM：
```
npm install bulma
```

使用示例

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
  <section class="hero is-primary">
    <div class="hero-body">
      <p class="title">
        Hello, Bulma!
      </p>
      <p class="subtitle">
        Modern CSS framework based on Flexbox
      </p>
    </div>
  </section>
</body>
</html>

常用API介绍

Columns：用于创建响应式列布局。

<div class="columns">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
</div>

Button：用于创建不同样式的按钮。

<button class="button is-primary">Primary button</button>
<button class="button is-link">Link button</button>

Form：用于表单元素的样式。

<div class="field">
  <label class="label">Name</label>
  <div class="control">
    <input class="input" type="text" placeholder="Text input">
  </div>
</div>

Navbar：用于创建响应式导航栏。

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>
  </div>
</nav>

高级用法

自定义主题：使用Sass变量来定制Bulma的颜色和其他样式属性。
```
$primary: #8A4D76;
$link: #FA7C91;

@import "bulma/bulma";
```

使用响应式网格系统： Bulma的网格系统基于Flexbox，可以轻松创建复杂的响应式布局。

<div class="columns is-mobile">
  <div class="column is-half">50%</div>
  <div class="column">Auto</div>
</div>

官方资料

Bulma官网
GitHub仓库 - 目前拥有47.3k颗星