BootStrap栅格系统、表单样式与按钮样式源码解析(6)

可作为按钮使用的元素:<a>、<input>、<button>
.btn:按钮的全局样式。<input type = “button” class = “btn”>
预定义样式:.btn-default、.btn-primary、.btn-success、.btn-info、.btn-warning、.btn-danger、.btn-link
.active按钮激活状态、.disabled按钮禁用状态
按钮尺寸:.btn-lg(大按钮)、.btn-sm(小按钮)、.btn-xs(超小按钮)
.btn-block:将按钮拉伸到撑满整个父元素。

预定义样式

<!-- Standard button --> <button type="button">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button">Primary</button> <!-- Indicates a successful or positive action --> <button type="button">Success</button> <!-- Contextual button for informational alert messages --> <button type="button">Info</button> <!-- Indicates caution should be taken with this action --> <button type="button">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button">Link</button>

尺寸

按钮尺寸:.btn-lg(大按钮)、.btn-sm(小按钮)、.btn-xs(超小按钮)

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。

激活状态

当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 <button> 元素,是通过 :active 状态实现的。对于 <a> 元素,是通过 .active 类实现的。然而,你还可以将 .active 应用到 <button> 上,并通过编程的方式使其处于激活状态。

button 元素

由于 :active 是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候可以添加 .active 类。

<button type="button">Primary button</button> <button type="button">Button</button>

链接(<a>)元素

可以为基于 <a> 元素创建的按钮添加 .active 类。
这里的role=”button” , role是无障碍设计里的标签(属性role的存在,是为了告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程序),这是一个按钮。在html5元素内,标签本身就是有语义的,因此role是不必添加的,至少是不推荐的,但是bootstrap的案例内很多都是有类似的属性和声明的,目的是为了兼容老版本的浏览器(用户代理))

<a href="#" role="button">Primary link</a> <a href="#" role="button">Link</a>

显示效果和上面的图片一样!

禁用状态

为 <button> 元素添加 disabled 属性,使其表现出禁用状态。

<button type="button" disabled="disabled">Primary button</button> <button type="button" disabled="disabled">Button</button>

为基于 <a> 元素创建的按钮添加 .disabled 类。

<a href="#" role="button">Primary link</a> <a href="#" role="button">Link</a>

两个完整实例源码链接:https://github.com/chenhaoxiang/BootStrap/tree/master/day2

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdzgs.html