位置: 编程技术 - 正文
Bootstrap每天必学之按钮（一）(bootstrap基础教程)
编辑：rootadmin推荐整理分享Bootstrap每天必学之按钮（一）(bootstrap基础教程)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:bootstrap技术教程,bootstrap要学到什么程度,bootstrap要学到什么程度,bootstrap快速入门,bootstrap怎么学,bootstrap基础教程,bootstrap基础教程,bootstrap入门,内容如对您有帮助，希望把文章链接给更多的朋友！
本文主要讲解的是按钮的样式。1.选项2.尺寸3.活动状态4.禁用状态5.可做按钮使用的Html标签
选项
使用上面列出的class可以快速创建一个带有样式的按钮。
尺寸 需要让按钮具有不同尺寸吗？使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。
通过给按钮添加.btn-block可以使其充满父节点%的宽度，而且按钮也变为了块级（block）元素。
活动状态当按钮处于活动状态时，其表现为被按压下（底色更深，边框夜色更深，内置阴影）。对于B<button>元素，是通过:active实现的。对于<a>元素，是通过.active实现的。然而，你还可以联合使用.active <button>并通过编程的方式使其处于活动状态。按钮元素由于:active是伪状态，因此 无需添加，但是在需要表现出同样外观的时候可以添加.active。
链接元素可以为<a>添加.active class。
可以和上面的button进行一下对比。
禁用状态 通过将按钮的背景色做%的褪色处理就可以呈现出无法点击的效果。按钮元素为<button>添加disabled属性。
可以把鼠标放在按钮上点击查看效果。跨浏览器的兼容性
如果为<button>添加disabled属性，Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有恶心的阴影，目前还没有办法解决。链接元素为<a>添加.disabled class。
这是和上面的按钮做一个对比。我们把.disabled作为工具class使用，就像.active class一样，因此不需要增加前缀。 链接功能不受影响
上面提到的class只是改变<a>的外观，不影响功能。在此文档中，我们通过JavaScript代码禁用了链接的默认功能。
可做按钮使用的Html标签 可以为<a>、<button>或<input>元素添加按钮class。
跨浏览器表现
作为最佳实践，我们强烈建议尽可能使用<button>元素以确保跨浏览器的一致性样式。
出去其它原因，这个Firefox的bug让我们无法为基于<input>标签的按钮设置line-height，这导致在Firefox上，他们与其它按钮的高度不一致。 本节主要讲解的内容是button按钮的样式，大家可以灵活的运行这几个样式进行控制就可以了，希望对大家的学习有所帮助。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
JS截取字符串实例详解 本文实例讲述了JS截取字符串的方法。分享给大家供大家参考，具体如下：js截取字符串可使用substring()或者slice()函数：split()功能：使用一个指定的分隔
JS实现图片高亮展示效果实例 本文实例讲述了JS实现图片高亮展示效果的方法。分享给大家供大家参考，具体如下：昨天朋友让我帮着做个图片高亮展示的效果，虽然不难，不过满有
如何解决ligerUI布局时Center中的Tab高度大小 1.0引用的js,csslinkhref="/Content/scripts/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"/linkhref="/Content/scripts/ligerUI/skins/ligerui-icons.css"rel="stylesheet"/scriptsrc="~/Scripts/jq
标签: bootstrap基础教程
本文链接地址:https://www.jiuchutong.com/biancheng/385489.html 转载请保留说明！上一篇：JavaScript DOM 学习总结(五)(javascript的dom操作)
