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

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

我知道数据切换用于瞄准graphicsfunctionBootstrap的API JavaScript。

data-target被bootstrap使用,让你的生活更轻松。 您(大多数情况下)不需要编写一行JavaScript来使用其预先创build的JavaScript组件 。

data-target属性应该包含一个CSSselect器,该select器指向将被更改的HTML元素。

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

在这个例子中,button有data-target="#myModal" ,如果你点击它, <div id="myModal">...</div>将被修改(在这种情况下淡入)。 发生这种情况是因为CSSselect器中的#myModal指向具有myModal值的id属性的myModal

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

切换告诉Bootstrap做什么,目标告诉Bootstrap哪个元素打开。 所以每当点击这样的链接,就会出现一个id为“basicModal”的模式。