本文给大家收藏整理了关于Bootstrap 中data-[*] 属性的相关知识,感兴趣的朋友一起看看吧

data属性是HTML5的新属性。允许开发者自由为其标签添加属性.存储数据,这种自定义属性一般用“data-”开头。

存储的(自定义)数据能够被页面的 JavaScript 中利用。

data-* 属性包括两部分:

    * 属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符。 * 属性值可以是任意字符串。

说直白点就是data属性的应用,让HTML标签可以隐式的附带一些数据,而javascript就可以对这些属性数据进行 读/写 操作,进而可以做出相应的动作和事件。

官网有一段介绍说 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API,也应该是你的首选方式。

以前我们使用原生的javascrpt时候,是先确定了前端样式布局以及交互事件,然后在去利用javascript以及HTML的DOM树作已经存在文本对象,从而实习动态效果等交互。

后来facebook公司就发现,很多基本网页上效果是比较常用也是使用频繁的,比如下拉菜单、折叠、模态框等等。为什么不把这些常用的提取出一套标准模型,然后制定出使用规则,使用时按照这些规则直接拿来使用就可以了,于是就诞生了bootstrap。

说白了,以前是先有功能需求,再去实现。现在是功能都基本给你覆盖了,js操作函数都已经写好了,css样式也已经写好,你想使用就直接按照他的规则调用就行。然后为了能更多样化,bootstrap.js中的函数可以有不同的参数值,这些参数值就是根据你给标签的属性来设置的。(其实现在js插件基本都是这个套路)

标签的class="xxx" 属性,主要是用来使用bootstrap的css样式,以及作为一个可识别对象对象的类名标识。

标签的data-[xx]="yy"属性,主要是用来使用和调用bootstrap的组件和插件,即使用bootstrap.js来实现一些交互效果。

1 data-toggle data-toggle指以什么事件类型触发,常用的如下。

//下拉菜单 //模态框事件//提示框事件//标签页//折叠//弹出框//按钮事件

一般事件会作用到一个标签对象,如果是其他标签对象,就需要使用data-target指事件的标签目标。所以data-loggle和data-target有时会结合一起使用。如下

<button>
 开始演示模态框
</button>
<!-- 模态框(Modal) -->
<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div>
  <div>
   <div>
    <button type="button" 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,用来改变幻灯片相对于当前位置的位置。

总结

以上所述是小编给大家介绍的Bootstrap 中data-[*] 属性的整理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

    无相关信息
最新资讯
Facebook保留被窃取的数据详情 担忧依然存在

Facebook保留被窃取的

被黑的Facebook用户仍然不知道,在Facebook上周详细披露
零售巨头倒下 美国百年老店西尔斯申请破产

零售巨头倒下 美国百

电商与实体零售商的竞争由来已久。只是,电商的崛起还是
阿里整合三大外卖品牌 也为金融业务添砖加瓦

阿里整合三大外卖品牌

上周阿里集团刚宣布正式合并饿了么、口碑,成立本地生活
华为手机两品牌已超三星位居俄智能手机市场份额首位

华为手机两品牌已超三

最新数据显示,自今年6月起,华为旗下的荣耀和华为手机两
网易云音乐获新一轮融资 投资方表示长期看好

网易云音乐获新一轮融

10月12日,网易云音乐宣布达成新一轮融资,投资方包括百度
“DJ”丁磊推电音业务 情怀还是搅局?

“DJ”丁磊推电音业务

网易CEO丁磊,最近又跨界做起了电台DJ。
最新文章
vue中引用swiper轮播插件的教程详解

vue中引用swiper轮播

这篇文章主要介绍了vue中引用swiper轮播插件的方法,在
JS实现的视频弹幕效果示例

JS实现的视频弹幕效果

这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascr
jQuery实现的页面弹幕效果【测试可用】

jQuery实现的页面弹幕

这篇文章主要介绍了jQuery实现的页面弹幕效果,涉及jQu
深入理解Vue 组件之间传值

深入理解Vue 组件之间

这篇文章较详细的给大家介绍了vue组件之间传值的方法,
bootstrap实现点击删除按钮弹出确认框的实例代码

bootstrap实现点击删

本文通过实例代码给大家介绍了bootstrap实现点击删除
详解vue移动端项目的适配(以mint-ui为例)

详解vue移动端项目的

这篇文章主要介绍了详解vue移动端项目的适配(以mint-u