Bulma 是一个基于 Flexbox 构建的免费、开源的 CSS 框架,已经有超过200,000开发者在使用。

npm install bulmacopy

视频来自 Vue Mastery

最简单的 网格系统

只需要增加列,他们就会自己调整大小

Better on desktop

This interactive tool works better on larger screens! That's because Bulma columns are vertical by default. I recommend revisiting this page later when you're on desktop. 😉

1

2

3

4

5

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

Info

While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
If you want smaller divisions, you can always nest columns.

A large community

See what Bulma fans are saying

So easy to learn

Get a design started within minutes

button

Button

button is-primary

Button

button is-primary is-large

Button

button is-primary is-large is-loading

Button

So quick to customize

Simply set your own Sass variables before importing Bulma

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;

// Update some of Bulma's component variables
$control-border-width: 2px;
$input-background-color: $beige-lighter;
$input-border-color: transparent;
$input-shadow: none;

// Import the rest of Bulma
@import "../path/to/bulma";

Before

Bulma

基于Flexbox的现代博客框架

After

Bulma

Modern CSS framework based on Flexbox


不需要 JavaScript

仅仅CSS, 可以方便的集成进任何JavaScript环境

Fullscreen vertical centering

Include any content you want, it's always centered

And so much more

Join more than 200,000 developers

Newsletter

Features, releases, showcase… stay in the loop!