Bootstrap 5-导航栏-固定导航栏和粘性导航栏

已于 2023-11-25 15:13:03 修改
阅读量835 收藏 3
点赞数
分类专栏： Bootstrap.5 文章标签： bootstrap
于 2023-09-26 22:41:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73839298/article/details/133325024
版权

固定导航栏的位置

  • fixed-top（顶部）
  • fixed-bottom（底部）

代码图

效果图

代码图

效果图

粘性导航栏的位置

  • sticky-top（粘性顶部）

代码图

效果图

Jealous_-
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap固定导航条
歪脖先生的博客
05-20 5132
固定导航条 默认情况下，导航条的定位属性为 static，它的位置由它的HTML代码中定义的顺序出现，并随着页面向下滚动。 很多时候，我们却希望导航条固定在浏览器窗口的顶部或底部，这种固定导航条的应用在移动端尤为常见。 1、固定在顶部 如果想让导航条固定在顶部，只需在 .navbar 类追加一个 .navbar-fixed-top 类即可。还可以在导航条内部包含一个.container或....
bootstrap 固定底部导航自适应
weixin_34355559的博客
10-14 789
在使用bootstrap 底部导航的时候遇到了一个问题 —— 当我的内容超过一屏的时候，底部的部分内容会被固定的导航内容遮盖   自己写了一个JS脚本，解决自适应的问题   <nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container-fluid margin_bottom_5 m...
五、Bootstrap之菜单栏和导航栏
最新发布
Itcodewizard的博客
05-14 1296
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
bootstrap：导航栏【基础、简单、实用】
成长的嘻嘻哥
10-05 1813
寥寥几行代码，实现简洁，直观的效果，清晰的展现了bootstrap的特点和优点
Bootstrap4(二十)
shi199434的博客
12-18 1038
Bootstrap4 导航栏 导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 导航栏上的选项可以使用  元素并添加 class="navbar-nav" 类。 然后在  元素上添加 .nav-item 类，  
Bootstrap——导航栏
xun__xing的博客
07-31 1844
导航栏一、导航栏1.基本2.表单3.文本处理4.配色方案5.居中容器6.定位7.响应式8.拓展 一、导航栏 1.基本 导航栏需要使用.navbar 来定义，并使用 .navbar-expand{-sm|-md|-lg|-xl} 用于响应式布局以及使用配色方案Class 。 <nav class="navbar navbar-expand-lg bg-light"> <a href="#" class="navbar-brand"> <img src="http://
bootstrap-transparent-navbar:Bootstrap 5-tResponsive透明导航栏，固定在滚动网页顶部
05-24
本项目"bootstrap-transparent-navbar"专注于创建一个Bootstrap 5的响应式透明导航栏，该导航栏在用户滚动网页时会变为不透明，固定在页面顶部，以提供一致的用户体验。 首先，我们需要了解Bootstrap 5的基础知识。...
bootstrap自定义样式之bootstrap实现侧边导航栏功能
12-02
总结起来，通过理解Bootstrap的响应式设计和CSS3的特性，我们可以自定义Bootstrap导航栏，创建出适应各种设备的侧边导航栏。这个过程涉及到定位、响应式工具类、CSS3变换和过渡效果的运用，以及对不同设备视口的适配...
Bootstrap-html渐变顶部固定自适应导航栏
12-12
本示例主要关注如何使用Bootstrap来创建一个具有渐变色彩和顶部固定的自适应导航栏，这对于现代网页设计至关重要。 首先，让我们深入理解这个"Bootstrap-html渐变顶部固定自适应导航栏"的概念。渐变导航栏是指在...
Bootstrap实现渐变顶部固定自适应导航栏
11-29
具体代码如下所示： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;...link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap
固定导航栏（头部、底部、左边等）
H1453571548的博客
08-29 4248
固定导航栏在左边 固定导航栏在头部 固定导航栏在底部
一个炫酷的Bootstrap导航菜单
08-31
主要为大家详细介绍了一个炫酷的Bootstrap导航菜单的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap实现响应式自适应导航栏，并实现平滑滚动
07-11
利用bootstrap和jQuery制作的一个响应式导航栏，即能够监听页面滚动事件，当页面滚动到页面某位置时导航栏会自动发生变化。同时点击导航栏滚动时利用简单的jQuery实现了平滑滚动。而且能自适应屏幕大小的变化，监听了onresize事件。
Bootstrap 导航栏
shengyin714959的博客
08-14 977
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
bootstrap5 常用类大全
O8088的博客
09-14 1674
x – 设置padding-left和padding-right或margin-left和margin-right。y – 设置padding-top和padding-bottom或margin-top和margin-bottom。1 – 将边距或填充设置为.25rem(如果font-size为16px则为4px)5 – 将边距或填充设置为3rem(如果font-size为16px则为48px)3 – 将边距或填充设置为1rem(如果字体大小为16px，则为16px)
bootstrap中的导航条会遮挡导航条下面的内容
u010523770的专栏
03-14 9247
用bootstrap的导航条固定在顶部样式 navbar-fixed-top 结果当浏览器窗口缩小的时候，导航条变高了，原来导航条下面的div设置的margin-top：80px不够高了。 这个时候解决办法是：用 media query 适配不同尺寸下的margin-top 或者用bootstrap自带的navbar-static-top样式， http://v3.boot
Bootstrap静止在页面底部的导航栏
P_的博客
10-08 8316
用Bootstrap制作页面，使用&lt;header&gt;&lt;content&gt;&lt;footer&gt;结构时会遇到，页面内容较少，底部栏或页脚浮到页面中间。 Bootstrap本身提供了navbar-fixed-top 、navbar-fixed-bottom 、navbar-static-top三种方式使用导航条，却无法解决此问题，我们需要navbar-static-bott...
自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
weixin_34167043的博客
01-11 4743
有人说前端发展太快,框架太多,各有所需，各有所长。看看这幅图，估计都知道这些框架，但是大部分公司中实际要用到的也就那么几个。 发展再快,框架再多。还是得回到原点，不就是Html+Css+JavaScript吗，使用任何牛逼的框架之前你也得把这些东西玩熟练了。bootstrap上大一的时候学html的时候就听老师说过，接触也快一年多了，所以这里准备写一...
bootstrap让footer固定在顶部和底部
weixin_30873847的博客
07-25 3735
一、原理 使用fixed进行固定定位，相对于浏览器窗口进行定位，然后再设置其z-index的值即可。 二、Bootstrap中使用的类 1.顶部固定：navbar-fixed-top 2.底部固定：navbar-fixed-bottom 1 <footer class="navbar-fixed-bottom"> 2 <div class="cont...
bootstrap5侧边导航栏
05-14
Bootstrap 5 中的侧边导航栏使用 `Nav` 和 `Navs` 组件实现，以下是一个简单的示例代码： ```html <div class="container-fluid"> <div class="row"> <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <div class="position-sticky pt-3"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#"> <span data-feather="home"></span> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="file"></span> Orders </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="shopping-cart"></span> Products </a> </li> </ul> </div> </nav> <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> <h1 class="h2">Dashboard</h1> <div class="btn-toolbar mb-2 mb-md-0"> <div class="btn-group me-2"> <button type="button" class="btn btn-sm btn-outline-secondary">Share</button> <button type="button" class="btn btn-sm btn-outline-secondary">Export</button> </div> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"> <span data-feather="calendar"></span> This week </button> </div> </div> <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> </main> </div> </div> ``` 在这个示例中，侧边导航栏位于左侧，使用 `nav flex-column` 和 `nav-item` 类实现垂直布局，每个导航项都是一个 `a` 标签。右侧的主内容区域使用 `main` 标签包含，可以放置页面的主要内容。 更多关于 Bootstrap 5 导航栏的信息可以查看官方文档：https://getbootstrap.com/docs/5.0/components/navbar/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值