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 相关文章推荐
JSON辅助格式化处理方法
Mar 26 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 Javascript
Vue常用API、高级API的相关总结
Feb 02 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生成年月日下载列表的方法
2015/04/24 PHP
教大家制作简单的php日历
2015/11/17 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
微信小程序签到功能
2018/10/31 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
简单介绍Python中的round()方法
2015/05/15 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python实现快递价格查询系统
2020/03/03 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
毕业生个人的求职信范文
2013/12/03 职场文书
报告会主持词
2014/04/02 职场文书
英语课外活动总结
2014/08/27 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
js中Object.create实例用法详解
2021/10/05 Javascript
Python集合的基础操作
2021/11/01 Python