章节
问答
课签
笔记
评论
占位
占位

按钮状态——活动状态

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
2
<!doctype html>
<html lang="en"
    >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
body{margin
    :100px
    ;padding
    :100px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / Ruixe
悬浮(:hover)是鼠标移动到元素上、没有点击就会触发;焦点(:focus)是a,button,input等标签鼠标点击后或者tab键选中元素后触发

最新回答 / 晨怡
active和focus以及hover等等都是按钮的活动状态,是写在CSS文件里的。他对于<a>标签以及<button>元素来说的不同实现方式,也是体现在CSS文件里的。具体可以查阅你的bootstrap.css文件。

已采纳回答 / 吉奏
一般是将具有超链接的a标签,设置成按钮样式,<a class='btn btn-primary ' href="">按钮</a>如果是按钮具有超链接功能,那只能,是添加事件,让页面跳转了

最新回答 / laosun静
button 和a标签在此处的用法一样的,鼠标按下的未松开时 a标签是通过 :hover来实现的,处于点击状态时是通过 :active实现。  .active就是单纯一个类

已采纳回答 / 橙子冰红茶
悬浮时,鼠标不在按钮上方,按钮颜色较浅,就像上面蒙了一层白色塑料膜;焦点状态下,鼠标处于按钮上方,按钮颜色较深,就像白色塑料膜被拿去了;点击时,按钮颜色变深(焦点状态),且按钮四周出现黑色“蚁行线”(就像有蚂蚁绕着按钮在转圈)

已采纳回答 / 柑nice
style>id>class>标签

已采纳回答 / TWT
悬浮状态 鼠标在按钮上悬浮时触发,鼠标移开后移除样式焦点状态 鼠标点击按钮,按钮获得焦点后触发,鼠标移开后样式依然存在,按钮失去焦点后移除样式

最新回答 / mingxin91
知道了,非常感谢!

最新回答 / 柑nice
要把那几个属性加上,比如btn-default:hover,但是只有点击状态才有效果,其它的没有
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言