使用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

---

欢迎大家加入QQ群一起交流讨论， 「吟游」程序人生——YinyouPoet