基本用法

<a href="" class="btn">按钮</a>
<button type="button" class="btn gray"><i class="icon icon-star"></i></button>
<button type="button" class="btn text-primary">按钮</button>
<button type="button" class="btn primary">按钮</button>
<button type="button" class="btn disabled" disabled>已禁用</button>
<button type="button" class="btn loading loading-light gray">加载中</button>
<button type="button" class="btn gray">按钮 <span class="label success">23</span></button>
<button type="button" class="btn gray has-badge">按钮 <span class="label badge red circle">2</span></button>
大小
.btn.btn-sm
.btn
.btn.btn-lg
外观选项

外观选项用法参考 基础 > 外观 章节。以下列举按钮的常见用法。

.btn.primary
.btn.success
.btn.danger
.btn.warning
.btn.info
.btn.special
.btn.important
.btn.dark
.btn.inverse
.btn.primary-pale
.btn.success-pale
.btn.danger-pale
.btn.warning-pale
.btn.info-pale
.btn.special-pale
.btn.important-pale
.btn.gray
.btn.white
.btn.primary-pale.text-tint
.btn.success-pale.text-tint
.btn.danger-pale.text-tint
.btn.warning-pale.text-tint
.btn.info-pale.text-tint
.btn.special-pale.text-tint
.btn.important-pale.text-tint
.btn.primary.outline
.btn.success.outline
.btn.danger.outline
.btn.warning.outline
.btn.info.outline
.btn.special.outline
.btn.important.outline
.btn.dark.outline
.btn.inverse.outline
.btn.primary.outline.hover-solid
.btn.success.outline.hover-solid
.btn.danger.outline.hover-solid
.btn.warning.outline.hover-solid
.btn.info.outline.hover-solid
.btn.special.outline.hover-solid
.btn.important.outline.hover-solid
.btn.dark.outline.hover-solid
.btn.inverse.outline.hover-solid
.btn.primary.rounded
.btn.success.outline.rounded
.btn.danger.outline.hover-solid.rounded
.btn.danger-pale.rounded
.btn.warning-pale.text-tint.rounded
.btn.dark.rounded
.btn.primary.circle
.btn.success.outline.circle
.btn.danger.outline.hover-solid.circle
.btn.danger-pale.circle
.btn.warning-pale.text-tint.circle
.btn.dark.circle