New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

文档

当你使用 Bulma 创建一个网站 所需要的一切

Buttons

拥有不通颜色、尺寸和状态的经典 按钮

Colors Yes
Sizes Yes
Variables Yes

按钮 是任何设计的重要元素，它是与您页面交互的重要元素。

Button 
<a class="button">Button</a>

.button 类可以用于这些元素：

  • <a> 锚链接
  • <button> 表单按钮
  • <input type="submit"> 提交按钮
  • <input type="reset"> 重置按钮
Anchor 
<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">

Colors | 颜色 #

White Light Dark Black Text 
<a class="button is-white">White</a>
<a class="button is-light">Light</a>
<a class="button is-dark">Dark</a>
<a class="button is-black">Black</a>
<a class="button is-text">Text</a>
Primary Link Info Success Warning Danger 
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a>

Sizes | 尺寸 #

Small Normal Medium Large 
<a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>

Styles | 样式 #

Outlined

Outlined Outlined Outlined Outlined Outlined Outlined 
<a class="button is-outlined">Outlined</a>
<a class="button is-primary is-outlined">Outlined</a>
<a class="button is-link is-outlined">Outlined</a>
<a class="button is-info is-outlined">Outlined</a>
<a class="button is-success is-outlined">Outlined</a>
<a class="button is-danger is-outlined">Outlined</a>

反色 （文字颜色变为背景颜色，反之亦然）

Inverted Inverted Inverted Inverted Inverted 
<a class="button is-primary is-inverted">Inverted</a>
<a class="button is-link is-inverted">Inverted</a>
<a class="button is-info is-inverted">Inverted</a>
<a class="button is-success is-inverted">Inverted</a>
<a class="button is-danger is-inverted">Inverted</a>

Invert Outlined (the invert color becomes the text and border colors)

Invert Outlined Invert Outlined Invert Outlined Invert Outlined Invert Outlined 
<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class="button is-link is-inverted is-outlined">Invert Outlined</a>
<a class="button is-info is-inverted is-outlined">Invert Outlined</a>
<a class="button is-success is-inverted is-outlined">Invert Outlined</a>
<a class="button is-danger is-inverted is-outlined">Invert Outlined</a>

圆形按钮

New! 0.6.2
Rounded Rounded Rounded Rounded Rounded Rounded 
<a class="button is-rounded">Rounded</a>
<a class="button is-primary is-rounded">Rounded</a>
<a class="button is-link is-rounded">Rounded</a>
<a class="button is-info is-rounded">Rounded</a>
<a class="button is-success is-rounded">Rounded</a>
<a class="button is-danger is-rounded">Rounded</a>

States | 状态 #

Normal

Normal Normal Normal Normal Normal Normal Normal 
<a class="button">Normal</a>
<a class="button is-primary">Normal</a>
<a class="button is-link">Normal</a>
<a class="button is-info">Normal</a>
<a class="button is-success">Normal</a>
<a class="button is-warning">Normal</a>
<a class="button is-danger">Normal</a>

Hover

Hover Hover Hover Hover Hover Hover Hover 
<a class="button is-hovered">Hover</a>
<a class="button is-primary is-hovered">Hover</a>
<a class="button is-link is-hovered">Hover</a>
<a class="button is-info is-hovered">Hover</a>
<a class="button is-success is-hovered">Hover</a>
<a class="button is-warning is-hovered">Hover</a>
<a class="button is-danger is-hovered">Hover</a>

Focus

Focus Focus Focus Focus Focus Focus Focus 
<a class="button is-focused">Focus</a>
<a class="button is-primary is-focused">Focus</a>
<a class="button is-link is-focused">Focus</a>
<a class="button is-info is-focused">Focus</a>
<a class="button is-success is-focused">Focus</a>
<a class="button is-warning is-focused">Focus</a>
<a class="button is-danger is-focused">Focus</a>

Active

Active Active Active Active Active Active Active 
<a class="button is-active">Active</a>
<a class="button is-primary is-active">Active</a>
<a class="button is-link is-active">Active</a>
<a class="button is-info is-active">Active</a>
<a class="button is-success is-active">Active</a>
<a class="button is-warning is-active">Active</a>
<a class="button is-danger is-active">Active</a>

Loading

Loading Loading Loading Loading Loading Loading Loading

由于 loading 是使用 :after 伪元素实现的，所以不支持 <input type="submit"> 元素。 

<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-link is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
<a class="button is-danger is-loading">Loading</a>

Static

您可以使用 is-static 修饰符创建一个 非交互按钮，这对于输入的文本标签对齐很有帮助，例如使用表单插件时。

Static 
<span class="button is-static">Static</span>

Disabled

Disabled Disabled Disabled Disabled Disabled Disabled Disabled

is-disabled CSS 类已被弃用，请使用 disabled HTML 属性。 学习如何开始

<a class="button" title="Disabled button" disabled>Disabled</a>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
<a class="button is-link" title="Disabled button" disabled>Disabled</a>
<a class="button is-info" title="Disabled button" disabled>Disabled</a>
<a class="button is-success" title="Disabled button" disabled>Disabled</a>
<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
<a class="button is-danger" title="Disabled button" disabled>Disabled</a>

With Font Awesome icons | 使用 Font Awesome icons 图标

GitHub Twitter Save Delete

GitHub GitHub GitHub GitHub 

<p class="field">
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-bold"></i>
    </span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-italic"></i>
    </span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-underline"></i>
    </span>
  </a>
</p>
<p class="field">
  <a class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-primary">
    <span class="icon">
      <i class="fab fa-twitter"></i>
    </span>
    <span>Twitter</span>
  </a>
  <a class="button is-success">
    <span class="icon is-small">
      <i class="fas fa-check"></i>
    </span>
    <span>Save</span>
  </a>
  <a class="button is-danger is-outlined">
    <span>Delete</span>
    <span class="icon is-small">
      <i class="fas fa-times"></i>
    </span>
  </a>
</p>
<p class="field">
  <a class="button is-small">
    <span class="icon is-small">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-medium">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-large">
    <span class="icon is-medium">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
</p>

如果按钮仅包含图标，则无论按钮 或 图标的大小如何， Bulma 都将使用 正方形。 

<p class="field">
  <a class="button is-small">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
</p>
<p class="field">
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
  <a class="button">
  <span class="icon">
    <i class="fas fa-heading fa-lg"></i>
  </span>
  </a>
</p>
<p class="field">
  <a class="button is-medium">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
  <a class="button is-medium">
  <span class="icon">
    <i class="fas fa-heading fa-lg"></i>
  </span>
  </a>
  <a class="button is-medium">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </a>
</p>
<p class="field">
  <a class="button is-large">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
  <a class="button is-large">
  <span class="icon">
    <i class="fas fa-heading fa-lg"></i>
  </span>
  </a>
  <a class="button is-large">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </a>
</p>

Button group | 按钮组 #

如果您要在一行同时使用 一组 按钮，请在 field 容器上添加 is-grouped 修饰符。

Save changes

Cancel

Delete post 

<div class="field is-grouped">
  <p class="control">
    <a class="button is-link">
      Save changes
    </a>
  </p>
  <p class="control">
    <a class="button">
      Cancel
    </a>
  </p>
  <p class="control">
    <a class="button is-danger">
      Delete post
    </a>
  </p>
</div>

Button addons | 按钮插件 #

如果您要将按钮用作于 插件，请在 field 容器上添加 has-addons 修饰符。

Left

Center

Right 

<div class="field has-addons">
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-align-left"></i>
      </span>
      <span>Left</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
      <span>Center</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-align-right"></i>
      </span>
      <span>Right</span>
    </a>
  </p>
</div>

Button group with addons | 带插件的按钮组 #

你可以将一组插件按钮同时使用:

Bold

Italic

Underline

Left

Center

Right 

<div class="field has-addons">
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-bold"></i>
      </span>
      <span>Bold</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-italic"></i>
      </span>
      <span>Italic</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-underline"></i>
      </span>
      <span>Underline</span>
    </a>
  </p>
</div>

<div class="field has-addons">
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-align-left"></i>
      </span>
      <span>Left</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
      <span>Center</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-align-right"></i>
      </span>
      <span>Right</span>
    </a>
  </p>
</div>

List of buttons | 按钮列表 #

New! 0.6.1

您现在可以通过 .buttons 容器创建一个 按钮列表。

Save changes Save and continue Cancel 
<div class="buttons">
  <span class="button is-success">Save changes</span>
  <span class="button is-info">Save and continue</span>
  <span class="button is-danger">Cancel</span>
</div>

如果列表 非常长，它将自动 换行，同时保证所有按钮间隔 均匀。

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty 
<div class="buttons">
  <span class="button">One</span>
  <span class="button">Two</span>
  <span class="button">Three</span>
  <span class="button">Four</span>
  <span class="button">Five</span>
  <span class="button">Six</span>
  <span class="button">Seven</span>
  <span class="button">Eight</span>
  <span class="button">Nine</span>
  <span class="button">Ten</span>
  <span class="button">Eleven</span>
  <span class="button">Twelve</span>
  <span class="button">Thirteen</span>
  <span class="button">Fourteen</span>
  <span class="button">Fifteen</span>
  <span class="button">Sixteen</span>
  <span class="button">Seventeen</span>
  <span class="button">Eighteen</span>
  <span class="button">Nineteen</span>
  <span class="button">Twenty</span>
</div>

您可以使用 .has-addons 修饰符将按钮 连接在一起。

Yes Maybe No 
<div class="buttons has-addons">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>

使用 is-centered 或者 is-right 修饰符来改变 对齐 方式。

Yes Maybe No
Yes Maybe No 
<div class="buttons has-addons is-centered">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>

<div class="buttons has-addons is-right">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>

您可以在每个按钮上使用 修饰符 来区分它们，请确保添加了 is-selected 修饰符以及选定的按钮位于其他兄弟元素 之上。

Yes Maybe No
Yes Maybe No
Yes Maybe No 
<div class="buttons has-addons">
  <span class="button is-success is-selected">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>

<div class="buttons has-addons">
  <span class="button">Yes</span>
  <span class="button is-info is-selected">Maybe</span>
  <span class="button">No</span>
</div>

<div class="buttons has-addons">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button is-danger is-selected">No</span>
</div>

form groups 和 list of buttons 之间的区别

虽然 list of buttons 样式可以通过 field is-grouped 或新建 buttons 类来实现，但是它们有以下一些区别： While this list of buttons style can be achieved with either or the new buttons class, there are a few differences:

  • buttons 有一个 更简单的标记
  • buttons 只能包含 button 元素
  • field is-grouped 可以包含 任何 类型的 inputs 控件
  • field is-grouped 可以强制把所有控件放在 同一行
  • 使用 field is-grouped 你可以 扩展 其中任意控件

基本上，如果您只想要一组 按钮，建议使用 buttons，如果您需要对样式或元素进行更多的控制，请使用 form group.

Variables | 变量 #

你可以使用 这些变量 来 自定义 这些 element。只需要在导入 Bulma 之前设置这些变量 学习如何开始.

Name Default value
Name Default value
$button-color $grey-darker
$button-background-color $white
$button-border-color $grey-lighter
$button-hover-color $link-hover
$button-hover-border-color $link-hover-border
$button-focus-color $link-focus
$button-focus-border-color $link-focus-border
$button-focus-box-shadow-size 0 0 0 0.125em
$button-focus-box-shadow-color rgba($link, 0.25)
$button-active-color $link-active
$button-active-border-color $link-active-border
$button-text-color $text
$button-text-hover-background-color $background
$button-text-hover-color $text-strong
$button-disabled-background-color $white
$button-disabled-border-color $grey-lighter
$button-disabled-shadow none
$button-disabled-opacity 0.5
$button-static-color $grey
$button-static-background-color $white-ter
$button-static-border-color $grey-lighter

Made with Bulma
这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!