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

最新推荐文章于 2024-08-20 11:50:43 发布

Lenmon1997

最新推荐文章于 2024-08-20 11:50:43 发布

阅读量3.3w

点赞数 4

分类专栏： Web 文章标签： bootstrap

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Bootstrap为这些a之类元素都绑定上了事件，而终止了链接默认行为。

data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示

data-target 与data-toggle 还有data-spy 文档总是给人一种很突兀的方式给出来，然后又没有好好解释或者是我看的不够仔细？

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.】用来传递替换文本（不知道是不是这么说），见下面的例子：

input[type=checkbox].ace.ace-switch + .lbl[data-lbl]::before {
  content: attr(data-lbl);
}

原文地址 
bootstrap 中的data-toggle=""这个明面上的意思是数据切换，下面我举一个例子可能更加的明白一些。
 <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
在这段代码中，data-toggle="tab"将<a>属性转换成了tab属性

.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。
注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性: