twitter-bootstrap-3 - Bootstrap 3 中的 `data-target` 属性是什么？

Question

您能告诉我 Bootstrap 3 使用的 data-target 属性背后的系统或行为是什么吗？

我知道data-toggle用于针对图形功能的Bootstrap API JavaScript。

Answer 1

data-target bootstrap 使用它来让您的生活更轻松。您(大多数情况下)不需要编写一行 Javascript 即可使用它们的预制 JavaScript components .

data-target属性应包含一个指向将更改的 HTML 元素的 CSS 选择器。

Modal Example Code from BS3 :

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  [...]
</div>

在此示例中，按钮有 data-target="#myModal" ，如果点击它，<div id="myModal">...</div>将被修改(在本例中为淡入)。发生这种情况是因为 #myModal CSS 选择器中的元素指向具有 id 的元素属性为 myModal值。

有关 HTML5“data-”属性的更多信息:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes