分析bootstrap導覽列及其響應式的實現方式

1. 本文目地：分析bootstrap導航列及其響應式的實現方式，是自己的程式設計技術更上一層樓

2. ##我們先來分析一下怎麼實現，第一步先貼一個bootstrap的導覽列模板

2.程式碼如下

 1 <nav class="navbar navbar-default navbar-fixed-top"> 2         
 <div class="container-fluid"> 3           <div class="navbar-header"> 4             
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
 data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 5               
 <span class="sr-only">Toggle navigation</span> 6               
 <span class="icon-bar"></span> 7               
 <span class="icon-bar"></span> 8               <span class="icon-bar"></span> 9             
 </button>10             <a class="navbar-brand" href="#">Project name</a>11           
 </div>12           <div id="navbar" class="navbar-collapse collapse">13             
 <ul class="nav navbar-nav">14               <li class="active"><a href="#">Home</a>
 </li>15               <li><a href="#">About</a></li>16               
 <li><a href="#">Contact</a></li>17               <li class="dropdown">18                 
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>19                 <ul class="dropdown-menu">20                   <li><a href="#">Action</a></li>21                   <li><a href="#">Another action</a></li>22                   <li><a href="#">Something else here</a></li>23                   <li role="separator" class="divider"></li>24                   <li class="dropdown-header">Nav header</li>25                   <li><a href="#">Separated link</a></li>26                   <li><a href="#">One more separated link</a></li>27                 </ul>28               </li>29             </ul>30             <ul class="nav navbar-nav navbar-right">31               32             </ul>33           </div><!--/.nav-collapse -->34         </div><!--/.container-fluld -->35       </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的相關知識，可參考這篇文章 

3.2 樣式為navbar-header的div容器

其css原始碼如下

<br>

/**在pc端显示时向右浮动，在移动端此样式无效**/

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

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

pc端： 

#  

行動端：

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

navbar-header下方還有兩個字元素：樣式為navbar-toggle的和為navbar-brand的

其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;/**点击事件发生后将被覆盖**/
}<br>

 .collapse.in {/**點選事件發生後，以區塊級元素顯示，覆寫display：none**/

 　　display : block;<br> }<br>

@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的變化本文沒有討論，可以參考這篇文章

#

以上是分析bootstrap導覽列及其響應式的實現方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！