Bootstrap的按钮插件(bootstrap-button.js)实际上是为用户提供了一种控制按钮状态的方法，通过状态的不同起到提示作用。这种状态包括按钮的显示文字和背景。针对这俩种状态Bootstrap分别提供了创建的方式及配套的一组操作方法。
下面分别给予说明。
引入文件
1.
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
2.
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
3.
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-button.js"></script>
"显示文字"控制
该方式中有俩个核心需要把握，一个是如何设置文字，一个是如何控制文字的显示和隐藏。对于设置文字，Bootstrap提供了俩个标记：
data-loading-text
data-complete-text
前者一般用于等待后台处理中的状态，如：正在登陆...、正在加载...等等。后者一般用于后台处理结束时的状态，如：登陆成功、加载完毕(当然这种情况可能不存在)。
针对这俩个标记分别提供了俩个命名，用于将标记内容显示：
$().button('loading')
$().button('complete')
下面做个典型的登录例子：
Html代码
1.
<button class="btn btn-primary" data-complete-text="登陆成功" data-loading-text="正在登陆..." >登陆</button>
.btn样式必须有，否则Bootstrap不认为他是个按钮。只要有这个样式，哪怕是<a>、<span>、<div>等任意的dom元素皆可。
Js代码01.
<script type="text/javascript">
02.
$(".btn").on("click", function(){//为按钮绑定click事件
03.
var self = this;
04.
$(self).button('loading');//正在登陆中，显示data-loading-text 标记内容
05.
06.
function doFinished(){
07.
$(self).button('complete');//登陆成功后，显示data-complete-text标记内容
08.
}
09.
setTimeout(doFinished,"3000");//启动一个定时器，模拟登陆过程
10.
}
11.
)
12.
13.
</script>
"背景"控制
背景有激活和非激活状态，用不同的背景表示。使用标记：
data-toggle="button"
只要在按钮上加上此标记即可，点击按钮时就会在俩种背景下切换。例子：
1.
<button class="btn btn-primary" data-toggle="button">单独开关</button>
另外，Bootstrap提供了个命令，通过此命名可用js控制背景的切换，如下：
$().button('toggle')
例子：
Html代码
1.
<button class="btn btn-primary" data-toggle="button">单独开关</button>
2.
<br/>
3.
<a href="javascript:void(0)" onClick="_switch()">切换</a>
1.
<script type="text/javascript">
2.
function _switch(){
3.
$(".btn").button('toggle');
4.
}
5.
</script>
组合按钮应用
Bootstrap还提供了类似于checkbox组和radio组的效果，背景的激活和非激活状态类似于checkbox、radio的选中和非选中。
实例：
Html代码
01.
<!-- checkbox组效果 -->
02.
<div class="btn-group" data-toggle="buttons-checkbox">
03.
<button class="btn btn-primary">左</button>
04.
<button class="btn btn-primary">中</button>
05.
<button class="btn btn-primary">右</button>
06.
</div>
07.
08.
<!-- radio组效果 -->
09.
<div class="btn-group" data-toggle="buttons-radio">
10.
<button class="btn btn-primary">左</button>
11.
<button class="btn btn-primary">中</button>
12.
<button class="btn btn-primary">右</button>
13.
</div>
分别用标记data-toggle="buttons-checkbox"和data-toggle="buttons-radio"设置。此时我们也可以用$().button('toggle')命令来切换某一个按钮的状态。
参考：http://www.see-source.com/blog/300000033/369
My problem was that I was including both boostrap.js and bootstrap-modal.js. Apparently if you include bootstrap.js you shouldn't also inlclude bootstrap-modal.js because boostrap.js imports all of the javascript plugins that it is compatible with. Something like that. After deleting my boostrap-modal.js script link it worked.
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
