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

npm install bulma复制

视频来自 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.

入门是如此 简单

分分钟开始你的设计

button

Button

button is-primary

Button

button is-primary is-large

Button

button is-primary is-large is-loading

Button

自定义是如此迅速

在导入Bulma之间简单的设置相关的Sass变量即可

// 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";

应用Bulma之前

Bulma

基于Flexbox的现代博客框架

应用Bulma之后

Bulma

基于Flexbox的现代博客框架


不需要 JavaScript

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

Fullscreen vertical centering

Include any content you want, it's always centered

还有 更多

超过 200,000 开发者在使用Bulma