Bootstrap实现基本导航栏折叠效果
基本框架
<nav> <a href="#">Navbar</a> <button type="button"> <span></span> </button> <div id="navtop"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">标题1</a> </li> <li> <a href="#">标题2</a> </li> <li> <a href="#">标题3</a> </li> </ul> </div> </nav>
引入CSS
<link rel="stylesheet" href="css/bootstrap.min.css" />
引入JS
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-3.5.1.slim.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
nav标签
class="navbar bg-dark navbar-expand-sm navbar-dark"
标题a标签
class="navbar-brand"
button标签
class="navbar-toggler" data-toggle="collapse" data-target="#navtop"
span标签
class="navbar-toggler-icon"
div标签
class="show collapse navbar-collapse"
ul标签
class="navbar-nav"
li标签
class="nav-item"
li中a标签
class="nav-link"
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战