对bootstrap里date-*做一个汇总

本文系统整理了HTML中的data属性,包括data-toggle的各种应用如下拉菜单、模态框、提示框等,data-dismiss用于关闭模态窗口,以及data-slide-to、data-slide、data-ride在轮播图中的使用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近发现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-interval="2000":默认两秒动一下
data-keyboard="true":是否接受键盘控制
data-slide-to、data-slide、data-ride用于轮播图carousel。
 属性 data-slide接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to="2"将把滑块移动到一个特定的索 
引,索引从 0开始计数。
 data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放

基本上常用的data-都在这了,具体操作还要自己多测试。*
----------完-------------毕-----------------啦--------------------哈------------哈

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星陈~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值