Bootstrp--btn

 

当我们浏览网页的时候，总是会看到许多各式各样，装饰精美的按钮，可以用于选择，跳转页面，按钮的作用，一般都是作为传递信息的桥梁。在Bootstrp中，还包括了多个预定义的按钮，每个样式的按钮都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。

例如，原按钮是这样的：

没有修饰的按钮看起来很单调，是因为只把他放进按钮标签里面。所谓的按钮标签，就是btn可以在<button>元素上使用，也可以在<a>,或者<input>元素上使用class，那么，我们如何使用bootstrap呢？

在bootstrap的引用中，如果一个按钮，它不需要带来巨大的背景颜色，可以用默认的修饰符来替换btn-outline任何按钮上的所有背景颜色和图像：

按钮里面的字体颜色就是按钮的颜色，只有点击它的时候，颜色才能显示出来‘

如果配合btn-lg，btn-sm两个邻近的元素，还可以分别实现大规格按钮，小规格按钮的定义’，因为btn还与类前缀有关

.

Btn定义的按钮，默认状态下就是启用状态（背景较深，边框较暗，带内阴影），如果你使用的按钮固定为启用状态的时候，就不需要点击反馈，而且还可以增加active的样式，并包括aria-pressed=“true”属性，则状态就显示为启用状态了，

 

有了启用状态，肯定也会有禁用状态的，所谓的禁用状态就是将disabled布尔属性添加到任何<button>元素即直接嵌套在html标签中，使按钮看起来处于非活动的禁用状态，随你任意点击它，都不会有任何的响应和弹性。值得注意的是使用<a>标签的禁用有所不同：

1. <a>标签不支持disabled属性，所以你必须增加disabled属性，使之达到视觉禁用的效果
2. 未来，将包括更多的友好风格，以禁用按钮上的pointer-events属性，在支持该属性的浏览器中，你会看不到禁用的光标
3. 禁用按钮应包括aria-disabled=“true”用于指示辅助技术元素的状态的属性

 

 

 

 

因为按钮是可以出现网页上的多种场合，如按钮组，使用按钮组，可以把一系列的按钮编组放在同一行里， 并通过可选的JavaScript插件的方法赋予按钮单选，复选的功能

例子：将一系列的btn包裹在btn-group内，使用bootstrap相应的插件，可以实现选择按钮，选取块区的行为功能