作者:
WangMin
格言:努力做好自己喜欢的每一件事
状态提示
通过自定义属性和简单的JavaScript，就可以让按钮具有状态提示功能。比如，没有点击按钮时，正常显示；点击按钮时，触发相应的状态，并显示该状态对应的文本信息。
1. 加载状态
要让按钮显示加载状态，首先要给按钮添加 data-loading-text 属性，它的值为加载状态要显示的文本信息，如 "Loading..."：
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>
还要为按钮定义单击事件，并在点击时调用 button('loading') 方法，来触发加载状态。代码如下：
$('.btn').click(function(){
$(this).button('loading');
})
当点击按钮时，会触发加载状态，按钮的文本会变成 data-loading-text 属性的值。加载过程中，按钮被自动禁用，它会变灰，不再响应单击。如下：
2. 自定义状态
按钮自定义任意状态，只需为按钮添加 data-xxx-text 属性，并在点击按钮时调用 button('xxx') 方法即可。例如，为按钮自定义 complete 状态，首先为按钮添加 data-complete-text 属性，属性的值为 complete 状态要显示的文本信息：
<button type="button" id="myButton" data-complete-text="complete..." class="btn btn-primary" autocomplete="off">
complete
</button>
再为按钮定义单击事件，并在点击时调用 button('complete') 方法：
$('.btn').click(function(){
$(this).button('complete');
})
3. 重置状态
如果想让按钮的文本回到最初的样子，可以调用 button('reset') 方法来重置按钮的状态，让它显示初始的文本。
$('.btn').button('reset')
如果没有为按钮定义 data-complete-text 属性，重置状态下会显示初始的文本，如果定义了 data-complete-text 属性，则显示 data-complete-text 属性指定的文本。
按钮状态切换
1. 通过data属性切换按钮状态
将单个按钮的 data-toggle 属性设置 button，或通过简单的JavaScript，就可以激活按钮的行为状态，让它在未激活和激活状态之间来回切换。
<button class="btn btn-primary" data-toggle="button" autocomplete="off">Single Toggle</button>
当单击时，会激活按钮，激活状态以深色背景显示。
再次单击时，按钮又回到默认状态，默认状态以浅色背景显示。
2. 通过JavaScript切换按钮状态
<button class="btn btn-primary" >Single Toggle</button>
$('.btn').click(function() {
$(this).button('toggle');
});
注意：在实现状态切换功能时，不限制一定要用 button 元素，只要应用了 .btn 类，它可以是任何元素。
按钮组
将按钮组放在特定的容器中，不必编写JavaScript代码，就可以让按钮组具有HTML的复选框（checkbox）或单选框（radio）的效果。
1. 复选按钮组
复选按钮组是类似于复选框的一组按钮，用户可以选择按钮组中的多个按钮。要添加这个功能，只需给 .btn-group 的按钮组容器添加 data-toggle="buttons " 属性，并将一组包含复选框的label元素放入容器中：
<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>
复选按钮组跟HTML中的复选框使用方法相同，单击按钮组中的某个按钮，按钮将被选中，再次单击，将取消选中。被选中的按钮以深色背景显示，取消选中的按钮以默认的浅色背景显示。
2. 单选按钮组
单选按钮组是类似于单选框的一组按钮，用户每次只能选择按钮组中的一个按钮。要添加这个功能，只需给 .btn-group 的按钮组容器添加 data-toggle="buttons-radio" 属性，并将一组包含单选按钮的label元素放入容器中：
<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>
单选按钮组跟HTML中的单选框使用方法相同，单击按钮组中的某个按钮，该按钮将被选中，其它按钮将取消选中。被选中的按钮以深色背景显示，取消选中的按钮以默认的浅色背景显示。
就先分享到这里!! :smile: 后续继续更新!!
