<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>title</title>
<!-- Bootstrap核心样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.load{
position: absolute;
left: 50%;
top: 28px;
transform: translateX(-50%) translateY(-50%);
}
.load a{
text-decoration: none;
color: #999;
margin: 0 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- 导航头部 -->
<div class="navbar-header ">
<a href="#" class="navbar-brand">
</a>
<button class="navbar-toggle collapsed" data-toggle='collapse' data-target='.collapse'>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- 导航链接 -->
<div class="collapse navbar-collapse">
<!-- 默认的导航 -->
<ul class="nav navbar-nav">
<li class="hidden-xs"><a href="#">岗位课1</a></li>
<li class="hidden-sm hidden-xs"><a href="#">岗位课2</a></li>
<li class="hidden-sm hidden-xs"><a href="#">岗位课3</a></li>
<li class="hidden-md hidden-sm hidden-xs"><a href="#">岗位课4</a></li>
<li class="hidden-md hidden-sm hidden-xs"><a href="#">岗位课5</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle='dropdown'>
岗位课6
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">About us</a></li>
<li class="hidden-lg hidden-md hidden-sm"><a href="#">岗位课1</a></li>
<li class="hidden-lg hidden-md"><a href="#">岗位课2</a></li>
<li class="hidden-lg hidden-md"><a href="#">岗位课3</a></li>
<li class="hidden-lg"><a href="#">岗位课4</a></li>
<li class="hidden-lg"><a href="#">岗位课5</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left hidden-xs">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-danger">搜索</button>
</form>
</div>
<div class="load">
<a href="#" class="hidden-lg hidden-md hidden-sm">登录</a>
<a href="#" class="hidden-lg hidden-md hidden-sm">注册</a>
</div>
</div>
</nav>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>bootstrap自适应导航栏
猜你喜欢
转载自blog.csdn.net/weixin_42595284/article/details/82746829
今日推荐
周排行