BOOTSTRAP：btn按钮中的data-toggle属性失效问题

最新推荐文章于 2023-08-15 18:44:49 发布
最新推荐文章于 2023-08-15 18:44:49 发布
阅读量4k 收藏
点赞数 1
分类专栏： web 文章标签： data-toggle 失效 webstorm bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43957238/article/details/97505341
版权

BOOTSTRAP：btn按钮中的data-toggle属性失效问题

BOOTSTRAP：btn按钮中的data-toggle属性失效问题

bootstrap中用下拉选组件的时候遇到了点问题
在这里插入图片描述一开始这样写，发现失效，找了半天，实际上就是引入的js文件顺序问题。如果说有些组件不使用，其他一些bootstrap功能是可以正常使用的，但是F12会发现报错，后来将jquery库放在最前边就可以了
在这里插入图片描述
在这里插入图片描述
其实这个时候你F12已经没有报错了，看来不怪浏览器，不怪版本，还怪自己啊~~啊哈哈

这么厉害，要不要在村头摆两桌
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Bootstrap 中data-[*] 属性的整理
08-27
本文给大家收藏整理了关于Bootstrap 中data-[*] 属性的相关知识，感兴趣的朋友一起看看吧
bootstrap-show-password-toggle:Bootstrap 表单的将密码显示为文本切换
08-03
使用 npm install bootstrap-show-password-toggle 使用安装yarn add bootstrap-show-password-toggle用法在 CSS 中包含show-password-toggle.css 将输入的密码包装在input-group div 中，如下所示： <...
bootstrap中button在data-toggle="##" data-target="xxx"没起作用的解决方法
baidu_36681154的博客
08-26 1万+
例如·今天我遇到bootstrap点击button没有弹出下面无序列表 代码如下： 首页 案例 资讯 关于 找不到错误，后来把放在 前面就解决。
Bootstrap 中： data-toggle 与 data-target 的作用
愿我如星君如月 ... 夜夜流光相皎洁 ...
03-18 5502
<button type="button" class="update-button" style="width:70px; height:40px;" data-toggle="modal" data-target=".update-Dialog" > 编辑 </button> &lt...
bootstrap 中的data-toggle=""
baidu_29352641的博客
07-18 6292
bootstrap 中的data-toggle=""这个明面上的意思是数据切换，下面我举一个例子可能更加的明白一些。  Tab1 在这段代码中，data-toggle="tab"将属性转换成了tab属性
bootstrap中模态框的大小设置
weixin_33853827的博客
03-25 2076
　　 &lt;!-- 大模态框的调节 --&gt; &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"&gt;Large modal&lt;/button&gt; &lt;div class="modal
data-toggle,data-target,data-dismiss
喵丶布
09-03 3138
data-toggle指以什么事件触发，常用的如collapse,modal,popover,tooltips等； data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示。 ...
bootstrap 模态框 data-toggle 不起作用
XcantloadX的博客
07-21 1380
检查依赖引用顺序，应该是：jquery.js、bootstrap.css、bootstrap.js 如果是 Bootstrap5，请改用 data-bs-toggle！
data-toggle与data-target是什么作用
热门推荐
d295968572的博客
02-23 11万+
Bootstrap为这些a之类元素都绑定上了事件，而终止了链接默认行为。 data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示 data-target 与data-toggle 还有data-spy 文档总是给
bootstrap框架中的data-toggle属性值之下拉菜单
weixin_52657749的博客
04-10 4257
在使用bootstrap时需要先引入bootstrap的css、js文件以及jquery文件，这里，我使用的是 Staticfile CDN 上的库： 点击图中购物车（这里购物车使用的icon字体图标），则会出现图中所示下拉框。 主要代码如下： 0102030405060708091011121314<div class="dropdown">        <i ...
解决bootstrap data-toggle tooltip modal collapse冲突（同时使用tooltip工具提示、modal模态框、collapse折叠）的方法
qq_33168664的博客
12-10 424
解决bootstrap data-toggle tooltip modal collapse冲突（同时使用tooltip工具提示、modal模态框、collapse折叠）的方法
bootstrap4-toggle：Bootstrap 4切换按钮切换
01-31
Bootstrap 4切换Bootstrap 4 Toggle是一个Bootstrap插件/小部件，可将复选框转换为切换。图书馆分布项目描述支持bootstrap4（需要jQuery）支持bootstrap4 +（ES6类，没有依赖项）支持bootstrap4 +（React组件，没有...
Bootstrap中data-target 到底是什么
12-11
我目前理解到在bootstrap中data-target，data-toggle等属性主要有两种作用： 【1.】在CSS中作标签选择器用。 如： [data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .btn-group > ....
Bug日记-webstorm运行yarn 命令报错
heart000_1
08-15 1802
Bug日记-webstorm运行yarn 命令报错
2024年全球嵌入式配电盘行业总体规模、主要企业国内外市场占有率及排名.docx
04-15
2024年全球嵌入式配电盘行业总体规模、主要企业国内外市场占有率及排名
AccessControl-6.3-cp39-cp39-manylinux_2_17_aarch64.whl.zip
04-15
AccessControl-6.3-cp39-cp39-manylinux_2_17_aarch64.whl.zip
AccessControl-6.0-cp37-cp37m-manylinux_2_5_x86_64.whl.zip
04-15
AccessControl-6.0-cp37-cp37m-manylinux_2_5_x86_64.whl.zip
【Python-WEB自动化-06课-对验证码的处理】
最新发布
04-15
【Python-WEB自动化-06课-对验证码的处理】
AccessControl-5.4-cp38-cp38-manylinux_2_17_aarch64.whl.zip
04-15
AccessControl-5.4-cp38-cp38-manylinux_2_17_aarch64.whl.zip
Bootstrap中的data-toggle,data-target
05-14
`data-toggle` 和 `data-target` 是Bootstrap中的两个HTML属性，用于定义一个触发器和一个目标元素。 `data-toggle` 属性指定了触发器的类型，可以是 `modal`、`dropdown`、`tab` 等。它告诉Bootstrap该元素是用来触发一个特定的功能。 `data-target` 属性指定了目标元素的选择器或ID。当触发器被触发时，Bootstrap会根据 `data-target` 属性查找目标元素，然后对其进行相应的操作，比如展示一个模态框。 举个例子，如果你想在一个按钮上添加模态框功能，你可以这样写： ```html <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">模态框标题</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> 模态框内容 </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> ``` 这个例子中，`data-toggle="modal"` 和 `data-target="#myModal"` 指定了该按钮是一个触发模态框的按钮，并且对应的目标元素是 ID 为 `myModal` 的 `div` 元素。当按钮被点击时，Bootstrap会自动展示这个模态框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值