10 09/2014

bootstrap button

最后更新: Wed Sep 10 2014 12:36:06 GMT+0800

基本

.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>