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>