bootstrap中导航条data-toggle=collapse与data-target的联动

最新推荐文章于 2023-07-24 22:23:07 发布
原创 最新推荐文章于 2023-07-24 22:23:07 发布 · 6.4k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在Bootstrap中利用data-toggle=collapse和data-target实现导航条在不同屏幕尺寸下的联动效果，确保在大于768px的屏幕下隐藏菜单按钮，小于768px时可以通过点击按钮展示和隐藏下拉菜单。

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

理想效果：

当浏览器页面大于768px时，导航条最右侧的菜单按钮隐藏

在这里插入图片描述
当浏览器页面小于768px时，可以点击菜单按钮显示、隐藏下拉菜单
在这里插入图片描述
在这里插入图片描述

代码：

其中navbar-toggle效果是隐藏菜单小图标，当屏幕分辨率小于768px时，移除此效果。

data-gottle="collaspse"效果为此元素会与另一个元素联动，联动效果是显示与隐藏。

data-target效果是选中与本元素联动的元素，“引号”内填目标元素的类名或id名，

在这里插入图片描述
data-toggle用于控制隐藏无序列表，data-target用于指定被作用无序列表

data-toggle的其他属性：
在这里插入图片描述

最低0.47元/天 解锁文章

200万优质内容无限畅学
Bootstrap入门练手小项目，创建一个有侧边栏三级标题可页面跳转的导航
m0_58704747的博客
10-19 2585
在已学习HTML和CSS，以及了解一些JS的基础上接触Bootstrap，编写一个具有侧边栏、三级标题以及可实现页面跳转的小项目给目前不了解这些内容的小伙伴提供学习链接~效果展示如下，目前只完善了其中一部分，但是基本操作已经可以实现~代码可参考。
基于Flask的任务清单管理系统
GLH_2236504154的博客
03-22 1647
1.目标 本项目将学习 Mariadb 作为数据库后端，Bootstrap 作为前端的技术栈， 并实现一个清单应用。从中我们可以学习 Flask Web 应用框架， 及 Mariadb 关系型数据库和 BootStrap web开发框架。 2.项目介绍 本应用修改自 TodoMVC 的 todo list 应用，使用 Mariadb 作为数据库后端，Bootstrap 作为前端的 Flask ...
Bootstrap中的data-toggle,data-target
weixin_30636089的博客
04-24 354
data-toggle指以什么事件触发常用的如collapse,modal,popover,tooltips等；data-target指事件的目标， 一起使用就是代表data-target所指的元素以data-toggle指定的形式显示。 Collapse 表示将页面区域折叠起来 modal, 模态框 popover,弹出框,如需激活弹出框，用户只需把鼠标悬停在元素上即可 toolti...
bootstrap——data-toggle、data-target、collapse
Harrietjia的博客
03-24 4245
向元素中添加 role="navigation"，有助于增加可访问性。向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。为了给导航栏添加响应式特性，要折叠的内容必须包裹在带有 class .collapse（折叠）、.navbar-collapse 的...
bootstrap 中的data-toggle=""
baidu_29352641的博客
07-18 6453
bootstrap 中的data-toggle=""这个明面上的意思是数据切换，下面我举一个例子可能更加的明白一些。  Tab1 在这段代码中，data-toggle="tab"将属性转换成了tab属性
bootsrap之data-toggle=""
热门推荐
dreamerzhang66的博客
05-08 4万+
bootsrap之data-toggle=""在自学Bootstrap的时候遇到了这个属性，自己查了下各种资料，下面是我自己的理解，有问题请指教。bootstrap 中的data-toggle=""这个明面上的意思是数据切换，下面我举一个例子可能更加的明白一些。 <li class="active"><a href="#tab1" data-toggle="tab"&
data-toggle=“modal“ data-target=“#borrowModal“
qq_52695936的博客
06-21 851
综上所述，这个按钮的作用是在单击时显示一个模态框，用户可以在其中提供一些信息，然后通过提交按钮提交数据。
Bootstrap table深度揭秘：多层表头实现原理及优化技巧
Bootstrap Table作为一种流行的前端表格解决方案，提供了丰富的功能和高度的可定制性。本文首先对Bootstrap Table的基本概念和结构进行解析，然后深入探讨其多层表头的设计思路、技术实现和性能考量。通过实践应用...
data-toggle="dropdown"/data-target/data-dismiss/data-backdrop/data-spy/data-slide/data-source是什么意思？
哈里·雪利博客
12-12 5654
在Bootstrap框架中查阅图灵计算机大词典： data-toggle="dropdown"： n.数据柄-下拉菜单模块； 功能作用：开启，打开，切换，删除，关闭，下拉，监听，触发，引入，输入，弹出，绑定,控制或隐藏等等......功能作用。 data-toggle即作为数据柄栓媒介把其后面"dropdown"下拉菜单添加切换到诸如按钮button等页面元素上，起到联动中介，点击下拉
CSS - toggle collapse 类似bootstrap的展开效果
weixin_30477293的博客
07-28 192
问题：toggle collapse 类似bootstrap的展开效果（展开一个关闭另一个） Demo：http://jsfiddle.net/JSDavi/L47vscw4/ 方案：使用transition动画，变换高度。 转载于:https://www.cnblogs.com/tx8899/p/4683687.html...
BootStrap-CSS样式_插件_折叠（Collapse）插件
LoveyourselfJiuhao的博客
01-05 1612
折叠（Collapse）插件  折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内 容面板，它都允许很多内容选项。  如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。还可以引用 bootstrap.js 或压缩版的 bootstrap.min.j...
bootstrap框架中的data-toggle属性值之下拉菜单
weixin_52657749的博客
04-10 4451
在使用bootstrap时需要先引入bootstrap的css、js文件以及jquery文件，这里，我使用的是 Staticfile CDN 上的库： 点击图中购物车（这里购物车使用的icon字体图标），则会出现图中所示下拉框。 主要代码如下： 0102030405060708091011121314<div class="dropdown">        <i ...
创建data_HTML中如何创建折叠菜单（collapse插件）
weixin_39855568的博客
12-01 489
Hi，好久不见，今天我们在这里给大家介绍一下折叠(collapse插件)的使用，折叠插件简单来讲在网站上创建可折叠部分，默认垂直向下折叠。可以在点击链接或按钮时显示或隐藏某个部分需要引用BootStrap的css以及javascript库。那么我们该如何创建呢？首先我们先在HBuilder创建项目，创建好项目之后进行插件引用，接下来开始编写。创建按钮时设置其data-toggle=“collaps...
Bootstrap(四十四)
shi199434的博客
12-15 308
Bootstrap 折叠（Collapse）插件 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。 如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用Transition（过渡）插件。或者，正如 Bootstrap 插件概览 一章中所提到，
折叠面板（Collapse）
weixin_44543412的博客
05-28 8101
折叠面板（Collapse） 开发工具与关键技术：Visual Studio 前端 作者：盘子 撰写时间：2019年5 月28 日 折叠面板(Collapse) 折叠面板知识点的整理：Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容，控制内容的可见性。它是一个灵活的插件，使用少量的类（来自必需的过渡插件），以方便切换行为。 点击下面任何一个按钮，通过类更改...
响应式前端框架Bootstrap系列（19）折叠（Collapse）插件
chongfeng2994的博客
11-28 412
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/zeping891103/article/details/79066406 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都...
5.11 Bootstrap 折叠(Collapse)插件
梁辰兴的博客
07-24 1339
通过 data 属性：向元素添加 data-toggle=“collapse” 和 data-target，自动分配可折叠元素的控制。注意：如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的bootstrap.min.js。正如您在实例中看到的，我们创建了一个可折叠的组件，与折叠面板（accordion）不同，我们没有添加属性 data-parent。'嘿，当您展开时会提示本警告'
bootstrap导航栏_bootstrap：创建可折叠的navbar下拉菜单
weixin_39526706的博客
11-22 989
准备bootstrap版本： v4.3以下内容放在.html文件的<head>里：<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34...
关于Bootstrap的data-toggle和data-target的认识（记录）
Miao_Yue_LIN的博客
02-21 1578
data-toggle和data-target的认识 <button type="button" class="update-button" style="width:70px; height:40px;" data-toggle="modal" data-target=".update-Dialog" > 编辑 </button> <div class="modal fade updat
data-toggle=collapse
04-11
data-toggle=collapse是Bootstrap框架中的一个属性，用于表示元素在点击时会收起（隐藏）或展开（显示）。该属性可以用于按钮、链接等元素上，当元素被点击时，与该属性绑定的内容区域将执行收起或展开的动作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值