Bootstrap5 响应式导航栏

简介: Bootstrap5 响应式导航栏

Bootstrap5 响应式导航栏

image.gif 编辑

我们可以使用 Bootstrap5 导航栏组件为网站或应用程序创建响应式导航标题。 这些响应式导航栏在手机等小视口的设备上会折叠,但当用户单击切换按钮时会展开。 但是,它在中型和大型设备(例如笔记本电脑或台式机)上将正常显示为水平。

还可以轻松创建导航栏的不同样式,例如带有下拉菜单和搜索框的导航栏以及固定定位的导航栏。 以下示例将展示如何创建带有链接的简单的导航栏。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">迹忆客</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">编程</a>
                <a href="#" class="nav-item nav-link">教程</a>
                <a href="#" class="nav-item nav-link">题库</a>
                <a href="#" class="nav-item nav-link disabled" tabindex="-1">工具</a>
            </div>
            <div class="navbar-nav ms-auto">
                <a href="#" class="nav-item nav-link">登录</a>
            </div>
        </div>
    </div>
</nav>

image.gif

实际项目应用,头部代码

<header class="container-fluid bg-white row">
     <div class="col-sm-1">
     </div>
     <div class="col-sm-10 g-0">
         <nav class="navbar navbar-expand-lg navbar-light bg-white g-0">
             <div class="container-fluid g-0">
                 <a href="#" class="navbar-brand g-0"><h2>亚丁号</h2></a>
                 <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                     <span class="navbar-toggler-icon"></span>
                 </button>
                 <div class="collapse navbar-collapse" id="navbarCollapse">
                     <div class="navbar-nav">
                     </div>
                     <div class="navbar-nav ms-auto">
                         <a href="/Index.html" class="nav-item nav-link active">首页</a>
                         <a href="/front/article/articles.html" class="nav-item nav-link">文章列表</a>
                         <a href="/back/login.html" class="nav-item nav-link">会员中心</a>
                         <a href="#" class="nav-item nav-link disabled" tabindex="-1">系统工具</a>
                         <a href="#" class="nav-item nav-link disabled">API</a>
                         <a href="#" class="nav-item nav-link disabled">注册</a>
                     </div>
                 </div>
             </div>
         </nav>
     </div>
     <div class="col-sm-1">
     </div>
 </header>

image.gif

效果图:

image.gif 编辑

手机

image.gif 编辑



你有时间常去我家看看我在这里谢谢你啦...


我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,

大军纵横驰奔,

谁敢横刀立马?

惟有点赞加关注大军。

目录
相关文章
|
前端开发 开发者 容器
Bootstrap- 响应式工具|学习笔记
快速学习 Bootstrap- 响应式工具
116 0
Bootstrap- 响应式工具|学习笔记
|
Web App开发 前端开发 JavaScript
Web前端快速开发 Bootstrap 响应式UI框架
Web前端快速开发 Bootstrap 响应式UI框架
445 0
Web前端快速开发 Bootstrap 响应式UI框架
|
前端开发
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
组件之 媒体对象(图文混排)、 导航组件, 手动实现bootstrap的导航栏
|
前端开发 JavaScript 容器
Bootstrap响应式框架,组件化开发
Bootstrap响应式框架,组件化开发
140 0
|
前端开发 JavaScript
Bootstrap项目实践:带有导航栏的响应式网页
Bootstrap项目实践:带有导航栏的响应式网页
236 0
Bootstrap项目实践:带有导航栏的响应式网页
|
前端开发
bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
|
开发框架 前端开发 JavaScript
34_Bootstrap组件_面版,具有响应式特性的嵌入内容,Well|学习笔记
快速学习34_Bootstrap组件_面版,具有响应式特性的嵌入内容,Well
109 0
|
开发框架 前端开发 测试技术
17-Bootstrap 全局 css 样式-图片,响应式工具|学习笔记
快速学习17-Bootstrap 全局 css 样式-图片,响应式工具
114 0
N..
|
27天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
13 0