Bootstrap 3 中的“data-target"属性是什么? [英] What is the `data-target` attribute in Bootstrap 3?
问题描述
你能告诉我 Bootstrap 3 使用的 data-target
属性背后的系统或行为是什么吗?
我知道数据切换用于针对图形功能的 Bootstrap 的 API JavaScript.
data-target
被引导程序使用,让您的生活更轻松.您(大多数情况下)不需要编写一行 Javascript 即可使用他们预制的 JavaScript 组件.
data-target
属性应该包含一个 CSS 选择器,指向将被更改的 HTML 元素.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">启动演示模式按钮><!-- 模态--><div class="modalfade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">[...]
在这个例子中,按钮有data-target="#myModal"
,如果你点击它,<div id="myModal">...</div>
将被修改(在这种情况下淡入).发生这种情况是因为 CSS 选择器中的 #myModal
指向具有 myModal
值的 id
属性的元素.
有关 HTML5data-"属性的更多信息:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
Can you tell me what is the system or behavior behind the data-target
attribute used by Bootstrap 3?
I know that data-toggle used to aim API JavaScript of Bootstrap of graphical functionality.
data-target
is used by bootstrap to make your life easier. You (mostly) do not need to write a single line of Javascript to use their pre-made JavaScript components.
The data-target
attribute should contain a CSS selector that points to the HTML Element that will be changed.
<!-- 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>
In this example, the button has data-target="#myModal"
, if you click on it, <div id="myModal">...</div>
will be modified (in this case faded in).
This happens because #myModal
in CSS selectors points to elements that have an id
attribute with the myModal
value.
Further information about the HTML5 "data-" attribute: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
这篇关于Bootstrap 3 中的“data-target"属性是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!