javascript - Twitter Bootstrap 中的数据切换属性

Question

data-toggle 属性在 Twitter Bootstrap 中有什么作用？我在 Bootstrap API 中找不到答案。

我之前也看到过类似的问题，link .但这对我没有多大帮助。

Answer 1

它是一个 Bootstrap 数据属性，可自动将元素与它所在的小部件类型 Hook 。 data-* 是 html5 规范的一部分，而 data-toggle 是 Bootstrap 特有的。

一些例子:

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

通过Bootstrap JavaScript docs并搜索 data-toggle ，您将看到它在代码示例中使用。

一个工作示例:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>