BOOTSTRAP表单控件之按钮

按钮

制作按钮常用：input[type=“submit”] input[type=“button”] input[type=“reset”] <button>

在Bootstrap框架中的按钮都是采用<button>来实现

基本按钮类：.btn 用法：<button class="btn" type="button">按钮一</button>

.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;
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;
}

默认按钮样式附加类：.btn-default 用法： <button class="btn btn-default" type="button">按钮一</button>

.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}

多标签适用性（<button>、<input type="submit">、<a>、<span>）：为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮

<button class="btn btn-default" type="button">button标签按钮</button> 
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="#" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>  
<div class="btn btn-default">div标签按钮</div>

按钮样式附加类：btn-default、btn-primary、btn-success、btn-warning、btn-danger、btn-link

   <button class="btn" type="button">基础按钮.btn</button>  
   <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
   <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
   <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
   <button class="btn btn-link" type="button">链接按钮.btn-link</button>

按钮之定制按钮大小附加类：.btn-lg、.btn-sm、.btn-xs

.btn-lg,
.btn-group-lg> .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
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;
}

例：

    <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 
    <button class="btn btn-primary" type="button">正常按钮</button>
    <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

块状按钮：宽度充满父容器的按钮附加类：.btn-block

按钮宽度（一般按钮宽度由按钮里文本和内边距决定）

    <button class="btn btn-primary btn-block" type="button">块状按钮.btn-block</button>

按钮状态——活动状态类：.active .hover .focus

对于<button>元素是通过“:active”伪类实现，而对于<a>这样的标签元素则是通过添加类名“.active”来实现。

按钮状态——禁用状态类：

和input等表单控件一样，在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比，就是背景颜色的透明度做了一定的处理，opcity的值从100%调整为65%。

在Bootstrap框架中，要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”

两者的主要区别是：

“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> 
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

BOOTSTRAP表单控件之按钮

猜你喜欢