工学1号馆

home

« | 返回首页 | »

Bootstrap中data属性总结

By Wu Yudong on July 08, 2019

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

No comments yet.
To verify that you are human, please fill in "七"(required)