Bootst 按钮

来源：互联网发布：男生双肩背包推荐知乎编辑：程序博客网时间：2024/05/16 18:15

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’)是相同的

0 0