在bootstrap中窗口缩小到一定程度后，点击某一元素实现导航栏的显隐藏

最新推荐文章于 2022-05-02 15:32:29 发布
最新推荐文章于 2022-05-02 15:32:29 发布
阅读量6.7k 收藏 9
点赞数 2
分类专栏： 前端学习记录 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43757266/article/details/84392525
版权
本文介绍如何在Bootstrap中，当窗口尺寸变小时，通过点击特定元素（如'MEAN'）来实现导航栏的显示和隐藏。通过CSS处理checkbox的状态，利用label与checkbox的关联，确保点击文字时能控制导航栏的可见性。关键代码部分展示了如何通过CSS判断checkbox是否选中，并相应地控制div的显示和隐藏。
摘要由CSDN通过智能技术生成

先贴上一个效果图

刚开始是这样：在大屏幕下 和在小屏幕下的效果：（对MEAN 进行操作，在大屏幕中，MENU是隐藏起来的，只有在小屏幕找那个才会有显示！）
在这里插入图片描述
在这里插入图片描述
当小屏幕下点击 MEAN 的时候，效果如下：导航栏会出现，再次点击的时候导航栏会消失。
在这里插入图片描述

实现原理？

简单说一下自己的想法。
先贴上代码：css 我只列出重要的一部分。

<div class="navbar navbar-default navbar-bgc ">
        <div class="container">
            <div class="row">
                <div class="navbar-header">
                    <a class="navbar-brand logo-img" href="#"> <
最低0.47元/天 解锁文章
Flyaha
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Bootstrap5 侧边栏导航(Offcanvas)
shengyin714959的博客
08-23 735
Bootstrap5 侧边栏侧边栏类似于模态框，在移动端设备中比较常用。
bootstrap4实现侧边导航栏带隐藏按钮
12-09
用bootstrap4实现侧边导航栏并且带隐藏按钮。效果就是，点击按钮侧边导航栏出现，再点击消失。不用bootstrap也可以实现
零基础Bootstrap入门教程(21)--响应式导航栏详解
程序员大阳
02-28 5124
本文目录1. 概述2. 响应式导航栏3. 可折叠导航栏4. 深色导航栏5. 顶部固定菜导航栏6. 导航栏添加下拉菜单和表单控件7. 小结 1. 概述 在很长的一段时间里，我都很羡慕一个一些大神的个人网站。这些网站有一个共同特点，同时支持PC端显示和手机端显示。 当使用手机打开时，导航栏会自动折叠为一个按钮，效果棒极了。 后来学会了Bootstrap才知道，偶买噶，Bootstrap提供的导航栏原来天生就带这效果。厉害！ 2. 响应式导航栏 导航栏的创建还是比较复杂的，但是不要担心，我们来一步步分析创建过程。
BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）
09-01
主要介绍了BootStrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果，非常不错，具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
Bootstrap CSS根据屏幕大小控制隐藏与显示
极客神殿
09-14 1万+
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。 需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。 超小屏幕 小屏幕 中等屏幕 大屏幕 手机 (<768px) 平板 (≥768px) 桌面 (≥992px) 桌面 (≥1200...
【JavaScript】Bootstrap自动显示/隐藏菜单栏
大海的博客
07-14 4374
function test() { document.getElementById('showc').style.display='block'; } function test1() { document.getElementById('showc').style.display='none'; } 编程语言
Bootstrap顶部浮动导航菜单页面滚动显示隐藏.zip
04-12
在Bootstrap 3中，这个功能可以通过添加`data-spy="affix"`属性到导航栏元素来实现。当页面滚动到特定位置时，导航栏会固定在顶部，直到用户滚动回原始位置。 `css`目录下的CSS文件，可能是对Bootstrap默认样式进行...
bootstrap自定义样式之bootstrap实现侧边导航栏功能
12-02
在本篇文章中，我们将探讨如何利用Bootstrap自定义样式，特别是实现一个类似Android DrawerLayout的侧边导航栏功能，以满足个性化需求。 首先，我们注意到侧边导航栏在Bootstrap中通常是通过定位（position: fixed...
Bootstrap实现响应式导航栏效果
11-22
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-...
bootstrap实现响应式导航栏，折叠隐藏效果
热门推荐
tammy1151的博客
08-22 4万+
bootstrap实现响应式导航栏 PC机显示正常的长条导航，手机端实现折叠隐藏的按钮效果 向 标签添加 class .navbar、.navbar-default（导航条背景白）navbar-inverse导航条背景黑。向上面的元素添加 role="navigation"，有助于增加可访问性。向 元素添加一个标题 class .navbar-header，内部包含了带有 clas
bootstrap响应式布局导航效果
06-01
bootstrap响应式布局，调整浏览器大小查看效果
在小屏幕和手机屏幕下，Bootstrap汉堡导航的自动折叠隐藏
luoyu6的博客
10-14 2725
最近在使用Bootstrap框架做网页时发现，在小屏幕和手机屏幕之下（max-width: 768px），导航栏不能在点击导航链接时，自动折叠导航栏。或者在展开导航栏后，如果不点击其中的导航链接，用户在选择滑动屏幕时，不能做到自动折叠导航栏。需要用户手动点击折叠按钮，才能收回去。这在小屏幕宝贵的显示面积内，显然不合理，用户体验也不好。 解决办法： //点击导航之后隐藏         $(w...
Bootstrap 一篇就够 快速入门&使用（中文文档）
m0_60786924的博客
05-02 2万+
目录 一、Bootstrap简介 什么是 Bootstrap？ 历史 为什么使用 Bootstrap？ Bootstrap 包的内容 在线实例 Bootstrap 实例 更多实例 Bootstrap 实例2 二、Bootstrap环境安装 下载 Bootstrap 文件结构 预编译的 Bootstrap Bootstrap 源代码 HTML 模板 实例 实例 实例 Staticfile CDN 推荐 三、关于Boostrap的中文文档 布局 Container..
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第三套) 附答案
go
11-19 1万+
目录试题一（30分）试题二（24分）试题三（20分）试题四（26分）实操考试答案评分细则 2020年下半年 Web前端开发中级 理论考试 考生姓名：——————————— 准考证号：—————————— 试题一（30分） 阅读下列说明、效果图和代码，进行静态网页开发，填写（1）至（15）代码，每空2分。 【说明】 慧谷阳光公司网站希望做成跨设备跨浏览器响应式网站，可以一次开发就可在pc端，pad端，手机端任意浏览，因此采用bootstrap响应式布局方式控制网站头部和内容栅格。
Bootstrap屏幕缩小时在导航栏下生成滚动条
吉帅振博客
06-21 3855
相关说明：Bootstrap在进行响应式布局时，当屏幕缩小到一定程度时在导航栏下生成滚动条。主要代码：@media screen and (max-width:780px){ #product .product-list ul{width: 800px;flex-wrap: nowrap;} #product .product-list ul li{width: 100px;} ...
前端案例-4 Boostrap布局移动页面
KathyLJQ的博客
03-28 389
案例前准备： 下载Boostrap https://www.bootcss.com/ 解压后找到里面的CSS文件夹 3. 将bootstrap中的css 文件夹放到项目目录的bootstrap文件夹中 项目中要使用到的Bootstrap类： container类 |响应式布局的容器|固定宽度|类前缀|列数| |–|--|–|--| |大屏>=1200px | 宽度为1170px | .col-lg-| 12列 | |大屏>=1200px | 宽度为1170px | .col-lg-| 1
bootstrap4 控制元素在不同尺寸的设备中 显示、隐藏
业余前端的职业经历
02-24 4895
这几天接到了一个响应式项目 要求同一套代码能在pc和手机端 展示 不同的效果 很简单的一个项目 但是pc上面显示的东西会比较多 但是移动端就很简单了 这个时候就需要隐藏一些元素了 首先boot4 中 隐藏和显示 元素是 d-none / d-block 根据不同尺寸 可以设置 d-sm-none 在小屏幕及以上屏幕都隐藏 d-md-none 在中屏幕和大屏幕上都隐藏 d-lg-none 只在大屏幕的时候隐藏 同样 d-sm-block 在...
HTML5自动隐藏菜单,Bootstrap固定顶部导航菜单自动隐藏插件
weixin_42360778的博客
05-31 967
这是一款Bootstrap固定顶部导航菜单自动隐藏插件。该插件可以使Bootstrap固定顶部导航菜单在页面向下滚动时自动隐藏，支持bootstrap4和bootstrap3。使用方法在页面中引入的bootstrpa相关文件和jquery.bootstrap-autohidingnavbar.min.js。初始化插件在页面中插入bootstrap固定顶部导航菜单代码，然后通过下面的方法来初始化插件...
Bootstrap元素的显示与隐藏
jwz934738949的博客
07-03 2477
在Bootstrap中，为了更好的适配移动设备，需要对页面中不重要的内容设置元素的显示与隐藏 当在大屏幕中，可以将那些并不重要的组件进行显示，而在小屏幕中，为了节省空间，需要对一些元素进行隐藏 为元素添加类d-none，将在所有设备中隐藏该元素，d-*-none，将为特定尺寸的屏幕进行隐藏元素。例如：d-sm-none，将在小屏幕中隐藏元素 但是需要注意的是，Bootstrap默认移动端优先，也就是会从最小的设备开始适配，然后将所有大于的设备也进行适配 当设置了小屏幕隐藏之后，默认小屏幕以及之上的所有屏幕.
js缩小窗口时显示导航栏
最新发布
05-28
可以通过监听窗口大小改变事件，来实现在缩小窗口时显示导航栏。具体做法如下： 1. 在页面中添加导航栏的HTML代码，并设置其样式为`display: none`，即默认隐藏导航栏： ```html <nav id="navbar" style="display: none;"> <!-- 导航栏内容 --> </nav> ``` 2. 使用JavaScript监听窗口大小改变事件。当窗口宽度小于一定值时，显示导航栏；否则隐藏导航栏。以下是示例代码： ```javascript var navbar = document.getElementById("navbar"); window.addEventListener("resize", function() { if (window.innerWidth < 768) { // 当窗口宽度小于768px时显示导航栏 navbar.style.display = "block"; } else { // 否则隐藏导航栏 navbar.style.display = "none"; } }); ``` 以上代码中，`window.innerWidth`表示当前窗口的宽度，判断条件中使用768是因为在Bootstrap中，屏幕宽度小于768px时会切换为移动设备样式。你可以根据需要自行调整判断条件。 需要注意的是，监听窗口大小改变事件会导致频繁的DOM操作，可能会影响页面性能，建议谨慎使用。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值