欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap源碼解讀導航條（7）

 更新時間：2016年12月23日 15:49:12   作者：藝術就是爆炸  
這篇文章主要源碼解讀了Bootstrap導航條，介紹了Bootstrap各式各樣的導航條,具有一定的參考價值，感興趣的小伙伴們可以參考一下

源碼解讀Bootstrap導航條

基礎導航條

要制作一個基礎導航條，要在制作導航的列表<ul class="nav">基礎上添加類名“navbar-nav”，然后在列表外部添加一個容器（div），并且使用類名“navbar”和“navbar-default”。例如：

<div class="navbar navbar-default" role="navigation">
 <ul class="nav navbar-nav">
  <li class="active"><a href="##">首頁</a></li>
  <li><a href="##">網(wǎng)站內(nèi)容</a></li>
  <li><a href="##">關于我們</a></li>
 </ul>
</div>

“.navbar”樣式的主要功能就是設置左右padding和圓角等效果，實現(xiàn)源碼如下：

.navbar {
 position: relative;
 min-height: 50px;
 margin-bottom: 20px;
 border: 1px solid transparent;
}

導航條的顏色都是通過“.navbar-default”來進行控制，實現(xiàn)源碼如下：

.navbar-default {
 background-color: #f8f8f8;
 border-color: #e7e7e7;
}

“.navbar-nav”樣式是在導航“.nav”的基礎上重新調(diào)整了菜單項的浮動與內(nèi)外邊距。而顏色和其他樣式是通過配合父容器“navbar-default”來一起實現(xiàn)。實現(xiàn)源碼如下：

.navbar-default .navbar-nav> li > a {
 color: #777;
}
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
 color: #333;
 background-color: transparent;
}
.navbar-default .navbar-nav> .active > a,
.navbar-default .navbar-nav> .active >a:hover,
.navbar-default .navbar-nav> .active >a:focus {
 color: #555;
 background-color: #e7e7e7;
}
.navbar-default .navbar-nav> .disabled > a,
.navbar-default .navbar-nav> .disabled >a:hover,
.navbar-default .navbar-nav> .disabled >a:focus {
 color: #ccc;
 background-color: transparent;
}

導航條標題

通過“navbar-header”和“navbar-brand”來實現(xiàn)，例如：

<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">標題</a>
 　</div>
 <ul class="nav navbar-nav">
  ...
 </ul>
</div>

主要是加大了字體設置，并且設置了最大寬度，實現(xiàn)源碼如下：

.navbar-brand {
 float: left;
 height: 50px;
 padding: 15px 15px;
 font-size: 18px;
 line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
 text-decoration: none;
}
.navbar-brand > img {
 display: block;
}
@media (min-width: 768px) {
 .navbar > .container .navbar-brand,
 .navbar > .container-fluid .navbar-brand {
 margin-left: -15px;
 }
}

在默認導航條（navbar-default）下，對navbar-brand也做了顏色處理，實現(xiàn)源碼如下：

.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}

帶表單的導航條

在navbar容器中放置一個帶有“navbar-form”類名的表單，例如：

<div class="navbar navbar-default" role="navigation">
 <ul class="nav navbar-nav">
  ...
 </ul>
 <form action="##" class="navbar-form navbar-left" rol="search">
  <div class="form-group">
   <input type="text" class="form-control" placeholder="請輸入關鍵詞"/>
  </div>
  <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>

實現(xiàn)源碼如下：

.navbar-form {
 padding: 10px 15px;
 margin-top: 8px;
 margin-right: -15px;
 margin-bottom: 8px;
 margin-left: -15px;
 border-top: 1px solid transparent;
 border-bottom: 1px solid transparent;
 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
@media (min-width: 768px) {
 .navbar-form .form-group {
 display: inline-block;
 margin-bottom: 0;
 vertical-align: middle;
 }
 .navbar-form .form-control {
 display: inline-block;
 width: auto;
 vertical-align: middle;
 }
 .navbar-form .form-control-static {
 display: inline-block;
 }
 .navbar-form .input-group {
 display: inline-table;
 vertical-align: middle;
 }
 .navbar-form .input-group .input-group-addon,
 .navbar-form .input-group .input-group-btn,
 .navbar-form .input-group .form-control {
 width: auto;
 }
 .navbar-form .input-group > .form-control {
 width: 100%;
 }
 .navbar-form .control-label {
 margin-bottom: 0;
 vertical-align: middle;
 }
 .navbar-form .radio,
 .navbar-form .checkbox {
 display: inline-block;
 margin-top: 0;
 margin-bottom: 0;
 vertical-align: middle;
 }
 .navbar-form .radio label,
 .navbar-form .checkbox label {
 padding-left: 0;
 }
 .navbar-form .radio input[type="radio"],
 .navbar-form .checkbox input[type="checkbox"] {
 position: relative;
 margin-left: 0;
 }
 .navbar-form .has-feedback .form-control-feedback {
 top: 0;
 }
}
@media (max-width: 767px) {
 .navbar-form .form-group {
 margin-bottom: 5px;
 }
 .navbar-form .form-group:last-child {
 margin-bottom: 0;
 }
}
@media (min-width: 768px) {
 .navbar-form {
 width: auto;
 padding-top: 0;
 padding-bottom: 0;
 margin-right: 0;
 margin-left: 0;
 border: 0;
 -webkit-box-shadow: none;
   box-shadow: none;
 }
}

“navbar-left”可以讓導航條里的表單左浮動，“navbar-right”為右浮動。實現(xiàn)源碼如下：

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

固定導航條

要將導航條固定在瀏覽器頂部或底部，只需要在制作導航條最外部容器navbar上追加對應的類名即可：
.navbar-fixed-top：導航條固定在瀏覽器窗口頂部
.navbar-fixed-bottom：導航條固定在瀏覽器窗口底部
例如：<div class="navbar navbar-default navbar-fixed-top" role="navigation">...</div>
實現(xiàn)原理就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed屬性，并且設置navbar-fixed-top的top值為0,而navbar-fixed-bottom的bottom值為0。實現(xiàn)源碼如下：

.navbar-fixed-top,
.navbar-fixed-bottom {
 position: fixed;
 right: 0;
 left: 0;
 z-index: 1030;
}
@media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
 border-radius: 0;
 }
}
.navbar-fixed-top {
 top: 0;
 border-width: 0 0 1px;
}
.navbar-fixed-bottom {
 bottom: 0;
 margin-bottom: 0;
 border-width: 1px 0 0;
}

不過我們可以發(fā)現(xiàn)，頁面主內(nèi)容頂部和底部都被固定導航條給遮住了。我們可以在body上加上樣式：padding-top: 70px;或padding-bottom: 70px;來避免這種情況。

響應式導航條

響應式導航條比較復雜，寬屏是水平平鋪顯示，窄屏時收縮垂直顯示，使用方法如下：
1. 把在窄屏時需要折疊的內(nèi)容包裹在帶一個div內(nèi)，并且為這個div追加“collapse”、“navbar-collapse”兩個類名。最后為這個div添加一個class類名或者id名。
2. 定制在窄屏時要顯示的圖標樣式。
3. 為button添加data-target=”.類名”或data-target=”#id名”，是類名還是id名由需要折疊的div來決定。
完整示例如下：

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <!-- .navbar-toggle樣式用于toggle收縮的內(nèi)容，即nav-collapse collapse樣式所在元素 -->
  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
   <span class="sr-only">Toggle Navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  <!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 -->
  <a href="##" class="navbar-brand">Bootstrap中文網(wǎng)</a>
 </div>
 <!-- 屏幕寬度小于768px時，div.navbar-responsive-collapse容器里的內(nèi)容都會隱藏，顯示icon-bar圖標，當點擊icon-bar圖標時，再展開。屏幕大于768px時，默認顯示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
  <ul class="nav navbar-nav">
   <li class="active"><a href="##">Bootstrap2</a></li>
   <li><a href="##">Bootstrap3</a></li>
   <li><a href="##">Bootstrap4</a></li>
   <li><a href="##">網(wǎng)站實例</a></li>
  </ul>
 </div>
</div>

反色導航條

將navbar-deafult類名換成navbar-inverse即可。只是導航條的背景色和文本做了修改。

帶頁碼的分頁導航

在ul標簽上加入pagination方法即可。例如：

<ul class="pagination">
 <li><a href="#">&laquo;第一頁</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li class="active"><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li class="disabled"><a href="#">最后一頁&raquo;</a></li>
</ul>

實現(xiàn)源碼如下：

.pagination> .active > a,
.pagination> .active > span,
.pagination> .active >a:hover,
.pagination> .active >span:hover,
.pagination> .active >a:focus,
.pagination> .active >span:focus {
z-index: 2;
color: #fff;
cursor: default;
background-color: #428bca;
border-color: #428bca;
}
.pagination> .disabled > span,
.pagination> .disabled >span:hover,
.pagination> .disabled >span:focus,
.pagination> .disabled > a,
.pagination> .disabled >a:hover,
.pagination> .disabled >a:focus {
color: #999;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}

在ul上追加“pagination-lg”可以讓分頁導航變大，“pagination-sm”可以讓分頁導航變小。實現(xiàn)源碼如下：

.pagination-lg> li > a,
.pagination-lg> li > span {
padding: 10px 16px;
font-size: 18px;
}
.pagination-lg>li:first-child> a,
.pagination-lg>li:first-child> span {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.pagination-lg>li:last-child> a,
.pagination-lg>li:last-child> span {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.pagination-sm> li > a,
.pagination-sm> li > span {
padding: 5px 10px;
font-size: 12px;
}
.pagination-sm>li:first-child> a,
.pagination-sm>li:first-child> span {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.pagination-sm>li:last-child> a,
.pagination-sm>li:last-child> span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

翻頁分頁導航

為ul標簽加入pager類即可。例如：

<ul class="pager">
 <li><a href="#">&laquo;上一頁</a></li>
 <li><a href="#">下一頁&raquo;</a></li>
</ul>

實現(xiàn)源碼如下：

.pager {
 padding-left: 0;
 margin: 20px 0;
 text-align: center;
 list-style: none;
}
.pager li {
 display: inline;
}
.pager li > a,
.pager li > span {
 display: inline-block;
 padding: 5px 14px;
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 15px;
}
.pager li > a:hover,
.pager li > a:focus {
 text-decoration: none;
 background-color: #eee;
}

導航默認居中，如果要一個居左一個居右，可以在li分別上追加previous和next類名。實現(xiàn)源碼如下：

.pager .next > a,
.pager .next > span {
 float: right;
}
.pager .previous > a,
.pager .previous > span {
 float: left;
}

本文系列教程整理到：Bootstrap基礎教程 專題中，歡迎點擊學習。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論