Twitter Bootstrap 中的属性有什么作用data-toggle？我在 Bootstrap API 中找不到答案。
我之前也看到过类似的问题，链接。但这对我没有多大帮助。
user1765876
问问题
437850 次
10 回答
210
它是一个 Bootstrap 数据属性，可自动将元素与它所在的小部件类型挂钩。Data-* 是 html5 规范的一部分，而 data-toggle 是特定于 Bootstrap 的。
一些例子：
data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"
浏览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="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>于 2013-02-27T13:48:46.890 回答
75
任何以开头data-的属性都是用于某些特定目的的自定义属性的前缀（该目的取决于应用程序）。rel它被添加为一种语义补救措施，以解决人们出于原始预期目的以外的目的大量使用和其他属性（rel通常用于保存高级工具提示等数据）。
在 Bootstrap 的情况下，我不熟悉它的内部工作原理，但从名称来看，我猜它是一个允许切换可见性的钩子，或者它所附加的元素的模式（例如可折叠Octopress.org 上的侧栏）。
于 2013-02-27T13:50:19.367 回答
30
例如，假设您正在创建一个 Web 应用程序来列出和显示食谱。您可能希望您的客户能够在选择要打开的食谱之前对列表进行排序、显示食谱的功能等。为此，您需要在食谱的列表元素中关联烹饪时间、主要成分、用餐位置等内容。
<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>
为了将这些信息放入页面，您可以做很多不同的事情。您可以为每个 LI 元素添加注释，您可以为列表项添加 rel 属性，您可以根据时间、膳食和成分（即）将所有食谱放在单独的文件夹中。大多数开发人员采用的解决方案是使用类属性来存储有关当前元素的信息。这有几个优点：
- 您可以在一个元素上存储多个类
- 类名可以是人类可读的
- 使用 JavaScript (className) 访问类很容易
- 该类与其所在的元素相关联
但是这种方法有一些主要缺点：
- 你必须记住这些课程是做什么的。如果您忘记或新开发人员接管了该项目，则可能会删除或更改这些类，而没有意识到这会影响应用程序的运行方式。
- 类也用于 CSS 样式，您可能会错误地将 CSS 类与数据类重复，最终在您的实时页面上出现奇怪的样式。
- 添加多个数据元素更加困难。如果您有多个数据元素，则需要通过 JavaScript 以某种方式访问它们，或者通过类的名称或在类列表中的位置。但是很容易搞砸。
我建议的所有其他方法都存在这些问题以及其他问题。但由于这是快速轻松地包含数据的唯一方法，所以我们就这样做了。救援的 HTML5 数据属性
HTML5 为任何元素添加了一种新类型的属性——自定义数据元素 (data-*)。这些是自定义（用 * 表示）属性，您可以添加到 HTML 元素中以定义所需的任何类型的数据。它们由两部分组成：
属性名称 这是属性的名称。它必须至少是一个小写字符并带有前缀 data-。例如：数据-主料、数据-烹饪时间、数据-餐。这是您的数据的名称。
属性值 与任何其他 HTML 属性一样，您将数据本身包含在由等号分隔的引号中。此数据可以是网页上有效的任何字符串。例如：data-main-ingredient="chocolate"。
然后，您可以将这些数据属性应用于您想要的任何 HTML 元素。例如，您可以在上面的示例列表中定义信息：
<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>
在 HTML 中获得该信息后，您将能够使用 JavaScript 访问它并根据该数据操作页面。
于 2015-02-16T20:35:35.830 回答
27
<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a
controller element, like a button, along with a data-target="#foo" or href="#foo"
to target a specific modal to toggle.-->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
于 2014-06-24T03:27:42.900 回答
11
已经给出了很多答案，但他们都没有抓住重点。让我们解决这个问题。
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
言归正传
data-HTML5 解析器不会解析任何以 开头的属性。- Bootstrap 使用该
data-toggle属性来创建折叠功能。
使用方法：仅需 2 步
- 添加到要折叠
class="collapse"的元素。#A - 添加
data-target="#A"和data-toggle="collapse"。
目的：如果我们使用 Bootstrap ，该data-toggle属性允许我们创建一个控件来折叠/展开一个（块）。div
于 2016-04-21T07:04:59.367 回答
5
此数据属性的存在告诉 Bootstrap 在用户交互时在另一个元素的视觉或逻辑状态之间切换。
它用于显示模式、选项卡内容、工具提示和弹出菜单以及设置切换按钮的按下状态。它在没有明确文档的情况下以多种方式使用。
于 2013-02-27T13:50:10.933 回答
5
bootstrap 中 data-toggle 的目的是让您可以使用 jQuery 查找特定类型的所有标签。例如，您将 data-toggle="popover" 放在所有 popover 标记中，然后您可以使用 JQuery 选择器查找所有这些标记并运行 popover() 函数来初始化它们。您也可以将 class="myPopover" 放在标签上并使用 .myPopover 选择器来做同样的事情。该文档令人困惑，因为它使该属性看起来有些特殊。
这
<div class="container">
<h3>Popover Example</h3>
<a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
<a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>
<script>
$(document).ready(function(){
$('.myPop').popover();
});
</script>
工作得很好。
于 2016-07-26T22:51:07.097 回答
4
它是 Bootstrap 定义的 HTML5 数据属性。它将按钮绑定到事件。
于 2013-02-27T13:49:44.140 回答
2
在这里data-toggle，您还可以找到更多可分配值的示例。只需访问该页面，然后CTRL+F搜索data-toggle。
于 2015-08-22T18:32:51.823 回答
2
Bootstrap 利用 HTML5 标准在 javascript 中轻松访问 DOM 元素属性。
数据-*
形成一个属性类，称为自定义数据属性，允许在 HTML 和脚本可能使用的 DOM 表示之间交换专有信息。所有此类自定义数据都可以通过设置属性的元素的 HTMLElement 接口获得。HTMLElement.dataset 属性允许访问它们。
于 2016-02-18T02:10:57.550 回答