Bootstrap導航欄navbar源碼分析

1.本文目地：分析bootstrap導航欄及其響應式的實現方式，提升自身css水平

先貼一個bootstrap的導航欄模板

http://v3.bootcss.com/examples/navbar-fixed-top/

2.代碼如下

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <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 class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluld -->
      </nav>

效果如下;

移動端：

 

 

3.代碼分析

從外到內分析每一個標簽及其樣式的作用

3.1最外層的div容器（樣式為navbar navbar-default navbar-fixed-top）：

源碼

.navbar {
  position: relative;
  min-height: 50px;/**導航條最小寬度為50px**/
  margin-bottom: 20px;/****/
  border: 1px solid transparent;
}
@media (min-width: 768px) {/**>=768的設備，其實就是pc，移動設備width屬性都小於768px**//**可能有很多人不理解，實際上移動端的width屬性是以device-width來計量的，不是單純的像數的概念，建議有疑問的同學自行搜索device-width關鍵字**/
  .navbar {
    border-radius: 4px;/****/
  }
}
.navbar-default {/**設備導航欄的配色**/
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;/**相對瀏覽器定位**/
  right: 0;
  left: 0;
  z-index: 1030;/**樣式層疊在上層的優先級**/
}

由源碼可見，最外層div容器主要的作用是創建一個最小高度為50px的條形容器（.navbar），相對於於瀏覽器定位(.navbar-fixed-top)，確定導航欄的配色（.navbar-default）

關於device-width的相關知識，可參考這篇文章  http://www.tuicool.com/articles/ri2AJv

3.2 樣式為navbar-header的div容器

其css源碼如下

/**在pc端顯示時向右浮動，在移動端此樣式無效**/

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

此div在pc端和移動端顯示效果如下

pc端： 

  

移動端：

可見在pc端時，瀏覽器寬度足夠，此div僅作為一個小的塊級元素存在；而在移動端時，由於屏幕寬度不夠，故將導航欄的其他元素以下拉菜單的形式實現，此div單獨填滿父容器。

navbar-header下還有兩個字元素：樣式為navbar-toggle的<button>和為navbar-brand的<a>

其css源碼如下：

.navbar-toggle {/**在最右側畫了一個圓角矩形**/
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.navbar-toggle:focus {
  outline: 0;
}
@media (min-width: 768px) {/**此button在pc端不顯示**/
  .navbar-toggle {
    display: none;
  }
}
.navbar-toggle .icon-bar {/**icon-bar負責在button盒子里畫橫線**/
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

 至此，navbar-header組件我們就弄清楚了，這是一個響應式布局，在pc端，navbar-header只顯示品牌文字，在移動端，navbar-header將獨占整個導航欄navbar，其他部分將被隱藏。

3.3繼續來看navbar-collapse collapse組件

源碼：

/**由於.navbar-collapse，.navbar-collapse.in，.collapse在（@meida min-width:768px）pc端均有定義，故一下的屬性只對移動端有效**/

.navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
} .navbar-collapse.in {/**點擊navbar-header的navbar-toggle的button后， navbar-collapse collapse會被js修改成。navbar-collapse collapse in**/ overflow-y: auto;
} .collapse {/**決定了本組件在移動端時不顯示**/ display: none;/**點擊事件發生后將被覆蓋**/
}

 .collapse.in {/**點擊事件發生后，以塊級元素顯示，覆蓋掉display：none**/
　　display: block;
 }

@media (min-width: 768px) {/**pc端**/
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;/**作為塊級顯示，由於兄弟節點navbar-header是浮動元素，所以navbar-collapse會占滿父元素的寬高**/
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}

至此，我們也弄明白了navbar-collapse collapse組件是如何在移動端時隱藏的navbar-collapse負責組件的外表樣式，而.collapse負責整個組件是否顯示（pc端正常顯示，移動端出事不顯示（display：none），點擊事件發生后以塊級元素顯示）

4.總結

從bootstrap的導航欄源碼分析，可以看出以下幾點

4.1：bootstrap的尺寸樣式和配色樣式是分開設置的，可以想到這樣設置可以隨意組合，增加了代碼的復用性，也可以隨意的根據自己的需求修改配色。

4.2：導航欄的實現：導航欄的固定方式由navbar-fixed-top實現，其他值還有navbar-static-top以及默認值其顯示效果也不一樣（決定了整個導航欄的顯示位置）

　　　　　　　　　顏色實現由navbar-default實現，可以通過修改navbar-defau來修改整個配色（決定了整個導航欄的配色）

　　　　　　　　　下拉菜單的實現也是樣式和是否顯示的樣式分離

5.注：其中許多細節如margin padding的變化本文沒有討論，可以參考這篇文章http://www.cnblogs.com/zhangw1994/p/7124252.html