各位，我又回來了！
上次說到，我們粗略的見識了一下HTML以及Bootstrap的用法，並且在不知情的情況下召喚出了裝逼神器導航欄，讓我們回顧一下代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
...
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <!--關於Button的註釋-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Color</a>
        <!--帶有navbar－brand的a元素會讓文本看起來大一號-->
      </div>
      <!--/.nav-collapse -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Black</a></li>
          <li><a href="#">White</a></li>
          <li><a href="#">Grey</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="jumbotron">
    <h1>Hello!</h1>
    <p> Welcome to a new world consists of html,javascript and css!</p>
  </div>

</body>
</html>

OK,接着昨天的繼續講下去，我們可以看見整個導航欄Nav元素中被分割成兩個div元素，而這兩個div元素分別是導航欄的標題以及導航按鈕。

Navbar-header	Navbar-collapse
Color	Black,White,Grey

那我們優先來看下Navbar－header。
我們首先使用一個帶有“navbar-header”屬性的div劃分出一個專屬區域。
然後在這裏定義了一個按鈕Button標籤

Button

標籤定義一個按鈕。
在 button 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。
控件與相比，提供了更爲強大的功能和更豐富的內容。與標籤之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文本或多媒體內容。例如，我們可以在按鈕中包括一個圖像和相關的文本，用它們在按鈕中創建一個吸引人的標記圖像。
唯一禁止使用的元素是圖像映射，因爲它對鼠標和鍵盤敏感的動作會干擾表單按鈕的行爲。
請始終爲按鈕規定 type 屬性。Internet Explorer 的默認類型是 “button”，而其他瀏覽器中（包括 W3C 規範）的默認值是 “submit”。

下面這張表列出了Button的所有屬性

當然，我們的代碼中出現了許多額外的屬性，這都要歸功於bootstrap的插件。

自動摺疊(切換) Collapse.Js

本來這些應該一起唄我們扔到爪哇島徹底忘記的，但是本着＝＝折騰到底的態度，我們還是來了解一下這個插件的作用吧.

關於
爲可摺疊的組件(比如手風琴式應用，導航欄)提供基本的樣式和靈活的支持。
* 需要包含過渡插件.

我們注意到在這個button標籤中，包含了data－target和data－toggle兩個屬性，而這兩個屬性正是實現摺疊功能的罪魁禍首，我們來看一段示例代碼（你可以將其添加在原有的代碼中或新建一個）

<body>
  <button type="button" class="btn btn-primary" data-toggle="collapse"
  data-target="#collapseExample"aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
  </button>
  <div class="collapse in" id="collapseExample">
    <div class="well">
      這邊是一大堆廢話所以我們直接不要看了
    </div>
  </div>

</body>

在body中添加完這段代碼後是不是感覺很眼熟！！！，沒錯簡直和導航欄題頭的代碼一毛一樣。看看效果

哇塞，按下按鈕還能自動伸縮誒，什麼？你不能這麼做？不要忘了我們現在是依靠Js在運作的，所以千萬不要忘記在body的最後加上js索引

OK，那麼我們差不多就清楚插件的具體工作方式了。先賦予標籤特定的屬性值，然後js腳本通過查詢標籤的這些屬性值，在特定的地方發揮功效。嗯。具體關於JS的內容還在後邊的後邊，這裏只是稍作引入，以免看見陌生的屬性而不知所錯。
OK，在掌握了這個技能之後，給你的主頁添加一個小彩蛋吧！

List

而Navbar－collapse則顯得較爲簡單，這裏面只是裝載了一個列表。
我們使用< ul >標籤來定義無序列表，用 < li >來定義列表元素.
這邊就是定義了一個1x3的列表，分別裝下了Black，White，Grey。1
難道今天就這樣結束了嗎！！No，答案是否定的，因爲我們還要升級改造我們的導航欄，使他成爲戰艦級別的。
一個成熟的網站一定會有許多子類別，那麼面對這種情況我們該怎麼辦！！！還記得我們剛剛搞的那個列表嗎？沒錯，我們在列表裏搞列表久能完美解決這個問題。打開還是熟悉的代碼，在body的第三個導航Grey標籤裏面嵌套List元素和摺疊元素。

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <!--關於Button的註釋-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Color</a>
        <!--帶有navbar－brand的a元素會讓文本看起來大一號-->
      </div>
      <!--/.nav-collapse -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Black</a></li>
          <li><a href="#">White</a></li>
          <!--在list中嵌套使用list並且使用了下拉菜單“dropdown”屬性。注意有一個特別的li屬性爲dropdownheader，在圖片中觀察區別-->
          <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"
              role="button" aria-expanded="false">Grey</a>
              <ul class="dropdown-menu" role ="menu">
                <li class="dropdown-header">attention please</li>
                <li>Small</li>
                <li>middle</li>
                <li>Big</li>
              </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>