具有加载效果的按钮
照着bootstrap网站上的例子写,怎么都没反应
只能想别的办法来实现这个效果了
<!-- 具有加载效果的按钮 -->
<button type="button" id="fat-btn" class="btn btn-primary">Hello</button>
<script src="../../jquery/jquery-10.0.2.js"></script>
<script>
$(function(){
var $btn = $('#fat-btn');
$btn.click(function(){
var $this = $(this);
//禁用,设置按钮上显示的文字
$this.attr('disabled', 'disabled').html("Loading...");
setTimeout(function () {
//3秒后,恢复状态
$this.removeAttr('disabled').html('Complete');
}, 3000)
});
})
</script>
以下有bootstrap提供的功能,需要加入button.js,否则没有效果!
状态切换
通过添加data-toggle="button"
可以让按钮能够切换状态
<button class="btn btn-primary" data-toggle="button">Single Toggle</button>
按下
弹起
选择框
通过向按钮组添加data-toggle="buttons"
可以使按钮组具有类似选择框的选择/取消功能。
把默认checkbox框的样式改为按钮样式,按钮处于按下状态等效于勾选checkbox框
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> checkbox 1
</label>
<label class="btn btn-primary">
<input type="checkbox"> checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> checkbox 3
</label>
</div>
如,前2个按钮被按下,表示选择前2个选项
单选
通过向按钮组添加data-toggle="buttons"
可以让按钮组具有单选框的功能。
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> radio 1
</label> <label class="btn btn-primary">
<input type="radio" name="options" id="option2"> radio 2
</label> <label class="btn btn-primary">
<input type="radio" name="options" id="option3"> radio 3
</label>
</div>
只有1个按钮可以被按下