bootstrap单击显示/隐藏代码
本课程视频是VIP会员课程,学习请进入VIP学习区。
在Bootstrap教程中经常会遇到给标签添加data-toggle属性,data-toggle指以什么事件触发,常用的如modal,popover,tooltips等,data-target指事件的目标。
在自适应手机网站制作课程中,常用的就是data-target,data-toggle等属性,它的主要作用:单击显示,单击隐藏。例如制作Bootstrap的导航栏菜单时就会用到这个属性。
【1.】在CSS中作标签选择器用。如:
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
【2.】 用来传递替换文本(不知道是不是这么说),见下面的例子:
input[type=checkbox].ace.ace-switch + .lbl[data-lbl]::before {
content: attr(data-lbl);
}