Bootstrap许多的效果都有class=””来实现的，而这个data属性在这里就显得比较的特别。
这里的data属性是HTML5允许开发者自由为其标签添加属性，这种自定义属性一般以“data-”开头。
关于data-*的定义和用法：
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-*属性包括两部分：
属性名不应该包含任何大写字母，并且在前缀“data-”之后必须有至少一个字符。属性值可以是任意字符串
所以说，这里的data属性不属于Bootstrap的，是属于HTML5中的，这里只是Bootstrap开发者自定义的一个自定义属性，方便于用户调用。
看看Bootstrap api是怎么解释data属性的作用的：
你可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。这是Bootstrap中的一等API，也应该是你的首选方式。
下面总结一下常见的Bootstrap中的data-属性。
（1）data-toggle
data-toggle主要用于标签选择器
<div class=”dropdown”>
<a href=”#” class="dropdown-toggle" data-toggle="dropdown"></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>这里data-toggle=”dropdown”设置为a的属性，用于切换下拉菜单。
data-toggle：指以什么事件类型触发，常用的有：
data-toggle="button" //按钮事件
data-toggle="dropdown" //下拉菜单
data-toggle="collapse" //折叠
data-toggle="tab" //标签页
data-toggle="tooltip" //提示框事件
data-toggle="popover" //弹出框事件
data-toggle="model" //模态框事件data-toggle非常常用，常见的有下拉菜单，配合data-target一起使用。data-toggle，用于告诉 JavaScript 需要对按钮
做什么。data-target，指示要切换到哪一个元素。
（2）data-target
data-target主要用于配合data-toggle使用，常用于模态窗口、轮播图，作用是指定加载以及切换的目标。
在模态窗口中配合data-toggle一起使用：
在控制器元素（比如按钮或者链接）上设置属性 data-toggle=”modal”，同时设置data-target=”#identifier”或href=”#identifier”来指定要切换的特定的模态框（带有 id=”identifier”）。
模态窗口示例：
<!-- 按钮触发模态框 -->
<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”>
</div> （3）data-dismiss
常见的是在模态窗口中用于关闭模态窗口 data-dismiss=”modal”
（4）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” 属性用于标记轮播在页面加载时就开始动画播放
参考资料：
https://v3.bootcss.com/components/
https://blog.csdn.net/CoderBruis/article/details/78168182
Comments