Bootstrap3.0中如何使用按钮样式-创新互联
Bootstrap3.0中如何使用按钮样式,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
巴林右旗ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!选项
使用上面列出的class可以快速创建一个带有样式的按钮。
代码如下:
尺寸
需要让按钮具有不同尺寸吗?使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。
代码如下:
通过给按钮添加.btn-block可以使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素。
代码如下:
活动状态
当按钮处于活动状态时,其表现为被按压下(底色更深,边框夜色更深,内置阴影)。对于B
按钮元素
由于:active是伪状态,因此 无需添加,但是在需要表现出同样外观的时候可以添加.active。
代码如下:
Primary button Button
链接元素
代码如下:
可以和上面的button进行一下对比。
禁用状态
通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。
按钮元素
为
代码如下:
Primary button Button
可以把鼠标放在按钮上点击查看效果。
跨浏览器的兼容性如果为
添加disabled属性,Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前还没有办法解决。
链接元素
代码如下:
这是和上面的按钮做一个对比。
我们把.disabled作为工具class使用,就像.activeclass一样,因此不需要增加前缀。
链接功能不受影响上面提到的class只是改变的外观,不影响功能。在此文档中,我们通过JavaScript代码禁用了链接的默认功能。
Context-specific usageWhile button classes can be used onand
elements, only elements are supported within our nav and navbar components.
可做按钮使用的Html标签
代码如下:
Link
Button
跨浏览器表现作为很好实践,我们强烈建议尽可能使用
元素以确保跨浏览器的一致性样式。 出去其它原因,这个Firefox的bug让我们无法为基于标签的按钮设置line-height,这导致在Firefox上,他们与其它按钮的高度不一致。
看完上述内容,你们掌握Bootstrap3.0中如何使用按钮样式的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
网站标题:Bootstrap3.0中如何使用按钮样式-创新互联
新闻来源:http://pwwzsj.com/article/cchjoc.html