Bootstrap中data属性解释
【1 data-属性】
data属性是HTML5的新属性。允许开发者⾃由为其标签添加属性，存储数据，这种⾃定义属性⼀般⽤“data-”开头。
存储的（⾃定义）数据能够被页⾯的 JavaScript 所获取利⽤。
data-* 属性包括两部分：
1. * 属性名不应该包含任何⼤写字母，并且在前缀 “data-” 之后必须有⾄少⼀个字符。
2. * 属性值可以是任意字符串。bootstrap 5
说直⽩点就是data属性的应⽤，让HTML标签可以隐式的附带⼀些数据，⽽Javascript就可以对这些属性数据进⾏读/写操作，进⽽可以做出相应的动作和事件。
【2 Bootstrap 中的data属性】
官⽹有⼀段介绍说你可以仅仅通过 data 属性 API 就能使⽤所有的 Bootstrap 插件，⽆需写⼀⾏ JavaScrip
t 代码。这是 Bootstrap 中的⼀等 API，也应该是你的⾸选⽅式。
以前我们使⽤原⽣的javascrpt时候，是先确定了前端样式布局以及需要的交互事件，然后再去利⽤Javascript以及HTML的DOM树去操作已经存在⽂本对象，从⽽实现动态效果等的交互。
后来facebook公司就发现，很多基本⽹页上效果是⽐较常⽤也是使⽤频繁的，⽐如下拉菜单、折叠、模态框等等。为什么不把这些常⽤的提取出⼀套标准模型，然后制定出使⽤规则，使⽤时按照这些规则直接拿来使⽤就可以了，于是就诞⽣了Bootstrap。
换⼀种简说法就是，以前是先有功能需求，再去实现。现在是功能都基本给你覆盖写好了，js相关操作函数都已经写好了，css样式也已经写好，你想使⽤就直接按照他的规则调⽤就⾏。然后为了能更多样化,Bootstrap.js中的函数可以有不同的参数值，这些参数值就是根据你给标签的属性来设置的。（其实现在js插件基本都是这个套路,Java各种类库也是）
标签的class="xxx" 属性，主要是⽤来使⽤bootstrap的css样式，
以及作为⼀个可识别对象对象的类名标识。
标签的data-[xx]="yy"属性，主要是⽤来使⽤和调⽤bootstrap的组件和插件，即使⽤bootstrap.js来实现⼀些交互效果。
【3 Bootstrap 常见data属性】
1 data-toggle
data-toggle指以什么事件类型触发，常⽤的如下。
data-toggle="dropdown"//下拉菜单
data-toggle="model" //模态框事件
data-toggle="tooltip"//提⽰框事件
data-toggle="tab"//标签页
data-toggle="collapse"//折叠
data-toggle="popover"//弹出框
data-toggle="button"//按钮事件
⼀般事件会作⽤到⼀个标签对象，如果是其他标签对象，就需要使⽤data-target指事件的标签⽬标。所以data-loggle和data-target有时会结合⼀起使⽤。如下
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演⽰模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
code。。。
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
2 data-dismiss
常见的是在模态窗⼝中⽤于关闭模态窗⼝ data-dismiss=”modal”
3 data-slide-to、data-slide、data-ride
data-slide-to、data-slide、data-ride⽤于轮播图carousel。
属性 data-slide接受关键字 prev 或 next，⽤来改变幻灯⽚相对于当前位置的位置。
使⽤ data-slide-to 来向轮播传递⼀个原始滑动索引，data-slide-to="2"将把滑块移动到⼀个特定的索引，索引从 0开始计数。
data-ride="carousel" 属性⽤于标记轮播在页⾯加载时就开始动画播放
转⾃：blog.csdn/summerxiachen/article/details/79475961

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。