data-toggle与data-target是什么作用

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（模态框）的形式展示。

---