UI 组件 > 按钮

基本按钮

以下是基本按钮,未使用任何图标和样式

按钮有6种预定义颜色集,分别是:默认,主要,成功,信息,警告,危险 .btn .btn-* .btn-default, .btn-primary, .btn-success... etc

默认 主要 成功 信息 警告 危险 默认 连接

各种尺寸大小的按钮

大按钮,请添加样式 .btn .btn-lg

主要大按钮   默认大按钮

默认大小按钮,请添加样式 .btn .btn-default

主要按钮   默认按钮

小按钮,请添加样式 .btn .btn-sm

主要小按钮   默认小按钮

超小按钮,请添加样式 .btn .btn-xs

主要超小按钮   默认超小按钮

圆形按钮

超大圆形按钮,请添加样式 .btn-circle .btn-xl

大圆形按钮,请添加样式 .btn-circle .btn-lg

默认大小圆形按钮,请添加样式 .btn-circle

按钮组

将一系列按钮组成一个按钮组,使用以下样式 .btn in .btn-group .

水平分组 带有图标 多按钮分组

将一组按钮垂直排放为一组,而不是水平排放 .btn-group-vertical .

垂直分组 带有下拉按钮 带有图标 多按钮分组

各种颜色的按钮

也可以自行设置文字颜色 示例: .txt-color-red


各种背景颜色的按钮 .btn .bg-color-blueLight .txt-color-magenta

带有各种图表的按钮

默认图标按钮带有一行文字,并在文字左侧,右侧或两侧有一个图标



带有标签项的按钮

<button type="button" class="btn btn-labeled btn-success">
 <span class="btn-label">
  <i class="glyphicon glyphicon-ok"></i>
 </>Success
</button>

块状按钮

块状按钮 .btn .btn-block


块状按钮组 .btn-group .btn-group-justified