Twitter Bootstrap 中的数据切换属性

javascript jquery html twitter-bootstrap

2022-08-30 00:13:32

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

我以前也见过类似的问题，链接。但这对我没有多大帮助。

答案 1

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

一些例子：

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

浏览Bootstrap JavaScript文档并搜索数据切换，您将看到它在代码示例中使用。

一个工作示例：

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

答案 2

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

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

html5doctor有一篇关于data-属性的好文章。

周期 2 是广泛使用 data- 属性的另一个示例。