<!--要创建折叠导航栏，需要在按钮上添加navbar-toggler,data-toggle="collapse"与data-target="#id"，然后在设置了class="collapse navbar-collapse"类的div上包裹导航内容（链接），div元素上的id匹配按钮data-target的上指定的id。-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>折叠导航栏</h1>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--最前面的标题文字，不隐藏-->
<a href="#" class="navbar-brand">Bootstrap</a>
<!--在小屏幕下出现的按钮上面显示三条线-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#c-navbar">
<!--三个短横线图标-->
<span class="navbar-toggler-icon"></span>
</button>
<!--导航列表内容-->
<div id="c-navbar" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">中文文档3.7</a></li>
<li class="nav-item"><a href="#" class="nav-link">中文文档4.0</a></li>
<li class="nav-item"><a href="#" class="nav-link">scss教程</a></li>
<li class="nav-item"><a href="#" class="nav-link">jQ AI</a></li>
</ul>
</div>
</nav>
</div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>
2655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
