按钮
点击后会触发一个操作。
规则
- 同个页面只有一个主按钮。
代码演示
按钮
内联按钮
小按钮
块级按钮
不可点
组合按钮
内联按钮
默认为内联按钮包裹.btn-wrapper可以对按钮更好的排序。
<div class="btn-wrapper ">
<button class="btn">主按钮</button>
<button class="btn btn-secondary">次级按钮</button>
<button class="btn btn-highlight ">警告按钮</button>
</div>小按钮
添加.btn-sm可以得到小按钮
<div class="btn-wrapper ">
<button class="btn btn-sm">主按钮</button>
<button class="btn btn-secondary btn-sm">次级按钮</button>
<button class="btn btn-highlight btn-sm">警告按钮</button>
</div>块级按钮
添加.btn-block可以得到块级按钮
<div class="btn-wrapper">
<button class="btn btn-block">主按钮</button>
</div>
<div class="btn-wrapper">
<button class="btn btn-secondary btn-block">次级按钮</button>
</div>
<div class="btn-wrapper">
<button class="btn btn-highlight btn-block">警告按钮</button>
</div>不可点
添加.btn-disabled并且添加disabled属性可以得到不可点按钮
<div class="btn-wrapper">
<button class="btn btn-disabled btn-block" disabled>不可点</button>
</div>组合按钮
添加.btn-lg可以使得该按钮占据剩余空间
<div class="btn-wrapper">
<button class="btn btn-secondary g-left">取消预约</button>
<button class="btn btn-highlight btn-lg g-right">去支付（还剩14:36）</button>
</div>置底
为.btn-wrapper添加g-footer可以得到置于视口底部的按钮
<div class="fixed-foot-wrapper">
<div class="btn-wrapper g-footer">
<button class="btn btn-secondary g-left">取消预约</button>
<button class="btn btn-highlight btn-lg g-right">去支付（还剩14:36）</button>
</div>
</div>