Bootstrap按钮button设置

按钮是网页交互过程中不可缺少的一部分,Bootstrap默认提供了7种样式的按钮风格,其效果如图3所示。
wechatimg31
使用方式如下

<!-- 标准button -->

<button type="button" class="btn btn-default">Default</button>

<!-- 提供视觉加重,表示在一组button中,该按钮是最主要的button -->

<button type="button" class="btn btn-primary">Primary</button>

<!-- 表示成功或正使用的button -->

<button type="button" class="btn btn-success">Success</button>

<!-- 表示提示信息的button -->
<button type="button" class="btn btn-info">Info</button>

<!-- 表示需要进行某种行为的button -->

<button type="button" class="btn btn-warning">Warning</button>

<!-- 表示危险或错误行为的button -->

<button type="button" class="btn btn-danger">Danger</button>

<!-- 让button的行为看起来像链接一样 -->

<button type="button" class="btn btn-link">Link</button>

按钮风格首先定义了基础的.btn样式以及相关的hover、focus、active等行为特效,然后再为特殊的风格(如,btn-default)定义特殊的颜色(如各种变化状态下的颜色)。.btn基础样式部分代码如下:

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
/*取消IE 10点击穿透的延迟:*/
touch-action: manipulation;
/*阻止IE 11+元素的双击缩放*/
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*按钮文本不能被选择*/
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

另外,基础样式也会对按钮默认的focus、active、hover、disabled行为定义相关的变化。源码如下。

.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:focus,
.btn-default.focus {
color: #333;
background-color: #e6e6e6;
border-color: #8c8c8c;
}
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
background-color: #fff;
border-color: #ccc;
}
.btn-default .badge {
/* 按钮内部有徽章的话,设置徽章的显示颜色和背景色 */
color: #fff;
background-color: #333;
}

同理,其他6种按钮样式也是按照上述规则进行定义的,只是颜色变化不同而已。所以如果需要定义自己的风格,遵循上述规则即可。
按钮大小
像input一样,Bootstrap也提供了控制button按钮大小的CSS样式,样式名为.btn-lg、. btn-sm、.btn-xs。这些样式可以和btn颜色样式组合使用。示例如下:

<p>

<button type="button" class="btn btn-default btn-lg">大型button</button>
<button type="button" class="btn btn-primary btn-lg">大型button</button>
</p>

<p>
<button type="button" class="btn btn-success">正常button</button>
<button type="button" class="btn btn-info">正常button</button>
</p>
<p>
<button type="button" class="btn btn-success btn-sm">小型button</button>
<button type="button" class="btn btn-info btn-sm">小型button</button>
</p>

<p>

<button type="button" class="btn btn-warning btn-xs">超小button</button>
<button type="button" class="btn btn-danger btn-xs">超小button</button>
</p>

运行后如下图
122
这些不同尺寸按钮的主要差别是padding、font-size、line-height和border-radius,具体源码里的数值如下:

.btn-lg,
.btn-group-lg > .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}

所有按钮的宽度都是根据文本的长短(再加上padding值)来决定的,而如果我们需要一个充满父容器的100%宽度的按钮,则无法实现。好在Bootstrap又单独为我们提供了一个block级的样式——.btn-block按钮,它不以文本多少自动伸缩,它没有padding和margin值,而是充满父容器。具体源码实现如下:

.btn-block {
display: block;
width: 100%;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}

.btn-block样式和普通按钮的区别如图所示。可以看出块级元素充满父容器,而不随字符宽度变化而变化。
aaaa
多标签支持
btn相关元素的强大之处在于,它不仅能够支持普通的button元素,也能够支持a元素和input元素,这些元素应用btn样式也能够产生同样的显示效果。用法如下:

<a class="btn btn-default" href="#">链接</a>

<button class="btn btn-default" type="submit">按钮</button>

<input class="btn btn-default" type="button" value="输入框">

<input class="btn btn-default" type="submit" value="提交">

但是,强烈建议不管在任何情况下,都使用button元素,以免出现跨浏览器兼容性问题。比如,Firefox浏览器下就有一个bug,导致无法为标签按钮设置line-height,其结果就是这种按钮和普通的按钮高度不一致。
活动状态
当按钮处于活动状态时,其表现出的行为像被按压了一样(底色更深,边框颜色更深,内置阴影)。对于button元素,这是通过: active实现的;而对于a元素,则是通过.active实现的。但还可以联合使用:active和button,并通过编程的方式使其处于活动状态。
由于: active是伪类,因此无需添加元素就默认支持。但是,如果想在页面加载的时候就表现出活动状态外观的话,则直接在上面添加.active样式即可。示例如下:

<button type="button" class="btn btn-primary btn-lg active">button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">link</a>

活动状态的实现方式是,首先在默认的.btn样式上定义: active伪类和.active样式,以提供阴影。源码如下:

.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

然后在各自风格的样式上,为活动状态定义不同的文字颜色、背景颜色。边框颜色。源码如下:

.btn-default:focus,
.btn-default.focus {
color: #333;
background-color: #e6e6e6;
border-color: #8c8c8c;
}
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
color: #333;
background-color: #d4d4d4;
border-color: #8c8c8c;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}

禁用状态
与活动状态一样,Bootstrap也提供了禁用状态按钮的设置,主要实现将按钮的背景色做65%的透明处理。有两种方式可以禁用按钮,一种是使用原始的disabled属性,一种是利用.disabled样式。两者的区别是.disabled样式不禁止按钮的默认行为(需要利用JavaScript代码来阻止)。
使用方式如下:

<button type="button" class="btn btn-primary" disabled="disabled">大按钮</button>

<button type="button" class="btn btn-primary disabled">大按钮</button>

注意
IE9和以下版本下使用disabled属性会导致文本变成灰色,并产生阴影。
另外,.disabled样式作用在拥有.btn样式的链接a元素上时,也会产生同样的禁用状态效果,唯一的不足也是阻止不了链接的默认行为(需要JavaScript代码阻止其行为)。用法如下:

<a href="#" class="btn btn-primary btn-lg disabled">大按钮</a>
<a href="#" class="btn btn-default btn-sm disabled">小按钮</a>

相关源码如下:

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none;
}

同时,各自风格对禁用状态也进行了颜色的特殊处理。举例如下:

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
background-color: #fff;
border-color: #ccc;
}

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注