Bootstrap 中data-[*] 属性的整理


Posted in Javascript onMarch 13, 2018

【1 data-属性】

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

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

data-* 属性包括两部分:

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

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

【2 Bootstrap 中的data属性】官网有一段介绍说 你可以仅仅通过 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来实现一些交互效果。

【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" 属性用于标记轮播在页面加载时就开始动画播放

总结

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

Javascript 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 #Javascript
setTimeout时间设置为0详细解析
Mar 13 #Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 #Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 #Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 #Javascript
解决vue-cli创建项目的loader问题
Mar 13 #Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 #Javascript
You might like
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
jquery使用经验小结
2015/05/20 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
vuex 的简单使用
2018/03/22 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
python求质数的3种方法
2018/09/28 Python
python 产生token及token验证的方法
2018/12/26 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
服务中心夜班服务员岗位职责
2013/11/27 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
承诺书的格式范文
2014/03/28 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
诚信承诺书模板
2014/05/26 职场文书
治安消防安全责任书
2014/07/23 职场文书
Nginx进程调度问题详解
2021/09/25 Servers