Bootstrap 按钮

按钮插件让普通按钮拥有"状态感"：可以按下、弹起（toggle），组成单选或复选按钮组，还能在提交时显示"正在加载…"的忙碌状态。它基本通过 data 属性使用，几乎不用写 jQuery。

按下与弹起切换

给按钮加 data-toggle="button"，点击后进入被按下的状态：

<button type="button" class="btn btn-primary" data-toggle="button">
  单击我试试
</button>

说明：页面中第一次点击，按钮颜色变深表示"被按下"；再次点击恢复原样，适合做开关型操作。

复选按钮组

把 data-toggle="buttons" 放在 .btn-group 上，组内每个 label 包一个复选框，可以同时选中多个：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="checkbox"> 音乐
  </label>
  <label class="btn btn-default">
    <input type="checkbox"> 电影
  </label>
  <label class="btn btn-default">
    <input type="checkbox"> 游戏
  </label>
</div>

效果：点击"音乐"按钮会高亮选中，再点取消；三项可同时处于选中态，表现像多选表单。

单选按钮组

把复选框换成单选框后，同一组内只能选中一个，天然形成单选效果：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-success active">
    <input type="radio" name="pay" checked> 微信支付
  </label>
  <label class="btn btn-success">
    <input type="radio" name="pay"> 支付宝
  </label>
</div>

说明：默认选中"微信支付"，点击"支付宝"后高亮随之切换，二者互斥，效果等同于原生 radio 表单。

加载中状态

表单提交常需防止重复点击：按钮先显示"加载中"并自动禁用，任务完成后再 reset 恢复原样：

<button type="button" id="saveBtn" class="btn btn-success"
        data-loading-text="保存中...">
  保存
</button>
<script>
  $('#saveBtn').on('click', function () {
    var $btn = $(this);
    $btn.button('loading');          // 显示 loading 文字并禁用
    setTimeout(function () {
      $btn.button('reset');          // 2 秒后恢复为"保存"
    }, 2000);
  });
</script>

说明：点击后按钮文字立即变成"保存中..."且不可再点，模拟保存 2 秒后还原，可有效防止重复提交。

小结：按钮插件的核心是几个 data-toggle 用法——button 单键切换、buttons 组合成复选或单选组；忙碌反馈交给 loading 与 reset 两个方法，按需组合即可。