全局
默认
可以使用任何可用的按钮类来快速创建按钮，我们提供了多种不同颜色来适应不同的应用场景。
-
普通
#e4eaec -
鼠标悬停
#ccd5db -
激活
#76838f
-
普通
#6c757d -
鼠标悬停
#5a6268 -
激活
#545b62
-
普通
#62a8ea -
鼠标悬停
#89bceb -
激活
#4e97d9
-
普通
#46be8a -
鼠标悬停
#5cd29d -
激活
#36ab7a
-
普通
#57c7d4 -
鼠标悬停
#77d6e1 -
激活
#47b8c6
-
普通
#f2a654 -
鼠标悬停
#f4b066 -
激活
#e79857
-
普通
#f96868 -
鼠标悬停
#fa7a7a -
激活
#e9595b
-
普通
#526069 -
鼠标悬停
#76838f -
激活
#37474f
-
普通
#f8f9fa -
鼠标悬停
#e2e6ea -
激活
#dae0e5
-
普通
#ffffff -
鼠标悬停
#ffffff -
激活
#ffffff
幽灵按钮
通过添加
.btn-outline 类来实现描边效果。
圆角按钮
圆形按钮与方形按钮可以用来区分不同的行为或风格。
大小
按钮完美支持响应式设计，其尺寸随屏幕的大小不同而产生变化。
可以通过添加
.btn-lg ，
.btn-sm ，或
.btn-sm 来实现显示不同大小的按钮。
带图标的块级按钮
创建块级按钮只需要在按钮上添加
.btn-block 类即可。
箭头
可通过为按钮添加
.btn-up ，
.btn-right ，
.btn-bottom 或
.btn-left 类来实现。
动画
按钮可以通过动画来显示隐藏按钮内容。
浮动按钮
浮动按钮是一种特殊类型的操作按钮。可在
.btn 上添加
.btn-floating 来实现
质感/扁平
质感按钮和扁平按钮示例
胶囊按钮
在
.btn-round 按钮上的基础上通过添加
.btn-pill-left 或
.btn-pill-right 类来实现。
带图标的按钮
带图标的按钮示例，您可以通过“ 矢量图标 ”页面来选择图标。
图标按钮
按钮中仅包含图标。
图标下拉菜单
在下拉菜单中仅使用图标
社交图标
常见社交媒体图标示例
带标签的社交按钮
一般在页面顶部或章节中使用。
不同大小的社交按钮
不同大小的带图标的按钮或仅包含图标的按钮示例。
图标块级按钮
块级按钮中仅包含图标。
按钮组
基本
在一组按钮外面的元素上添加
.btn-group 类即可。
垂直显示
让一组按钮垂直堆叠排列。
不同大小的按钮组
只要给
.btn-group 加上
.btn-group-* 类，就不用单独为按钮组中的每个按钮都添加控制按钮大小的类了。
按钮工具条
该按钮组用于显示多个按钮之间的密切关系，通常在编辑页面上使用。
嵌套按钮组
如果需要把下拉菜单混合到一系列按钮中，您只须把
.btn-group 放入另一个
.btn-group 中。
两端对齐的按钮组
让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。
Button.Js 组件
加载状态
通过添加
data-loading-text="加载中..." 类来使用加载状态按钮。