下载

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Password.link

迁移到新版v1.0

如何迁移到最新版本v1

Bulma的v1新版基于Dart Sass进行了彻底重构，在开发过程中尽可能做到平滑的过渡。 Bulma v1 is basically a full rewrite of the framework using Dart Sass, which is the primary implementation of Sass. While this affects a few development details, everything has been done to make the transition as easy as possible.

与之前相同的 #

All HTML snippets are the same. This means you don’t need to update your markup. This is important because it means, if you’re using Bulma straight “out of the box”, you don’t need to change anything.

You can just swap bulma@0.9.4/css/bulma.min.css with bulma@1.0.0/css/bulma.min.css and everything will work. Things will look slightly different, but they will still work.

产生变化的 #

  • Dart Sass is used to build Bulma
    • if you use the sass npm package, you’re already using Dart Sass
  • CSS Variables are used instead of literals: color: var(--bulma-primary); instead of color: hsl(171deg, 100%, 41%);, which means you can customize Bulma with CSS only (without using Sass)
  • Customization by setting your own value for Sass variables works differently. See how to customize Bulma with Sass.

新功能 #

  • The notion of Themes is introduced: a theme is a collection of CSS variables within a context, and is the best approach to customize Bulma
  • As a result, a Theme for Dark Mode is included
  • Color Palettes are created for each of the 7 primary colors
  • Skeleton loaders exist as standalone components but also as variants of other components
  • You can add a prefix to all your Bulma classes so that .button becomes .my-prefix-button

差异调整 #

⛔️ 不支持的 ✅ 如何修正

不支持拼接图TILES

<!-- Before -->
<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child box">
      <p class="title">Hello World</p>
      <p class="subtitle">What is up?</p>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child box">
      <p class="title">Foo</p>
      <p class="subtitle">Bar</p>
    </article>
  </div>
</div>

使用Smart Grid实现

<!-- After -->
<div class="grid">
  <div class="cell">
    <article class="box">
      <p class="title">Hello World</p>
      <p class="subtitle">What is up?</p>
    </article>
  </div>
  <div class="cell">
    <article class="box">
      <p class="title">Foo</p>
      <p class="subtitle">Bar</p>
    </article>
  </div>
</div>

建议不再使用@import

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

使用Dart Sass的关键词 @use和@forward来实现

// After
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Path to Bulma's sass folder
@use "path/to/bulma/sass" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-h: color.hue($beige-lighter),
  $input-s: color.saturation($beige-lighter),
  $input-background-l: color.lightness($beige-lighter),
  $input-border-l: color.lightness($beige-lighter),
  $input-shadow: none
);

赞助

One-time donation

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#