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 相关文章推荐
JS.findElementById()使用介绍
Sep 21 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
js命名空间写法示例
Dec 18 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
js Proxy的原理详解
May 25 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类分享
2014/02/07 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
Jquery性能优化详解
2014/05/15 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
python爬取m3u8连接的视频
2018/02/28 Python
python读取中文txt文本的方法
2018/04/12 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
三好学生演讲稿范文
2014/04/26 职场文书
法定代表人授权委托书
2014/09/19 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
文明单位汇报材料
2014/12/24 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
单位更名证明
2015/06/18 职场文书