所謂響應式導航欄，便是能根據窗體大小適配的導航欄，以前見著覺得很高階，而現在終於有機會自己寫一個了，先上幾張效果圖。
這是正常螢幕：

這是手機等小螢幕：

點選右邊後能夠顯示出選單

要實現這個效果，首先要先匯入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;
}