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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
JScript的条件编译
May 29 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
详解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下安装配置fckeditor编辑器的方法
2011/03/02 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
原生JS实现留言板
2020/03/26 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python线程锁(thread)学习示例
2013/12/04 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
python 图像增强算法实现详解
2021/01/24 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
总经理助理工作职责
2014/02/06 职场文书
监察建议书范文
2014/03/12 职场文书
机关单位动员会主持词
2014/03/20 职场文书
环境日宣传活动总结
2014/07/09 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
二手房购房协议书范本
2014/10/05 职场文书
2015年企业新年寄语
2014/12/08 职场文书
优秀党员申报材料
2014/12/18 职场文书
高中班主任评语
2014/12/30 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
生产实习心得体会范文
2016/01/22 职场文书