Bulma: 现代化的CSS框架

Bulma是一个免费、开源的CSS框架,它提供了易于使用的前端的组件,您可以轻松地组合这些组件来构建响应式Web界面。

无需懂得CSS
npm install bulma

The simplest grid system

Just add columns, they will resize themselves
See columns docs
<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>

提示

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.

So easy to learn

Get a design started within minutes
See modifiers syntax

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
See customization docs
// 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, 可集成经任何JS环境
See installation docs

Beautified by everyone

See what Bulma developers are building
Visit the expo

Loved by the community

See what Bulma fans are tweeting
See more love

还有 更多

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

码农网