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 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
JavaScript 数组的 uniq 方法
Jan 23 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
JavaScript函数详解
Feb 27 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 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
ThinkPHP表单自动验证实例
2014/10/13 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
javascript实现多边形碰撞检测
2020/10/24 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python处理按钮消息的实例详解
2017/07/11 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python @property使用方法解析
2019/09/17 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
python3 kubernetes api的使用示例
2021/01/12 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
Java多态性的定义以及类型
2014/09/16 面试题
新闻编辑自荐信
2013/11/03 职场文书
产品推广策划方案
2014/05/10 职场文书
社区先进事迹材料
2014/05/19 职场文书
安全目标管理责任书
2014/07/25 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
投标承诺函范文
2015/01/21 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python