时间:2021-05-08
本文主要讲解的是按钮的样式。
1.选项
2.尺寸
3.活动状态
4.禁用状态
5.可做按钮使用的Html标签
6.总结
选项
使用上面列出的class可以快速创建一个带有样式的按钮。
尺寸
需要让按钮具有不同尺寸吗?使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。
通过给按钮添加.btn-block可以使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素。
活动状态
当按钮处于活动状态时,其表现为被按压下(底色更深,边框夜色更深,内置阴影)。对于B<button>元素,是通过:active实现的。对于<a>元素,是通过.active实现的。然而,你还可以联合使用.active<button>并通过编程的方式使其处于活动状态。
按钮元素由于:active是伪状态,因此 无需添加,但是在需要表现出同样外观的时候可以添加.active。
可以为<a>添加.activeclass。
可以和上面的button进行一下对比。
禁用状态
通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。
按钮元素为<button>添加disabled属性。
可以把鼠标放在按钮上点击查看效果。
跨浏览器的兼容性如果为<button>添加disabled属性,Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前还没有办法解决。
链接元素为<a>添加.disabledclass。
这是和上面的按钮做一个对比。
我们把.disabled作为工具class使用,就像.activeclass一样,因此不需要增加前缀。
链接功能不受影响上面提到的class只是改变<a>的外观,不影响功能。在此文档中,我们通过JavaScript代码禁用了链接的默认功能。
Context-specific usageWhile button classes can be used on<a>and<button>elements, only<button>elements are supported within our nav and navbar components.
可做按钮使用的Html标签
可以为<a>、<button>或<input>元素添加按钮class。
作为最佳实践,我们强烈建议尽可能使用<button>元素以确保跨浏览器的一致性样式。
出去其它原因,这个Firefox的bug让我们无法为基于<input>标签的按钮设置line-height,这导致在Firefox上,他们与其它按钮的高度不一致。
总结
本节主要讲解的内容是button按钮的样式。主要是灵活的运行这几个样式进行控制就可以了。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在上篇文章给大家介绍了BootStrap3学习笔记(一)之网格系统对于标题,Bootstrap已经修改了h1--h6的样式,如果需要副标题,还可以在其中使用sm
Android学习笔记之样式和主题之选择器(1)布局文件需要在按钮里边使用:android:textColor="@color/button_selector"
Bootstrap中任何带有class.btn的元素都会继承圆角灰色按钮的默认外观,再结合一些选项,可以定义各种按钮样式。0x01按钮样式按钮基本按钮Defau
Tooltip采用的是hover方式弹出提示框(参见前一篇:Bootstrap学习总结笔记(18)–基本插件之Tooltip提示工具),适合提示内容比较少的情况
推荐阅读:JavaScript学习笔记之数组的增、删、改、查JavaScript学习笔记之数组求和方法JavaScript学习笔记之数组随机排序话说面试常会碰到