一、待仿的模板
https://www.chinactp.org/
待学的前端
http://video.mobiletrain.org/Course/index/courseId/716
前12个已经OK。
二、自己折腾的一个模板：
效果预览：
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Navbar Template · Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar-header">
<div class="container">
<a href="" class="navbar-brand" style="width:450px;">
<img src="http://icollagen.cn/wp-content/themes/simplegreen/static/picture/logo.png" style="height:60px;"/></a>
<div class="searchform">
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
<button class="btn btn-info btn-md my-2 my-sm-0 ml-3" type="submit">搜索</button>
</form>
</div>
<!-- </div> -->
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-info">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample07">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">美容美发</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">宠物相关</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">生活服务</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
备忘：
1.搜索框
之前搜索框直接显示在logo下面，我自己加了一个Div。
.searchform{
padding: 1.5rem 0rem;
float:right
}
2.如果要修改导航栏中的项目的间距，可以修改下面的值。
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 3.5rem;
padding-left: 0.5rem;
}