3-22 按钮状态——活动状态
本节编程练习不计算学习进度,请电脑登录imooc.com操作

按钮状态——活动状态

Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种:活动状态禁用状态

Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)点击状态(:active)焦点状态(:focus)几种。
/*源码请查看bootstrap.css文件第2011行~第2029行*/

.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus {
color: #333;
text-decoration: none;
}
.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)为例:
/*源码请查看bootstrap.css文件第2045行~第2058行*/

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
background-image: none;
}

当按钮处理正在点击状态(也就是鼠标按下的未松开的状态),对于<button>元素是通过“:active”伪类实现,而对于<a>这样的标签元素则是通过添加类名“.active”来实现。

 

任务

我来试一试:观察按钮悬浮状态、点击状态焦点状态的样式变化。
 

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>定制风格</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <button class="btn" type="button">基础按钮.btn</button>
  10. <button class="btn btn-default" type="button">默认按钮.btn-default</button>
  11. <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
  12. <button class="btn btn-success" type="button">成功按钮.btn-success</button>
  13. <button class="btn btn-info" type="button">信息按钮.btn-info</button>
  14. <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
  15. <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
  16. <button class="btn btn-link" type="button">链接按钮.btn-link</button>
  17. </body>
  18. </html>
  1. body{margin:100px;padding:100px;}
  2. button{
  3. margin:20px;
  4. }
下一节