HTML5允许开发者自由为其标签添加属性,这种自定义属性一般用“data-”开头。
我目前理解到在bootstrap中data-target,data-toggle等属性主要有两种作用:
【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.】 用来传递替换文本(不知道是不是这么说),见下面的例子:
<style>
/*由于css的“相邻选择符(E+F)”的存在,让我们可以直接利用html的默认checkbox,免去了js模拟选择的麻烦。*/
input[type=checkbox]+.lbl[data-lbl] {
display: inline-block;
vertical-align: .2em;
width: 2em;
height: 2em;
margin-right: .2em;
border-radius: .2em;
background-color: silver;
text-indent: .15em;
line-height: .65;
/*行高不加单位,子元素将继承数字乘以自身字体尺寸而非父元素行高*/
}
input[type="checkbox"]:checked+.lbl[data-lbl]::before {
content: attr(data-lbl);
display: inline-block;
vertical-align: .2em;
width: 2em;
height: 2em;
margin-left: -0.15em;
border-radius: .2em;
background-color: silver;
text-indent: .15em;
line-height: 2em;
text-align: center;
background-color: yellowgreen;
}
/* 隐藏input */
input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
</style>
<label>
<input type="checkbox" class="ace">
<lbl data-lbl="√" class="lbl"> </lbl>
</label>
转摘: Bootstrap中data-target 到底是什么 - SegmentFault 思否
以上为转载
自我理解:
- data-toggle:指以什么事件触发,相当于告诉浏览器你是一个什么组件,常用的如modal(模态框),popover(弹出框),tooltips(提示框)等,
- data-target:指事件的设置目标,相当于告诉浏览器你要操作那个元素,
- 一起使用就是代表data-target所指的元素以data-toggle指定的形式显示
当设置data-toggle="link"
和data-target="class"
之后,bootstrap.js
会使用这些值覆盖超链接的默认属性。
Bootstrap为这些a之类元素都绑定上了事件,而终止了链接默认行为。
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
[...]
</div>
在此示例中,按钮具有data-target="#myModal"
,如果单击它,将修改<div id="myModal">...</div>
(在这种情况下淡入)。发生这种情况是因为CSS选择器中的#myModal
指向具有id
属性且myModal
值的元素,以 modal(模态框)的形式展示。