前端开发

 首页 > 前端开发 > Bootstrap > Bootstrap3.0学习第七轮:按钮

Bootstrap3.0学习第七轮:按钮

分享到:
【字体:
导读:
         [导读] 本文主要讲解的是按钮的样式,主要包括:1.选项;2.尺寸;3.活动状态;4.禁用状态;5.可做按钮使用的Html标签;6.总结。 选项 使用上面列出的class可以快速创建一个带有样式的按钮。...

本文主要讲解的是按钮的样式,主要包括:1.选项;2.尺寸;3.活动状态;4.禁用状态;5.可做按钮使用的Html标签;6.总结。

选项

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

尺寸

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

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

活动状态

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

链接元素

可以为添加.active class。

Primary link

Link

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

禁用状态

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

按钮元素

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

跨浏览器的兼容性

如果为

跨浏览器表现

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

Bootstrap3.0学习第六轮:表单
本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。 本文主要来讲解以下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 5.静态控件 6.控件状态 7.控件尺寸 8.帮助文本 9.总结 ...
Bootstrap3.0学习第八轮:工具Class
本文学习的内容主要如下所示:1.关闭按钮;2.Carets;3.快速设置浮动;4.内容区域居中;5.清除浮动;6.显示或隐藏内容;7.针对屏幕阅读器的内容;8.图片替换;9.总结。 关闭按钮 通过使用一个象征关闭的图标,可以用来让模式对话框和警告框消失。 Carets 使用插入符表示下拉的功能和方向。请注意...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……