按钮（Button）

经典的按钮，有不同的颜色、大小和状态

1

1.基础

按钮是任何网页设计的基本元素。它的外观和行为都是页面的一个交互元素。

Example

HTML 

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

button类可用于：

  • <a> 锚链接
  • <button> 标单按钮
  • <input type="submit"> 表单提交
  • <input type="reset"> 表单重置

Example

Anchor

HTML 

<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">

2.颜色

按钮有$colors Sass映射定义的所有不同颜色。

Example

HTML 

<button class="button is-white">White</button>
  <button class="button is-light">Light</button>
  <button class="button is-dark">Dark</button>
  <button class="button is-black">Black</button>
  <button class="button is-text">Text</button>
  <button class="button is-ghost">Ghost</button>

Example

HTML 

<div class="buttons">
    <button class="button is-primary">Primary</button>
    <button class="button is-link">Link</button>
  </div>
  
  <div class="buttons">
    <button class="button is-info">Info</button>
    <button class="button is-success">Success</button>
    <button class="button is-warning">Warning</button>
    <button class="button is-danger">Danger</button>
  </div>

现在每种颜色都有它的浅色版本。只需将修改器is-light附加到颜色修改器，即可应用按钮的浅色版本。

Example

HTML 

<div class="buttons">
    <button class="button is-primary is-light">Primary</button>
    <button class="button is-link is-light">Link</button>
  </div>
  
  <div class="buttons">
    <button class="button is-info is-light">Info</button>
    <button class="button is-success is-light">Success</button>
    <button class="button is-warning is-light">Warning</button>
    <button class="button is-danger is-light">Danger</button>
  </div>

3.大小

按钮有4种不同尺寸：

  • small 小的
  • normal 正常的
  • medium 中等的
  • large 大的

虽然默认大小是正常大小，但如果需要将按钮重置为正常大小，则会用到code>is-normal修改器（前面用了其他样式，有时候会影响到没加修饰的）。

Example

HTML 

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

通过将多个按钮包装到按钮父级中，并应用以下3个修改器之一，可以一次更改多个按钮的大小：

  • buttons are-small
  • buttons are-medium
  • buttons are-large

Example

HTML 

<div class="buttons are-medium">
    <button class="button">All</button>
    <button class="button">Medium</button>
    <button class="button">Size</button>
  </div>

你只需对按钮应用使用一个修改器类，即可简单的更改按钮子集的大小。
例如，如果希望所有按钮都很小，但仍有一个按钮为正常大小，只需执行以下操作：

Example

HTML 

<div class="buttons are-small">
    <button class="button">Small</button>
    <button class="button">Small</button>
    <button class="button">Small</button>
    <button class="button is-normal">Normal</button>
    <button class="button">Small</button>
  </div>

4.全行显示通常用于手机版

Example

HTML 

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

5.样式



边框样式

Example

HTML 

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

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

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

I反转轮廓（反转颜色变为文本和边框颜色）

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

圆形按钮

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

6.状态

Bulma设计了按钮的不同状态。每个状态都可以作为伪类和CSS类使用：

  • :hover and is-hovered
  • :focus and is-focused
  • :active and is-active

这允许您获得特定状态的样式，而不必触发它。

一般

Example

HTML 

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

链接经过（鼠标放在上面时的效果，你可以把鼠标移动到上面正常状态的按钮上对比查看）

Example

HTML 

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

焦点

Example

HTML 

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

激活

Example

HTML 

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

加载中

通过附加is-loading修饰符，可以很容易地将按钮转换为其加载版本。您甚至不需要删除内部文本，这样按钮就可以在默认状态和加载状态之间保持其原始大小。

由于加载微调器是使用::after伪元素实现的，因此<input type="submit">元素不支持它。 考虑改用<button type="submit">代替它。 

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

Static

可以使用is-static修饰符创建非交互式按钮。这对于将文本标签与输入对齐非常有用，例如在使用表单加载项时。

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

不可用

Bulma支持使用HTML表单的disabled属性，这会阻止用户与按钮交互。

is-disabled CSS类已被弃用，取而代之的是 HTML的disabled属性。 

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

7.使用图标字体

Bulma按钮可以很容易地通过添加一个字体图标来增强视觉效果。为获得最佳效果，请将内部文本包装在单独的<span>元素中。

Example

HTML 

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

如果按钮只包含一个图标，Bulma将确保按钮保持方形，无论按钮或图标的大小。 

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

8.按钮组

I如果要在单行上将按钮分组，请使用field容器上的is-grouped修饰器：

Example

HTML 

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

9.按钮加载

如果要将按钮用作加载项，请在 field容器上使用has-addons修饰符：

Example

HTML 

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

10.带加载项的按钮组

您也可以将加载项组合在一起：

Example

HTML 

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

11.按钮列表

可以使用buttons 按钮容器创建按钮列表。 

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

如果列表很长，它会自动换行，同时保持所有按钮的间距均匀。 

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

可以将按钮与has-addons修饰符一起附加。 

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

使用is-centered 或 is-right修改器更改对齐方式。 

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

可以在每个按钮上使用任何修饰符类来区分它们。同时确保添加is-selected修饰器，以确保“选定的”按钮位于其同级按钮的上方。 

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

12.表单组和按钮列表之间的差异

form groups 和>list of buttons存在很多不同

虽然此按钮列表样式可以通过field is-grouped或新按钮类实现，但有一些区别：

  • buttons 具有更简单的标记
  • buttons 只能包含 button元素
  • field is-grouped 可以包含任何类型的控制输入 control
  • field is-grouped 可以强制所有的控件在一行显示
  • with field is-grouped 你可以扩展其中一个控件

基本上，如果您只需要按钮列表，建议使用buttons按钮。如果需要对样式和元素进行更多控制，请使用form group。

13.变量

Variables #

Name
Type
Value
Computed Value
Computed Type 
$button-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$button-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$button-family
boolean
false
$button-border-color
variable
$border
hsl(0, 0%, 86%)
color
$button-border-width
variable
$control-border-width
$button-padding-vertical
size
calc(0.5em - #{$button-border-width})
$button-padding-horizontal
size
1em
$button-hover-color
variable
$link-hover
hsl(0, 0%, 21%)
color
$button-hover-border-color
variable
$link-hover-border
hsl(0, 0%, 71%)
color
$button-focus-color
variable
$link-focus
hsl(0, 0%, 21%)
color
$button-focus-border-color
variable
$link-focus-border
hsl(229, 53%,  53%)
color
$button-focus-box-shadow-size
size
0 0 0 0.125em
$button-focus-box-shadow-color
compound
bulmaRgba($link, 0.25)
$button-active-color
variable
$link-active
hsl(0, 0%, 21%)
color
$button-active-border-color
variable
$link-active-border
hsl(0, 0%, 29%)
color
$button-text-color
variable
$text
hsl(0, 0%, 29%)
color
$button-text-decoration
string
underline
$button-text-hover-background-color
variable
$background
hsl(0, 0%, 96%)
color
$button-text-hover-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$button-ghost-background
string
none
$button-ghost-border-color
string
transparent
$button-ghost-color
variable
$link
hsl(229, 53%,  53%)
color
$button-ghost-decoration
string
none
$button-ghost-hover-color
variable
$link
hsl(229, 53%,  53%)
color
$button-ghost-hover-decoration
string
underline
$button-disabled-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$button-disabled-border-color
variable
$border
hsl(0, 0%, 86%)
color
$button-disabled-shadow
shadow
none
$button-disabled-opacity
unitless
0.5
$button-static-color
variable
$text-light
hsl(0, 0%, 48%)
color
$button-static-background-color
variable
$scheme-main-ter
hsl(0, 0%, 96%)
color
$button-static-border-color
variable
$border
hsl(0, 0%, 86%)
color
$button-colors
variable
$colors
Bulma colors
map

返回头部

23222

问题反馈
返回顶部