Bootstrap3 按钮改进之个人学习笔记

Bootstrap3 按钮

标签（空格分隔）： Bootstrap

---

改进之前的按钮

让它变得更加智能

---

效果图：

内容

2.1状态

data-loading-text=

<button type="button" id="fat-btn" data-loading-text="正在加载..." class="btn btn-primary">
  Loading state
</button>

<script type="text/javascript">
    $('#fat-btn').click(function () {
        var btn = $(this)
        btn.button('loading')
        setTimeout(function () {
          btn.button('reset')
        }, 3000)
      })
 </script>

2.2状态切换

data-toggle="button" 可以让按钮能够切换状态。

2.3选择框

通过向按钮组添加 data-toggle=”buttons”可以使按钮组具有类似选择框的选择/取消功能。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

radio 单选

2.4方法

$().button('toggle') 自由切换
$().button('loading') 设置按钮状态为loading
$().button('reset') 重置按钮状态
$().button('string') 重置按钮状态，并将按钮上的文本重置为传入的值