Bulma 速查表 | Cheat Sheet

本文根据 Devhints / Bulma 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2018-11-19。

Screen 尺寸

         768         1024                1216         1408
'     '     '     '     '     '     '     '     '     '     '     '
<---------^------------^------------------^-------------^------------->
  mobile      tablet         desktop         widescreen      fullhd

列 (Columns)

.container

可以在包装器中 .column包含任意数量的 .columns 包装器

<div class="columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

修饰符

以下 CSS 类会影响颜色.

.is-primary
.is-link
.is-info
.is-success
.is-warning
.is-danger

以下类用于修改尺寸.

.is-small
.is-medium
.is-large

以下类用于修改状态.

.is-outlined
.is-loading

排版辅助类

以下类用于修改 字体大小 (font-size)

类	字体大小
`.is-size-1`	3rem
`.is-size-2`	2.5rem
`.is-size-3`	2rem
`.is-size-4`	1.5rem
`.is-size-5`	1.25rem
`.is-size-6`	1rem
`.is-size-7`	0.75rem

以下类用于对齐文本

类	对齐方式
`.has-text-centered`	使文本居中
`.has-text-justified`	使文本两端对齐
`.has-text-left`.	使文本对齐至左
`.has-text-right`	使文本对齐至右

以下类用于转换文本

类	转换
`.is-capitalized`	将……转换首字符每个单词的…… 大写
`.is-lowercase`	转换器 (Transforms) 所有字符…… 小写
`.is-uppercase`	转换器 (Transforms) 所有字符…… 大写

WYSIWYG 内容

<div class="content">
  <!-- start WYSIWYG contents -->
  <h1>Heading</h1>
  <p>Paragraph</p>

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <!-- end WYSIWYG contents -->
</div>

若要为常见生成的 WYSIWYG 内容提供默认样式，请使用 .content 类。