Bootstrap3.0中如何使用按钮样式

Bootstrap3.0中如何使用按钮样式，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联建站专业提供成都主机托管四川主机托管成都服务器托管四川服务器托管，支持按月付款！我们的承诺：贵族品质、平民价格，机房位于中国电信/网通/移动机房，四川联通机房服务器托管服务有保障！

选项

使用上面列出的class可以快速创建一个带有样式的按钮。

代码如下:

       Default
       Primary
       Success
       Info
       Warning
       Danger
       链接

尺寸

需要让按钮具有不同尺寸吗？使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。

代码如下:


 Large button
 Large button


 Default button
 Default button


 Small button
 Small button


 Extra small button
 Extra small button

通过给按钮添加.btn-block可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素。

代码如下:

Block level button
Block level button

活动状态

当按钮处于活动状态时，其表现为被按压下（底色更深，边框夜色更深，内置阴影）。对于B元素，是通过:active实现的。对于元素，是通过.active实现的。然而，你还可以联合使用.active并通过编程的方式使其处于活动状态。

按钮元素

由于:active是伪状态，因此 无需添加，但是在需要表现出同样外观的时候可以添加.active。

代码如下:

Primary button
Button

链接元素

可以为添加.activeclass。

代码如下:

Primary link
Link

可以和上面的button进行一下对比。

禁用状态

通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。

按钮元素

为添加disabled属性。

代码如下:

Primary button
Button

可以把鼠标放在按钮上点击查看效果。

跨浏览器的兼容性

如果为添加disabled属性，Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有恶心的阴影，目前还没有办法解决。

链接元素

为添加.disabledclass。

代码如下:

Primary link
Link

这是和上面的按钮做一个对比。

我们把.disabled作为工具class使用，就像.activeclass一样，因此不需要增加前缀。

链接功能不受影响

上面提到的class只是改变的外观，不影响功能。在此文档中，我们通过JavaScript代码禁用了链接的默认功能。

Context-specific usage

While button classes can be used onandelements, onlyelements are supported within our nav and navbar components.

可做按钮使用的Html标签

可以为、或元素添加按钮class。

代码如下:

   Link
   

Button
   
   

跨浏览器表现

作为最佳实践，我们强烈建议尽可能使用元素以确保跨浏览器的一致性样式。

出去其它原因，这个Firefox的bug让我们无法为基于标签的按钮设置line-height，这导致在Firefox上，他们与其它按钮的高度不一致。

看完上述内容，你们掌握Bootstrap3.0中如何使用按钮样式的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

标题名称：Bootstrap3.0中如何使用按钮样式
分享网址：http://6mz.cn/article/ijdhsd.html