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

Question

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

我知道数据切换用于瞄准图形功能的Bootstrap的API JavaScript。

Answer 1

bootstrap使用

data-target来让您的生活更轻松。您（大多数情况下）不需要编写一行Javascript来使用他们预先制作的JavaScript components。

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

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>将被修改（在这种情况下淡入）。 发生这种情况是因为CSS选择器中的#myModal指向具有id值myModal属性的元素。

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

Answer 2

切换告诉Bootstrap要做什么，目标告诉Bootstrap要打开哪个元素。因此，只要点击这样的链接，就会出现ID为“basicModal”的模式。