10
09/2014
bootstrap button
基本
.btn 任意元素加 .btn 成为按钮
颜色大小
.btn-primary 蓝色
.btn-info 浅蓝
.btn-success 绿色
.btn-warning 黄色
.btn-danger 红色
.btn-inverse 黑色
.btn-large 大
.btn-small 小
.btn-mini 最小
.btn-block block 按钮
状态
.disabled 禁用
.active 当前
button group
<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>
工具条含多个按钮组
<div class="btn-toolbar">
<div class="btn-group">
...
</div>
</div>
垂直显示
<div class="btn-group btn-group-vertical"> ... </div>
下拉按钮
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
显示下拉箭头分割线
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
上拉按钮
<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>