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') 重置按钮状态，并将按钮上的文本重置为传入的值