bootstrap导航栏_bootstrap：创建可折叠的navbar下拉菜单

最新推荐文章于 2022-04-19 10:39:15 发布
最新推荐文章于 2022-04-19 10:39:15 发布
阅读量970 收藏
点赞数
文章标签： bootstrap导航栏 bootstrap设置宽度 python导航栏bootstrap visual studio code怎样设置代码折叠
本文介绍了如何使用Bootstrap v4.3创建可折叠的navbar下拉菜单。主要内容包括设置HTML中的主菜单链接和可折叠区域，以及CSS样式调整，如固定主菜单位置、防止内容被遮挡等。
摘要由CSDN通过智能技术生成

准备

bootstrap版本： v4.3

以下内容放在.html文件的<head>里：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

以下内容放在.html文件的<body>的最后：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

HTML：建立主菜单项目与可折叠区域的联系

<

1. 主菜单中的链接a.nav-link设置以下属性：

  • 表示点击此连接可打开/关闭一个折叠内容。
data-toggle="collapse"
  • 通过id定位折叠内容
data-target="#DropdownContent"

2. 创建可折叠区域div.collapse，并标记id：

<div class="collapse" id="DropdownContent">

CSS

设置下拉菜单的样式

.

固定主菜单项目的位置

没有设置下面的样式前，展开下拉菜单会导致主菜单项目的位移，包括：

  • Brand Name会向下移动到导航栏的中间。需要将其固定在导航栏顶部。

783089502cc0708a8593b55d20c31bd3.png

bootstrap中navbar的本质是一个flexbox，因此可以使用flexbox中的align-items属性控制主菜单项目的位置。代码实现：

.
  • 展开下拉菜单前后，Link的位置会出现轻微的水平移动。

469928355a472233809ceb7bf4f73b3b.png

Link展开后，它下方的下拉菜单的宽度大于Link本身的宽度，因此Link在主菜单的宽度被迫增加，向左推挤Another Link。解决方法是预设Link的最小宽度，保证其大于下拉菜单的宽度。代码实现：

.

移动主体内容

展开的导航栏会遮住一部分主体内容，因此要将主体内容往下移一点。可以给主体内容设置一个padding-top。

bootstrap3.0.3 侧边栏 菜单
03-27
bootstrap3.0.3 侧边栏 菜单 折叠展开及自定义图标
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
08-31
首先，我们来看Bootstrap导航栏（Navbar）。在HTML结构中，导航栏由`<nav>`元素与`navbar`类定义，如`<nav class="navbar navbar-default">`。`navbar-default`是预设的样式，提供了经典的蓝色背景。为了实现响应式...
Bootstrap之侧边栏
qq_44703604的博客
04-19 2517
文章目录前言一、侧边栏代码示例：解释： 前言 目前正好在学习bootstrap，用博客来记录一下，方便以后的复习，持续更新，会补上之前的 一、侧边栏代码示例： 代码如下（示例）： <button class="btn btn-success" data-bs-target="#aa" data-bs-toggle="offcanvas">显示</button> <div class="offcan.
Bootstrap练习：可折叠下拉菜单
weixin_34409822的博客
10-24 338
代码： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-widt...
详解bootstrap自定义侧边导航栏的方法
qq_43067585的博客
04-09 4678
本篇文章给大家介绍一下bootstrap自定义侧边导航栏的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 bootstrap自带的响应式导航栏是向下滑动的，有时满足不了个性化的需求，需要做一个类似于android drawerLayout 侧滑的菜单，这就是我要实现的bootstrap自定义侧滑菜单，参考了很多官网的侧滑，实现方法各有不同，优缺点也十分明显，有的官网首页为了仅仅实现一个侧滑的效果，用了owl.carousel滑屏的插件，个人觉得小题大做了。这个bootstrap
bootstrap实现折叠菜单
fangyuwuzhu的博客
04-19 4361
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&
bootstrap 导航栏下拉菜单，居右下拉菜单
最新发布
09-05
首先，为了创建一个基本的Bootstrap导航栏，我们需要引入Bootstrap的CSS和JS文件。这通常通过在HTML文件中添加CDN链接来完成： ```html <!DOCTYPE html> , initial-scale=1.0"> <title>Bootstrap导航栏 ...
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
08-28
Bootstrap 3.3.7 导航栏下拉菜单鼠标滑过展开效果 ...Bootstrap 3.3.7 导航栏下拉菜单鼠标滑过展开效果是一个非常实用的功能，可以帮助我们快速创建一个美观的下拉菜单，并且可以根据需要进行自定义。
bootstrap_components_ssb326:bt5组件练习
04-15
1. **导航栏(Navbar)**：Bootstrap的导航栏是创建顶部固定导航的利器，支持链接、下拉菜单、品牌logo等多种元素，且具有响应式特性，能够在不同屏幕尺寸下自动调整布局。 2. **网格系统(Grid System)**：Bootstrap...
curso_de_bootstrap_2018_platzi:Platzi的Bootstrap课程2018的练习和挑战
04-18
2. **组件**：Bootstrap包含一系列预先设计的组件，如导航栏（navbar）、按钮（buttons）、表单（forms）、卡片（cards）、模态框（modals）等，这些组件大大简化了网页开发工作。 3. **CSS样式**：Bootstrap的CSS...
超酷Bootstrap 3 隐藏滑动侧边栏菜单
12-12
这是一款基于Bootstrap3的炫酷隐藏滑动侧边栏菜单特效。该隐藏侧边栏通过汉堡包按钮来打开和关闭侧边栏菜单，并通过CSS3来制作平滑的过渡动画效果，整体效果非常炫酷。
基于jquery+bootstrap的侧边栏收缩菜单
05-05
基于jquery+bootstrap的侧边栏收缩菜单，实现切换伸展收缩菜单的功能。
Bootstrap响应式侧边栏导航菜单代码.zip
07-11
Bootstrap响应式侧边栏导航菜单代码
Bootstrap左侧下拉三级菜单导航
11-22
Bootstrap左侧下拉三级菜单导航 ,代码简洁，注释详细，希望各位大神多提意见后续会继续完善
Bootstrap侧边栏后台菜单代码
07-24
Bootstrap侧边栏后台菜单代码是一款基于bootstrap和图标库制作的侧边栏菜单后台管理页面特效。
浅谈对Bootstrap的看法之二（下拉菜单、动态选项卡、折叠导航栏、轮播图、模态框）
吉帅振博客
06-20 6331
1.下拉菜单相关说明：下拉菜单对应.dropdown 类，我们可以使用button按钮或a链接来打开下拉菜单，需要添加class="dropdown-toggle" 和 data-toggle="dropdown" 属性。主要代码：&lt;div class="dropdown"&gt; &lt;button type="button" class="btn btn-primary
bootstrap 侧边栏菜单颜色_超酷Bootstrap 3 隐藏滑动侧边栏菜单
weixin_30982943的博客
02-15 1060
插件描述：这是一款基于Bootstrap3的炫酷隐藏滑动侧边栏菜单特效。Bootstrap3侧边栏菜单这是一款基于Bootstrap3的炫酷隐藏滑动侧边栏菜单特效。该隐藏侧边栏通过汉堡包按钮来打开和关闭侧边栏菜单，并通过CSS3来制作平滑的过渡动画效果，整体效果非常炫酷。使用方法在页面中引入bootstrap的相关文件，以及侧边栏菜单的样式文件style.css文件。HTML结构侧边栏的HTML结...
BootStrap左侧菜单栏
pinkling的博客
03-17 3万+
1. 事先说明 事先说明，此代码比较简短所以并没有美化，所以css需要自己再补一些。 另外，我比较菜。。刚进入前端，只能用vue、avue和element做一点公司的crud，勿喷 2. 做法过程 bootstrap折叠 主要使用的是上面链接的功能。 代码： &lt;div&gt; &lt;!-- 侧边栏标签页 --&gt; &lt;ul class="na...
Bootstrap之侧边导航菜单(可折叠分组)
热门推荐
商明超的专栏
11-10 14万+
效果图： 源码：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值