BootStrap 按钮

按钮的功能很丰富。通过控制按钮的状态或创建一组按钮并形成一些新的组件，例如工具条


状态  : 通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态。

<button id="btn" type="button" data-loading-text="Loading..." autocomplete="off" class="btn btn-primary">
             Loading state
        </button>
<script type="text/javascript">
    $("#btn").on('click',function(){
        var $btn = $(this).button('loading');
        // business logic...
        setTimeout(function(){
            $btn.button('reset');                    
        },1000);
    })
</script>

单选：

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

复选：
<div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary active">
        <input type="checkbox" name="options" id="option1" value="checkbox1" checked> checkbox1
      </label>
      <label class="btn btn-primary">
        <input type="checkbox" name="options"  id="option2" value="checkbox2"> checkbox2
      </label>
      <label class="btn btn-primary">
        <input type="checkbox" name="options" id="option3" value="checkbox3"> checkbox3
      </label>
</div>