Bootstrap中data-target 到底是什么


Posted in Javascript onFebruary 14, 2017

data-target 与data-toggle 还有data-spy 文档总是给人一种很突兀的方式给出来,然后又没有好好解释或者是我看的不够仔细?

HTML5允许开发者自由为其标签添加属性,这种自定义属性一般用“data-”开头。

我目前理解到在bootstrap中data-target,data-toggle等属性主要有两种作用:

【1.】在CSS中作标签选择器用。

如:

[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
 position: absolute;
 clip: rect(0, 0, 0, 0);
 pointer-events: none;
}

【2.】 用来传递替换文本(不知道是不是这么说),见下面的例子:

input[type=checkbox].ace.ace-switch + .lbl[data-lbl]::before {
 content: attr(data-lbl);
}

以上所述是小编给大家介绍的Bootstrap中data-target 到底是什么的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery foreach使用示例
Sep 12 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
详解Javascript实践中的命令模式
May 05 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 #Javascript
如何快速上手Vuex
Feb 14 #Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 #Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 #Javascript
Vue组件开发初探
Feb 14 #Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 #Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 #Javascript
You might like
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python中集合类型(set)学习小结
2015/01/28 Python
用Python实现KNN分类算法
2017/12/22 Python
python如何实现反向迭代
2018/03/20 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
学习雷锋主题班会
2015/08/14 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript