twitter-bootstrap-3 – 什么是Bootstrap 3中的“data-target”

发布时间：2020-12-18 00:01:23 所属栏目：安全来源：网络整理

导读：你能告诉我什么是Bootstrap 3使用的data-target属性背后的系统或行为？我知道数据切换用于瞄准图形功能的Bootstrap的API JavaScript。解决方法数据目标由引导程序使用，使你的生活更轻松。你(大多数)不需要写一行Javascript来使用他们预先制作的 JavaScri

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

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

解决方法

数据目标由引导程序使用，使你的生活更轻松。你(大多数)不需要写一行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>将被修改(在这种情况下渐变)。
发生这种情况是因为CSS选择器中的#myModal指向具有myModal值的id属性的元素。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!