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函数
Sep 21 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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 Ajax乱码
2008/04/09 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
如何运行带参数的python脚本
2019/11/15 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python性能测试工具locust的使用
2020/12/28 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
房屋买卖协议书
2014/04/10 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书