bootstrap3-button 按钮

具有加载效果的按钮

照着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个按钮可以被按下