Twitter Bootstrap 中的数据切换属性 [英] The data-toggle attributes in Twitter Bootstrap

问题描述

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

我之前也看到过类似的问题，链接.但这对我帮助不大.

解决方案

它是一个 Bootstrap 数据属性，可以自动将元素连接到它所在的小部件类型.Data-* 是 html5 规范的一部分，而 data-toggle 特定于 Bootstrap.

一些例子:

data-toggle="modal"数据切换=折叠"数据切换=下拉"数据切换=标签"

浏览Bootstrap JavaScript 文档并搜索 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="下拉"><a class="dropdown-toggle" data-toggle="dropdown" href="#">下拉触发器</a><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"><li><a href="#">Item</a></li>

What does data-toggle attributes do in Twitter Bootstrap? I couldn't find an answer in Bootstrap API.

I have seen a similar question before as well, link. But it didn't help me much.

解决方案

It is a Bootstrap data attribute that automatically hooks up the element to the type of widget it is. Data-* is part of the html5 spec, and data-toggle is specific to Bootstrap.

Some Examples:

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

Go through the Bootstrap JavaScript docs and search for data-toggle and you will see it used in the code examples.

One working example:

<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>

这篇关于Twitter Bootstrap 中的数据切换属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！