Bootstrap3.0中如何使用按钮样式-成都快上网建站

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

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

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

选项

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

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

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


代码如下:


       
       
       
       
       
       
       

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

尺寸

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


代码如下:



 
 



 
 



 
 



 
 

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

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


代码如下:



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

活动状态

当按钮处于活动状态时,其表现为被按压下(底色更深,边框夜色更深,内置阴影)。对于B

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

链接元素

可以为添加.activeclass。


代码如下:


Primary link
Link

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

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

禁用状态

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

按钮元素


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

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

跨浏览器的兼容性

如果为

链接元素

添加.disabledclass。


代码如下:


Primary link
Link

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

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

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

链接功能不受影响

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

Context-specific usage

While button classes can be used onand

可做按钮使用的Html标签

可以为
   
   

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

跨浏览器表现

作为最佳实践,我们强烈建议尽可能使用

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


网页标题:Bootstrap3.0中如何使用按钮样式
本文路径:http://kswjz.com/article/ijdhsd.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流