学习Bootstrap中的按钮样式与使用方法
不同样式的按钮
在任何网页中，按钮是常见的元素之一。一个好的按钮样式可以为网站带来独特的美感。下面我们来看一下Bootstrap中的按钮吧。
六种按钮样式
在Bootstrap中，按钮有六种不同的展现方式，分别为默认、主要、成功、信息、警告、危险和链接。
1. 默认：btn-default
2. 主要：btn-primary
3. 成功：btn-success
4. 信息：btn-info
5. 警告：btn-warning
6. 危险：btn-danger
7. 链接：btn-link
其他标签中使用按钮样式
从上面的样式可以看出来，其实在其他标签也可以使用按钮样式，而且同样也可以达到我们想要的效果。比如，我们可以用一个默认的样式，将 "a" 链接改成一个按钮。当然，同样的效果可以通过 span 元素实现，但是推荐使用 button 标签的方式，因为它更好地兼容不同的浏览器。
按钮尺寸大小
Bootstrap还定义了一些样式来控制按钮的尺寸大小，包括最大样式（btn-lg）、平板样式（btn-sm）和手机版样式（btn-xs），此外还有一个默认样式，即不使用 btn-* 的样式。这些不同的样式可以根据实际需求进行选择。
移动端适配
在移动端，有时候我们需要让按钮占一行，这样显示效果更加舒服和好看。这时可以使用样式 btn-block，它的作用是使按钮充满父节点100%的宽度，并且将按钮变为块级（block）元素。
禁用按钮
如果想要禁用按钮，可以使用 disabled"disabled" 属性。但需要注意，在IE及更低版本中，这个属性会绘制一个灰色的背景和阴影，目前还没有办法完全解决这个问题。
多做尝试
学习Bootstrap中的按钮样式与使用方法，最重要的是去实践、去尝试。只有在实践中遇到问题，我们才能找到解决问题的方法。因此，在学习的过程中，多尝试不同的组合方法，让自己出错也是一种进步。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
