CSS变量
Dart Sass
弹性盒子
模块化
开源
响应式
免费
宫格
颜色自动匹配
骨架屏
主题
用了这个CSS库，工作也没那么枯燥了
Avatar of Per Axbom Per Axbom
Bulma的CSS库确实体验很好
Avatar of Alejandro Barrera A. Alejandro Barrera A.
五分钟就可以快速上手了，真是个神器！
Avatar of Jamie Jamie
我确实喜欢上BULMA了
Avatar of Jesse Schoff Jesse Schoff
我们一直在使用THOMAS的CSS库
Avatar of Infinity Search Infinity Search
使用BULMA让我能够更轻松的创建网页
Avatar of Bruh Bruh
下载

卜马 BULMA
美观 / 易用 / 兼容

开源免费的纯CSS库，开箱即用前端组件，灵活的响应式网页。

零基础也可快速入门!
了解更多 下载
CSS变量
Dart Sass
弹性盒子
模块化
开源
响应式
宫格

100% 响应式

移动端优先设计原则

美观

弹性盒 + 宫格 + CSS变量

易用

下载 + 定制 + 个性化

免费

GitHub开源应用

卜马社区

开发者经验经验交流和分享
了解更多
卜马社区 前端开发者论坛
Bulma 专为响应式而生！

移动端优先的CSS框架，极简使用 CSS 语法，轻松搭建适配不同屏幕的界面；模块化 sass 文件按需引入，减少开发项目的打包占用空间；数十个基础组件经典且美观，没有任何 Javascript 代码；预先定义好的组件集合，开发者只需要在 HTML 代码上调用即可!

助力更高效开发美观的UI页面！

【易东云网络】 技术支持

也许是最简单的栅格系统

只需简单的插入，宽度将会自适应
了解更多

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>

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.

零基础也可快速上手

仅需几分钟即可建立一个CSS的样例
了解更多

button

Button

button is-primary

Button

button is-primary is-large

Button

button is-primary is-large is-loading

Button

个性化定制

通过简单的配置Sass变量满足个性化场景
了解更多 
@use "sass:color";

// Set your brand colors
$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
);

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

Before

Bulma

基于 Flexbox的CSS框架

Primary Link

After

Bulma

基于 Flexbox的CSS框架

Primary Link

无需JavaScript基础也可上手

纯CSS, 无缝兼容任何的JS环境
了解更多

深色模式

自动选择深色模式
了解更多

Bulma

基于Flexbox弹性盒子的CSS框架

修改已保存
保存 取消 
<div data-theme="dark">
  <h1 class="title">Bulma</h1>

  <p class="subtitle">
    基于<a href="https://bulma.io">Flexbox</a>弹性盒子的CSS框架
  </p>

  <div class="message is-success">
    <div class="message-body">
      修改已保存
    </div>
  </div>

  <div class="field">
    <input class="input" type="text" placeholder="你的姓名">
  </div>

  <div class="field">
    <div class="select">
      <select><option>下拉菜单</option></select>
    </div>
  </div>

  <div class="buttons">
    <a class="button is-link is-soft">保存</a>
    <a class="button is-danger is-soft">取消</a>
  </div>
</div>

作品展示

开发者的页面案例
了解更多

使用体验

来自开发者社区的评论
了解更多

致谢赞助者

你们是BULMA持续发展的动力
了解更多

更多开发伙伴

成为20,000开发者中的一员

回到首页 贡献代码

赞助

One-time donation

Visit our Sponsors

Monthly donation

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