Bootst 按钮
btn不仅支持button元素，也能够支持a和input元素，不过强烈建议不过任何情况下，都使用butto，以免出现跨浏览器的兼容性问题。比如，Firefox浏览器下就有一个bug，导致无法为<input>标签按钮设置line-height，其结果就是这种按钮和普通的按钮高度不一致。
一、Bootstrap默认提供了7种样式的按钮风格，代码如下：
<!— 标准button —> <button type=“button” class=“btn btn-default”>Default</button> <!— 提供视觉加重，表示在一组button中，该按钮是最主要的button —> <button type=“button” class=“btn btn-primary”>Primary</button> <!— 表示成功或正使用的button —> <button type=“button” class=“btn btn-success”>Success</button> <!— 表示提示信息的button —> <button type=“button” class=“btn btn-info”>Info</button> <!— 表示需要进行某种行为的button —> <button type=“button” class=“btn btn-warning”>Warning</button> <!— 表示危险或错误行为的button —> <button type=“button” class=“btn btn-danger”>Danger</button> <!— 让button的行为看起来像链接一样 —> <button type=“button” class=“btn btn-link”>Link</button>得到的效果如下图：
二、按钮的大小
使用.btn-lg、.btn-sm、.btn-xsa 来控制按钮的大小，代码：
<button type="button" class="btn btn-default btn-lg">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success btn-sm">Success</button> <button type="button" class="btn btn-info btn-xs">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button>得到的效果如下图：
三、块级按钮
为按钮使用 .btn-block 样式，这就使按钮不易文本的多少进行自动伸缩，它没有padding和margin值，而是宽度充满父元素，代码：
<button type="button" class="btn btn-default btn-block ">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success btn-block">Success</button>得到的效果如下图：
相应的源码：
.btn-block { /* 取消padding*/
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
} .
btn-block +.btn-block {
margin-top: 5px; /* 多个按钮之间取消上下间隔*/
} input[type=“submit”].btn-block,
input[type=“reset”].btn-block,
input[type=“button”].btn-block {
width: 100%; /* 各种input按钮的宽度也要充满父容器*/
}
四、设置按钮为活动状态与禁用状态
给其加一个active样式即可 <button class="btn btn-default active">Default</button> 其实按钮默认为活动状态（可以按）， 设置禁用状态的话，就给其加一个disableed样式或者使用disableed属性，注意，disabed样式不禁用按钮的默认行为（需要利用JavaScript代码来阻止，例如链接按钮的默认行为是跳转到新页面）
五、设置单击按钮翻转状态效果：
只需要一个data-toggle=”button“属性，就可以在单击的时候将按钮状态进行翻转，其原理是在该元素上应用（或取消）.active样式。示例代码：
<button type=“button” class=“btn btn-primary” data-toggle=“button”>反转状态</button>
左边为单击前的，右边为单击后的。
而对于input元素来说，还有点不太一样，data-toggle=“button”属性变成 data-toggle=“buttons”属性。另外，除了反转.active样式以外，还反转了.disabled样式和disabled属性。下面示例是复选框示例，即可以同时翻转多个按钮：
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"><input type="checkbox">选项1</label> <label class="btn btn-primary"><input type="checkbox">选项2</label> <label class="btn btn-primary"><input type="checkbox">选项3</label> </div
注意，第一个和第三个是单击后的效果，第二个是单击之前的效果。
而单选框的话，顾名思义，反转的时候只能反转一个，同组radio按钮的状态同时只能选择一个。示例如下：
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"><input type="radio" name="options">选项1</label> <label class="btn btn-primary"><input type="radio" name="options">选项2</label> <label class="btn btn-primary"><input type="radio" name="options">选项3</label> </div>
只翻转了第三个，也只能翻转其中的一个了！
六、设置按钮的自定义状态
就是单击按钮之后，按钮上的字会变成设置好的那个，示例代码：
<script>
$(function () {
$("#btn1").click(function () {
$(this).button("loading");
});
});
</script>
</head>
<body>
<button type="button" id="btn1" class="btn btn-default" data-loading-text="loading!!">click me</button>
</body>效果：
左边是单击之前，右边是单击之后。
说明：看js代码，我们给button（）传递的是”loading“参数，则单击后，js会需找目标元素中的data-loading-text属性，并将其值作为单击后的字符显示在按钮上，其实，可以任意设置 data-***-text中的***，只要将***传递给button（）即可，例如 data-acm-text=”loading！！“ Js代码中：button（”acm“），这时，效果没啥变化！
七、按钮的JS用法
按钮插件的用法从上面的初始化代码就可以看出来了，就是调用button函数，然后传入参数即可。但是有两个参数是固定的，即toggle和reset，其他都可以随意定义。示例如下：
$(‘#id’).button(‘toggle’) // 反转按钮状态 $(‘#id’).button(‘reset’) // 重新恢复按钮原来的状态 $(‘#id’).button(‘任意字符’) // 任意参数，替换data-参数名-text的属性值 为按钮文本值 // 另外，不传任何参数的调用，等同于传loading参数，因为源码里的默认值是loading，即 // $(‘#id’).button()和$(‘#id’).button(‘loading’)是相同的