bootstrap中data-*的一些归纳
最近发现date里面的东西跟常用,但是没有过一个系统化的归纳,今天下午正好有小会空,整合一下
如下:
1. data-toggle
data-toggle指以什么事件类型触发,常用的如下。
data-toggle="dropdown"//下拉菜单
data-toggle="model" //模态框事件
data-toggle="tooltip"//提示框事件
data-toggle="tab"//标签页
data-toggle="collapse"//折叠
data-toggle="popover"//弹出框
data-toggle="button"//按钮事件
----------
2 data-dismiss
常见的是在模态窗口中用于关闭模态窗口 data-dismiss=”modal”
----------
3 data-slide-to、data-slide、data-ride
data-slide-to、data-slide、data-ride用于轮播图carousel。
属性 data-slide接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to="2"将把滑块移动到一个特定的索
引,索引从 0开始计数。
data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放
基本上常用的data*-都在这了,具体操作还要自己多测试。
----------完-------------毕-----------------啦--------------------哈------------哈
bootstrap中data-*的一些归纳的更多相关文章
- Bootstrap 中的 Typeahead 组件 -- AutoComplete
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...
- BootStrap中Affix控件的使用方法及如何保持布局的美观
Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候 ...
- Bootstrap中的 Typeahead 组件
Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的 ...
- bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- bootstrap中table的colspan不起作用
bootstrap中table的colspan不起作用,即在不指定宽度的条件下,各个td宽度不符合colspan指定的宽度. 添加table0layout:fixed后显示正常. table{ tab ...
- Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound
今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyp ...
- bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery 中 data 方法的实现原理
前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...
随机推荐
- 『线段树及扫描线算法 Atlantis』
入门看这边『线段树 Segment Tree』. 扫描线 扫描线是一种解决一类平面内统计问题的算法,通常会借助线段树来实现,我们通过一道例题来引入这个算法. Atlantis Description ...
- CXF 教程(一)
CXF Web Service 简单示例 1 准备工作 2 第一个例子 3 客户端 3.1 使用 WSDL 生成客户端 4 RPC 风格 5 相关命令介绍 5.1 Java to WS 1 准备工作 ...
- [個人紀錄] windows form , usercontrol design 模式不見
windows form 跟 usercontrol 都變成cs檔 無法點擊進入設計模式 <Compile Include="Form1.cs"/> <Compi ...
- 对 GAN 的 value function 的理解
上式分为两个步骤: 第一步:调整discriminative model D的权重,使得V中两项取得最大值 第二步:调整generative model G的权重,使得V中第二项取得最小值 首先,分析 ...
- python numPy模块 与numpy里的数据类型、数据类型对象dtype
学习链接:http://www.runoob.com/numpy/numpy-tutorial.html 官方链接:https://numpy.org/devdocs/user/quickstart. ...
- Python进阶----pymysql的安装与使用,mysql数据库的备份和恢复,mysql的事务和锁
Python进阶----pymysql的安装与使用,mysql数据库的备份和恢复,mysql的事务和锁 一丶安装 pip install PyMySQL 二丶pymysql连接数据库 ### 语法: ...
- 汽车行业如何个性化定制转型?看APS系统在这家企业的运用
传统汽车行业中往往采用的是按库存推动式生产,一旦市场产生变动就会造成大量的生产,给企业带来大批的资金压力,而另一方面采用按单生产的方式企业往往面临供应链,产能的诸多约束条件限制,稍有不慎就会带来产线停 ...
- Python之路(第四十二篇)线程相关的其他方法、join()、Thread类的start()和run()方法的区别、守护线程
一.线程相关的其他方法 Thread实例对象的方法 # isAlive(): 返回线程是否活动的. # getName(): 返回线程名. # setName(): 设置线程名. threadin ...
- linux服务器问题排查:w命令卡住
基本情况 系统: ubuntu16.04 症状: who命令可以用,w命令用不了 sudo iotop命令会卡住,黑屏 nvidia-smi命令和nvl命令都用不了,卡住 排查步骤 strace ps ...
- springboot+jndi+tomcat配置多数据源
1.在application.properties中,添加jndi配置,如下图 2.新建dataSourceConfig类 3.dataSourceConfig类详细代码,这里只贴出其中一个,多个数据 ...