bootstrap 按钮

按钮

默认按钮

任何赋予.btn类的页面元素都会显示按钮样式。不过，通常是用于更好的表现<a> 和 <button> 页面元素。

按钮	class=""	描述
默认	btn	带渐变的标准灰色按钮
主要	btn btn-primary	提供额外的视觉感, 可在一系列的按钮中指出主要操作
信息	btn btn-info	默认样式的替代样式
成功	btn btn-success	表示成功或积极的动作
警告	btn btn-warning	提醒应该谨慎采取这个动作
危险	btn btn-danger	表示这个动作危险或存在危险
反向	btn btn-inverse	备用的暗灰色按钮，不依赖于语义和用途
链接	btn btn-link	简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为

浏览器兼容性

IE9 不支持圆角的背景渐变，所以我们干脆移除了。 IE9 jankifies 禁用了button元素， 显示文本为灰色并带有很垃圾的阴影，这个我们实在无法修复。

按钮大小

想使用更大或更小的按钮吗？添加.btn-large、.btn-small 或 .btn-mini即可改变按钮大小。

Large button Large button

Default button Default button

Small button Small button

Mini button Mini button

1. <p>
2. <button class="btn btn-large btn-primary" type="button">Large button</button>
3. <button class="btn btn-large" type="button">Large button</button>
4. </p>
5. <p>
6. <button class="btn btn-primary" type="button">Default button</button>
7. <button class="btn" type="button">Default button</button>
8. </p>
9. <p>
10. <button class="btn btn-small btn-primary" type="button">Small button</button>
11. <button class="btn btn-small" type="button">Small button</button>
12. </p>
13. <p>
14. <button class="btn btn-mini btn-primary" type="button">Mini button</button>
15. <button class="btn btn-mini" type="button">Mini button</button>
16. </p>

通过添加.btn-block类，可使按钮变为块级元素，同时会填充整个父级元素。

Block level buttonBlock level button

1. <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
2. <button class="btn btn-large btn-block" type="button">Block level button</button>

禁用状态

颜色淡出50%，让按钮看起来无法点击。

链接元素

给<a>元素添加.disabled类。

Primary link Link

1. <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
2. <a href="#" class="btn btn-large disabled">Link</a>

注意！ 我们将.disabled作为一个工具类，和常见的.active类一样，因此无需添加前缀。另外，这个类只是为了美观，你必须自己写JavaScript代码来禁止链接的行为。

按钮元素

给<button>添加disabled属性。

Primary button Button

1. <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
2. <button type="button" class="btn btn-large" disabled>Button</button>

一个类支持多种标签

可以给<a>、<button>或<input>元素添加.btn类。

Link Button  

1. <a class="btn" href="">Link</a>
2. <button class="btn" type="submit">Button</button>
3. <input class="btn" type="button" value="Input">
4. <input class="btn" type="submit" value="Submit">

最佳实践是，根据使用环境，尝试找到一个合适的元素，以确保渲染的效果在各个浏览器保存基本一致。如果你正使用着一个input，那么你的按钮可使用 <input type="submit">。

https://v2.bootcss.com/base-css.html#buttons