实例

状态

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

从 v3.3.5 版本开始，此特性不再建议使用，并且已经在 v4 版本中删除了。

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    setTimeout(function() {
      $btn.button('reset')
    }, 1000)
  })
</script>

单独按钮切换

为单独按钮添加属性 data-toggle="button" 以激活状态切换。

切换之前的按钮状态需要添加 .active 和 aria-pressed="true"

为了切换之前的按钮状态, 必须自己为按钮添加样式 class .active 和属性 aria-pressed="true"。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

复选框 / 单选按钮

为一个包含复选框或单选按钮的按钮组 .btn-group 添加属性 data-toggle="buttons"，可以激活它们的选中状态的自动切换。

预选状态需要添加 .active

为了显示预选状态，需要自行为复选框或单选按钮的 label 元素添加样式 class .active。

仅支持响应 click 事件自动检查更新状态

如果一个复选框或单选按钮的选中状态不是通过按钮的 click 事件触发（比如通过重置按钮 <input type="reset"> 或通过设置选中属性 checked），需要手动自行为复选框或单选按钮的 label 元素切换样式 class .active。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<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>