1.基础
按钮是任何网页设计的基本元素。它的外观和行为都是页面的一个交互元素。
按钮(Button)
经典的按钮,有不同的颜色、大小和状态
按钮是任何网页设计的基本元素。它的外观和行为都是页面的一个交互元素。
Example
HTML
<button class="button">Button</button>
button类可用于:
<a>
锚链接
<button>
标单按钮
<input type="submit">
表单提交
<input type="reset">
表单重置
Example
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">
按钮有$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>
按钮有4种不同尺寸:
虽然默认大小是正常大小,但如果需要将按钮重置为正常大小,则会用到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>
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>
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>
<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>
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
修饰符,可以很容易地将按钮转换为其加载版本。您甚至不需要删除内部文本,这样按钮就可以在默认状态和加载状态之间保持其原始大小。
<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>
可以使用is-static
修饰符创建非交互式按钮。这对于将文本标签与输入对齐非常有用,例如在使用表单加载项时。
<span class="button is-static">Static</span>
Bulma支持使用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>
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>
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>
如果要将按钮用作加载项,请在 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>
您也可以将加载项组合在一起:
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>
可以使用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>
$button-color
$text-strong
hsl(0, 0%, 21%)
$button-background-color
$scheme-main
hsl(0, 0%, 100%)
$button-family
false
$button-border-color
$border
hsl(0, 0%, 86%)
$button-border-width
$control-border-width
$button-padding-vertical
calc(0.5em - #{$button-border-width})
$button-padding-horizontal
1em
$button-hover-color
$link-hover
hsl(0, 0%, 21%)
$button-hover-border-color
$link-hover-border
hsl(0, 0%, 71%)
$button-focus-color
$link-focus
hsl(0, 0%, 21%)
$button-focus-border-color
$link-focus-border
hsl(229, 53%, 53%)
$button-focus-box-shadow-size
0 0 0 0.125em
$button-focus-box-shadow-color
bulmaRgba($link, 0.25)
$button-active-color
$link-active
hsl(0, 0%, 21%)
$button-active-border-color
$link-active-border
hsl(0, 0%, 29%)
$button-text-color
$text
hsl(0, 0%, 29%)
$button-text-decoration
underline
$button-text-hover-background-color
$background
hsl(0, 0%, 96%)
$button-text-hover-color
$text-strong
hsl(0, 0%, 21%)
$button-ghost-background
none
$button-ghost-border-color
transparent
$button-ghost-color
$link
hsl(229, 53%, 53%)
$button-ghost-decoration
none
$button-ghost-hover-color
$link
hsl(229, 53%, 53%)
$button-ghost-hover-decoration
underline
$button-disabled-background-color
$scheme-main
hsl(0, 0%, 100%)
$button-disabled-border-color
$border
hsl(0, 0%, 86%)
$button-disabled-shadow
none
$button-disabled-opacity
0.5
$button-static-color
$text-light
hsl(0, 0%, 48%)
$button-static-background-color
$scheme-main-ter
hsl(0, 0%, 96%)
$button-static-border-color
$border
hsl(0, 0%, 86%)
$button-colors
$colors
Bulma colors