使用bootstrap制作响应式导航栏

所谓响应式导航栏，便是能根据窗体大小适配的导航栏，以前见着觉得很高级，而现在终于有机会自己写一个了，先上几张效果图。

这是正常屏幕：



这是手机等小屏幕：



点击右边后能够显示出菜单



要实现这个效果，首先要先导入bootstrap框架

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

还有很重要的一点，一定记得加上下面这句话，否则当屏幕变小时点击那个菜单按钮不会有反应：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

接下来，如果要将其制成响应式的，还需要将它的内容放在 .collapse navbar-collapse里面。

接下来放代码了，其中sr-only是给阅读障碍人士使用的，这不是重点。

重要关注三个地方，data-target，navbar-fixed-top，navbar-right。

data-target：表示这里将要填充的内容是从哪来的，可以看见代码中data-target中的id和下面div中的id是一样的。

navbar-fixed-top：表示导航栏会跟着页面滚动，不会在页面往下移后就不见了，相同的还有navbar-fixed-bottom。

navbar-right：这个的作用是将导航栏上的组件定位到最右边，同样的还有navbar-left。而至于截图中为什么那些选项明明离屏幕最右边还有点距离呢，因为在上面套了一层 .container。

HTML：

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Comfortaa|Yellowtail" rel="stylesheet">

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand nav-title">YinyouPoet</a>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right">
<li class="cative"><a href="#">Home</a></li>
<li class="cative"><a href="#">About</a></li>
<li class="cative"><a href="#">Portfolio</a></li>
<li class="cative"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

CSS:

*{
margin:0;
padding:0;
}
.nav-title{
font-family: 'Abril Fatface', cursive;
}
.navbar-header .nav-title:hover,
.navbar-header .nav-title:focus{
background:#fff;
color:#000;
}

.cative{
font-family:'Comfortaa', cursive;
}
.navbar-collapse .navbar-nav li a:hover,
.navbar-collapse .navbar-nav li a:focus{
color:#000;
background:#fff;
}

完整代码链接：https://codepen.io/yinyoupoet/pen/eRPwXP?editors=1100