按钮 - 加载状态

<button type="button" id="myButton" data-loading-text="加载中..." class="btn btn-info" autocomplete="off">
  加载按钮
</button>

<script>
$(document).ready( function(){
  $('#myButton').on('click', function () {
    $(this).button('loading'); // 变成加载状态
    setTimeout( reset, 1500); // 1.5秒后恢复正常
  });
});

function reset(){
  $('#myButton').button('reset'); // 恢复正常
}
</script>

运行一下

toggle型按钮 - 单击选中，再击恢复

<button type="button" class="btn btn-info" data-toggle="button" aria-pressed="false" autocomplete="off">
  toggle型按钮
</button>

运行一下

CheckBox按钮组 - 多个toggle按钮组成的按钮组（可多选）

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-info active">
    <input type="checkbox" autocomplete="off" checked>checkbox按钮1
  </label>
  <label class="btn btn-info">
    <input type="checkbox" autocomplete="off">checkbox按钮2
  </label>
  <label class="btn btn-info">
    <input type="checkbox" autocomplete="off">checkbox按钮3
  </label>
</div>

运行一下

Radio按钮组 - 多个toggle按钮组成的按钮组（只能单选）

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-info active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio按钮1
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio按钮2
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio按钮3
  </label>
</div>

运行一下