Bootstrap3.0学习笔记之按钮的样式
本文主要讲解的是按钮的样式。
1.选项
2.尺寸
3.活动状态
4.禁用状态
5.可做按钮使用的Html标签
6.总结
选项
使用上面列出的class可以快速创建一个带有样式的按钮。
复制代码代码如下:
尺寸
需要让按钮具有不同尺寸吗?使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。
复制代码代码如下:
通过给按钮添加.btn-block可以使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素。
复制代码代码如下:
活动状态
当按钮处于活动状态时,其表现为被按压下(底色更深,边框夜色更深,内置阴影)。对于B
链接元素
可以为添加.activeclass。
复制代码代码如下:
可以和上面的button进行一下对比。
禁用状态
通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。
按钮元素
为
可以把鼠标放在按钮上点击查看效果。
跨浏览器的兼容性
如果为
跨浏览器表现
作为最佳实践,我们强烈建议尽可能使用
出去其它原因,这个Firefox的bug让我们无法为基于标签的按钮设置line-height,这导致在Firefox上,他们与其它按钮的高度不一致。
总结
本节主要讲解的内容是button按钮的样式。主要是灵活的运行这几个样式进行控制就可以了。
您可能感兴趣的文章:
- .NET Core系列之MemoryCache 初识
- 007手机一键Root(安机网一键Root) v3.0 官方最新版 一键ROOT您的Android手机
- 12306密码被盗了怎么办?12306密码外泄解决方法
- 12个字的qq网名
- 150M迷你型无线路由器怎么设置?
- 192.168.1.1打不开怎么办?路由器192.168.1.1打不开的原因以及解决办法
- 2011年电子报合订本 电子报 编辑部 中文 PDF版 [84M]
- 2015年1月15日小米新旗舰发布会现场图文直播
- 2016.3.1vivo Xplay5新品发布会现场视频直播 优酷直播
- 2016华为P9发布会视频直播地址 4月15日华为P9国行发布会直播