css什么叫活动状态,按钮状态——活动状态

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;

}

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