本文给大家收藏整理了关于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-[*] 属性的整理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

    无相关信息
最新资讯
苹果拒绝印度监管机构在iPhone中预装软件

苹果拒绝印度监管机构

苹果公司以可能存在隐私风险为由拒绝的这种预装软件的
赛灵思收购深鉴科技:中国AI芯片产业难改依附式生存

赛灵思收购深鉴科技:中

全球最大的可编程芯片(FPGA)厂商赛灵思宣布收购中国 AI
热销两年的AirPods背后,是苹果对阵安卓的杀手锏

热销两年的AirPods背

AirPods成功的背后,反映出了苹果在对阵安卓时,能够发挥
印度“失去”苹果 市场真的在滑向低端吗?

印度“失去”苹果 市

我们看印度市场的变化,不能只看表面,要看三年后、五年后
冯鑫的危机和转机

冯鑫的危机和转机

作为一名把企业做到IPO、并且在股市上创造了连续涨停
上市破发启示录:2018年互联网公司能从泡沫时代学到什么?

上市破发启示录:2018年

读史可以知兴替,为此翻出了早已落灰的旧资料,在2000年那
最新文章
Angular2进阶之如何避免Dom误区

Angular2进阶之如何避

这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小
使用FileReader API创建Vue文件阅读器组件

使用FileReader API创

这篇文章主要介绍了使用FileReader API创建一个Vue的
react 实现页面代码分割、按需加载的方法

react 实现页面代码分

本篇文章主要介绍了react 实现页面代码分割、按需加载
Vue项目分环境打包的实现步骤

Vue项目分环境打包的

这篇文章主要介绍了Vue项目如何分环境打包,实现方法大
vue 组件中slot插口的具体用法

vue 组件中slot插口的

这篇文章主要介绍了vue 中slot 的具体用法,包括子组件
JS遍历DOM文档树的方法实例详解

JS遍历DOM文档树的方

这篇文章主要介绍了JS遍历DOM文档树的方法,结合实例形