Bootstrap源碼解讀導(dǎo)航條（7）
源碼解讀Bootstrap導(dǎo)航條
基礎(chǔ)導(dǎo)航條
要制作一個(gè)基礎(chǔ)導(dǎo)航條，要在制作導(dǎo)航的列表<ul class="nav">基礎(chǔ)上添加類名“navbar-nav”，然后在列表外部添加一個(gè)容器（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="##">關(guān)于我們</a></li> </ul> </div>
“.navbar”樣式的主要功能就是設(shè)置左右padding和圓角等效果，實(shí)現(xiàn)源碼如下：
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
導(dǎo)航條的顏色都是通過“.navbar-default”來進(jìn)行控制，實(shí)現(xiàn)源碼如下：
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
“.navbar-nav”樣式是在導(dǎo)航“.nav”的基礎(chǔ)上重新調(diào)整了菜單項(xiàng)的浮動與內(nèi)外邊距。而顏色和其他樣式是通過配合父容器“navbar-default”來一起實(shí)現(xiàn)。實(shí)現(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;
}
導(dǎo)航條標(biāo)題
通過“navbar-header”和“navbar-brand”來實(shí)現(xiàn)，例如：
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">標(biāo)題</a> </div> <ul class="nav navbar-nav"> ... </ul> </div>
主要是加大了字體設(shè)置，并且設(shè)置了最大寬度，實(shí)現(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;
}
}
在默認(rèn)導(dǎo)航條（navbar-default）下，對navbar-brand也做了顏色處理，實(shí)現(xiàn)源碼如下：
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
帶表單的導(dǎo)航條
在navbar容器中放置一個(gè)帶有“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="請輸入關(guān)鍵詞"/> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div>
實(shí)現(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”可以讓導(dǎo)航條里的表單左浮動，“navbar-right”為右浮動。實(shí)現(xiàn)源碼如下：
@media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
}
}
固定導(dǎo)航條
要將導(dǎo)航條固定在瀏覽器頂部或底部，只需要在制作導(dǎo)航條最外部容器navbar上追加對應(yīng)的類名即可：
.navbar-fixed-top：導(dǎo)航條固定在瀏覽器窗口頂部
.navbar-fixed-bottom：導(dǎo)航條固定在瀏覽器窗口底部
例如：<div class="navbar navbar-default navbar-fixed-top" role="navigation">...</div>
實(shí)現(xiàn)原理就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed屬性，并且設(shè)置navbar-fixed-top的top值為0,而navbar-fixed-bottom的bottom值為0。實(shí)現(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)容頂部和底部都被固定導(dǎo)航條給遮住了。我們可以在body上加上樣式：padding-top: 70px;或padding-bottom: 70px;來避免這種情況。
響應(yīng)式導(dǎo)航條
響應(yīng)式導(dǎo)航條比較復(fù)雜，寬屏是水平平鋪顯示，窄屏?xí)r收縮垂直顯示，使用方法如下：
1. 把在窄屏?xí)r需要折疊的內(nèi)容包裹在帶一個(gè)div內(nèi)，并且為這個(gè)div追加“collapse”、“navbar-collapse”兩個(gè)類名。最后為這個(gè)div添加一個(gè)class類名或者id名。
2. 定制在窄屏?xí)r要顯示的圖標(biāo)樣式。
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時(shí)，div.navbar-responsive-collapse容器里的內(nèi)容都會隱藏，顯示icon-bar圖標(biāo)，當(dāng)點(diǎn)擊icon-bar圖標(biāo)時(shí)，再展開。屏幕大于768px時(shí)，默認(rèn)顯示。 --> <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)站實(shí)例</a></li> </ul> </div> </div>
反色導(dǎo)航條
將navbar-deafult類名換成navbar-inverse即可。只是導(dǎo)航條的背景色和文本做了修改。
帶頁碼的分頁導(dǎo)航
在ul標(biāo)簽上加入pagination方法即可。例如：
<ul class="pagination"> <li><a href="#">«第一頁</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="#">最后一頁»</a></li> </ul>
實(shí)現(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”可以讓分頁導(dǎo)航變大，“pagination-sm”可以讓分頁導(dǎo)航變小。實(shí)現(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;
}
翻頁分頁導(dǎo)航
為ul標(biāo)簽加入pager類即可。例如：
<ul class="pager"> <li><a href="#">«上一頁</a></li> <li><a href="#">下一頁»</a></li> </ul>
實(shí)現(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;
}
導(dǎo)航默認(rèn)居中，如果要一個(gè)居左一個(gè)居右，可以在li分別上追加previous和next類名。實(shí)現(xiàn)源碼如下：
.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}
本文系列教程整理到：Bootstrap基礎(chǔ)教程 專題中，歡迎點(diǎn)擊學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Bootstrap導(dǎo)航條鼠標(biāo)懸停下拉菜單
- bootstrap導(dǎo)航條實(shí)現(xiàn)代碼
- Bootstrap CSS組件之導(dǎo)航條(navbar)
- Bootstrap導(dǎo)航條的使用和理解3
- JS組件Bootstrap導(dǎo)航條使用方法詳解
- Bootstrap入門書籍之（五）導(dǎo)航條、分頁導(dǎo)航
- Bootstrap每天必學(xué)之導(dǎo)航條
- 第一次接觸神奇的Bootstrap導(dǎo)航條
- 全面接觸神奇的Bootstrap導(dǎo)航條實(shí)戰(zhàn)篇
- Bootstrap導(dǎo)航條學(xué)習(xí)使用(一)
相關(guān)文章
純JS焦點(diǎn)圖特效實(shí)例(可一個(gè)頁面多用)
下面小編就為大家?guī)硪黄僇S焦點(diǎn)圖特效實(shí)例(可一個(gè)頁面多用)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了原生js編寫貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
JS控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位
這篇文章主要介紹了JS控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位,本文給大家提到j(luò)s如何限制input輸入框只能輸入數(shù)字問題，需要的朋友可以參考下2019-11-11
javascript IE中的DOM ready應(yīng)用技巧
當(dāng)我們想在頁面加載之后執(zhí)行某個(gè)函數(shù)，肯定會想到onload了 但onload在瀏覽器看來，就是頁面上的東西全部都加載完畢后才能發(fā)生，但那就為時(shí)已晚了。2008-07-07
JavaScript時(shí)間日期操作實(shí)例小結(jié)【5個(gè)示例】
這篇文章主要介紹了JavaScript時(shí)間日期操作,結(jié)合5個(gè)具體實(shí)例形式分析了javascript針對日期時(shí)間的各種常見操作技巧,需要的朋友可以參考下2018-12-12
簡單的仿Flash文字動畫（兼容Mozilla）...2007-01-01
這篇文章主要為大家詳細(xì)介紹了NProgress顯示頂部進(jìn)度條效果及使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
ES2015 推出了JS 的 Promise ，而在沒有原生支持的時(shí)候，我們也可以使用諸如 Promises/A+ 的庫的幫助，在我們的代碼里實(shí)現(xiàn)Promise 的支持，下面這篇文章主要給大家介紹了如何從零開始利用js手寫一個(gè)Promise庫的相關(guān)資料，需要的朋友可以參考下。2018-04-04
silverlight線程與基于事件驅(qū)動javascript引擎（實(shí)現(xiàn)軌跡回放功能）
前一段時(shí)間一直在重構(gòu)工作站軌跡回放功能,一開始我覺得很簡單,但是后面引發(fā)了一系列奇怪的問題,讓我很疼,所以不得不寫個(gè)總結(jié)加深記憶,2011-08-08
今天學(xué)習(xí)Javascript函數(shù)，發(fā)現(xiàn)這完全是一個(gè)神奇的東西。跟我們平常所見強(qiáng)類型語言中的函數(shù)有好多不同。下面我們就從C#和JavaScript的兩個(gè)計(jì)算階乘的函數(shù)中比較兩者的異同2012-05-05