Twitter Bootstrap 中的数据切换属性

Question

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

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

Answer 1

它是一个 Bootstrap 数据属性，可自动将元素与它所在的小部件类型挂钩。 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>

Answer 2

任何以data- 开头的属性都是用于某些特定目的的自定义属性的前缀（该目的取决于应用程序）。它被添加为一种语义补救措施，以解决人们大量使用 rel 和其他属性的目的，而不是其最初的预期目的（rel 通常用于保存高级工具提示等数据）。

在 Bootstrap 的情况下，我不熟悉它的内部工作原理，但从名称来看，我猜它是一个允许切换可见性的钩子，或者可能是它所附加的元素的模式（例如作为可折叠侧边栏on Octopress.org)。

html5doctor has a good article on the data- attribute。

Cycle 2 is another example of extensive use of the data- attribute.

Answer 3

例如，假设您正在创建一个 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>

为了将这些信息放入页面，您可以做很多不同的事情。您可以将 cmets 添加到每个 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 访问它并根据该数据操作页面。

Answer 4

来自Bootstrap Docs:

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

Answer 5

已经给出了这么多的答案，但他们没有抓住重点。让我们解决这个问题。

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

言归正传

1. 任何以data- 开头的属性都不会被 HTML5 解析器解析。
2. Bootstrap 使用 data-toggle 属性来创建折叠功能。

使用方法：只需两步

1. 将class="collapse" 添加到要折叠的元素#A。
2. 添加data-target="#A"和data-toggle="collapse"。

目的：data-toggle 属性允许我们创建一个控件来折叠/展开 div（块），如果我们使用 Bootstrap。

Answer 6

此数据属性的存在告诉 Bootstrap 在用户交互时在另一个元素的视觉或逻辑状态之间切换。

它用于显示模式、选项卡内容、工具提示和弹出菜单以及设置切换按钮的按下状态。它在没有明确文档的情况下以多种方式使用。

Answer 7

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

工作得很好。

Answer 8

它是一个 Bootstrap 定义的 HTML5 数据属性。它将按钮绑定到事件。

Answer 9

Here 您还可以找到更多data-toggle 可以分配的值的示例。只需访问该页面，然后通过CTRL+F 搜索data-toggle。

Answer 10

Bootstrap 利用 HTML5 标准在 javascript 中轻松访问 DOM 元素属性。

数据-*

形成一个属性类，称为自定义数据属性，允许专有信息在 HTML 及其可能被脚本使用的 DOM 表示之间交换。所有此类自定义数据都可以通过设置属性的元素的 HTMLElement 接口获得。 HTMLElement.dataset 属性允许访问它们。

Reference