Bootstrap组件案例—导航栏
<!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>
<style>
nav ul li a{
font-size:14px;
}
.my-ml{
margin-left: 16rem !important;
}
@media screen and (min-width:576px) and (max-width:992px){
.hidden-sm{
display:none;
}
}
@media screen and (max-width:576px){
.about-hidden-sm{
margin-left: 0 !important;
}
}
</style>
</head>
<body>
<div class="">
<nav class="navbar navba-rexpand-sm bg-dark navbar-dark">
js导航栏下拉菜单
<!--
navbar-brand默认是放⽂字的，如：
也可以放图⽚，但必须是⼩图⽚：
-->
<a href="#" class="navbar-brand">Bootstrap中⽂⽹</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#cNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="cNavbar">
<ul class="navbar-nav">
<li class="nav-item hidden-sm"><a href="#" class="nav-link">Bootstrap3中⽂⽂档</a></li>
<li class="nav-item hidden-sm"><a href="#"  class="nav-link ">Bootstrap4中⽂⽂档</a></li>
<li class="nav-item"><a href="#" class="nav-link">Less教程</a></li>
<li class="nav-item"><a href="#" class="nav-link">jQuery API</a></li>
<li class="nav-item"><a href="#" class="nav-link">⽹站实例</a></li>
<li class="nav-item my-ml hidden-sm about-hidden-sm"><a href="#" class="nav-link">关于</a></li>          </ul>
</div>
</nav>
</div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。