溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Bootstrap中導(dǎo)航條的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
導(dǎo)航條（navbar）和導(dǎo)航（nav），就相差一個(gè)字，多了一個(gè)“條”字。其實(shí)在Bootstrap框架中他們還是明顯的區(qū)別。在導(dǎo)航條(navbar)中有一個(gè)背景色、而且導(dǎo)航條可以是純鏈接（類似導(dǎo)航），也可以是表單，還有就是表單和導(dǎo)航一起結(jié)合等多種形式。本文將詳細(xì)介紹Bootstrap導(dǎo)航條。
基礎(chǔ)導(dǎo)航條
在Bootstrap框架中，導(dǎo)航條和導(dǎo)航從外觀上差別不是太多，但在實(shí)際使用中導(dǎo)航條要比導(dǎo)航復(fù)雜得多。
導(dǎo)航條是在應(yīng)用或網(wǎng)站中作為導(dǎo)航頁(yè)頭的響應(yīng)式基礎(chǔ)組件。它們?cè)谝苿?dòng)設(shè)備上可以折疊（并且可開可關(guān)），且在視口（viewport）寬度增加時(shí)逐漸變?yōu)樗秸归_模式
在制作一個(gè)基礎(chǔ)導(dǎo)航條時(shí)，主要分以下幾步：
1、首先在制作導(dǎo)航的列表(<ul class=”nav”>)基礎(chǔ)上添加類名“navbar-nav”
2、在列表外部添加一個(gè)容器（p），并且使用類名“navbar”和“navbar-default”
【原理分析】
“.navbar”樣式的主要功能就是設(shè)置左右padding和圓角等效果，但它和顏色相關(guān)的樣式?jīng)]有進(jìn)行任何的設(shè)置
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}導(dǎo)航條的顏色都是通過“.navbar-default”來進(jìn)行控制
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}navbar-nav樣式是在導(dǎo)航.nav的基礎(chǔ)上重新調(diào)整了菜單項(xiàng)的浮動(dòng)與內(nèi)外邊距。同時(shí)也不包括顏色等樣式設(shè)置，而顏色和其他樣式是通過配合父容器“navbar-default”來一起實(shí)現(xiàn)
[注意]最好使用 <nav> 元素，如果使用的是通用的 <p> 元素的話，務(wù)必為導(dǎo)航條設(shè)置 role="navigation" 屬性，這樣能夠讓使用輔助設(shè)備的用戶明確知道這是一個(gè)導(dǎo)航區(qū)域
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">網(wǎng)站首頁(yè)</a></li> <li><a href="##">系列教程</a></li> <li><a href="##">名師介紹</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">關(guān)于我們</a></li> </ul> </div>
導(dǎo)航條部件
【標(biāo)題】
在Web頁(yè)面制作中，常常在菜單前面都會(huì)有一個(gè)標(biāo)題（文字字號(hào)比其它文字稍大一些），其實(shí)在Bootstrap框架也做了這方面考慮，其通過“navbar-header”和“navbar-brand”來實(shí)現(xiàn)
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">小火柴的藍(lán)色理想</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> <li><a href="##">Bootstrap</a></li> <li><a href="##">jQuery</a></li> </ul> </div>
【品牌圖標(biāo)】
將導(dǎo)航條內(nèi)放置品牌標(biāo)志的地方替換為 <img> 元素即可展示自己的品牌圖標(biāo)。由于 .navbar-brand 已經(jīng)被設(shè)置了內(nèi)補(bǔ)（padding）和高度（height），需要根據(jù)自己的情況添加一些 CSS 代碼從而覆蓋默認(rèn)設(shè)置
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" style="margin-top:-10px" href="#"> <img alt="Brand" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh4ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC"> </a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> <li><a href="##">Bootstrap</a></li> <li><a href="##">jQuery</a></li> </ul> </div>
【二級(jí)菜單】
在基礎(chǔ)導(dǎo)航條中對(duì)菜單提供了當(dāng)前狀態(tài)，禁用狀態(tài)，懸浮狀態(tài)等效果，而且也可以帶有二級(jí)菜單的導(dǎo)航條
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">網(wǎng)站首頁(yè)</a></li> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li class="disabled"><a href="##">PHP</a></li> </ul> </li> <li><a href="##">關(guān)于我們</a></li> </ul> </div>
【部件排列】
通過添加 .navbar-left 和 .navbar-right工具類讓導(dǎo)航鏈接、表單、按鈕或文本對(duì)齊。兩個(gè)類都會(huì)通過 CSS 設(shè)置特定方向的浮動(dòng)樣式。例如，要對(duì)齊導(dǎo)航鏈接，就要把它們放在個(gè)分開的、應(yīng)用了工具類的<ul>標(biāo)簽里
這些類是 .pull-left 和 .pull-right 的 mixin 版本，但是他們被限定在了媒體查詢（media query）中，這樣可以更容易的在各種尺寸的屏幕上處理導(dǎo)航條組件
[注意]導(dǎo)航條目前不支持多個(gè).navbar-right類。為了讓內(nèi)容之間有合適的空隙，最后一個(gè).navbar-right元素使用負(fù)邊距(margin)。如果有多個(gè)元素使用這個(gè)類，它們的邊距(margin)將不能按照預(yù)期正常展現(xiàn)
【表單】
有的導(dǎo)航條中會(huì)帶有搜索表單，Bootstrap框架中提供了一個(gè)“navbar-form”，使用方法很簡(jiǎn)單，在navbar容器中放置一個(gè)帶有navbar-form類名的表單即可
navbar-left實(shí)現(xiàn)左浮動(dòng)，navbar-right實(shí)現(xiàn)右浮動(dòng)
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> <li><a href="##">Bootstrap</a></li> <li><a href="##">jQuery</a></li> </ul> <form action="##" class="navbar-form navbar-left" rol="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="請(qǐng)輸入關(guān)鍵詞" /> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div>
【按鈕】
對(duì)于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以讓它在導(dǎo)航條里垂直居中。有一些對(duì)于為輔助設(shè)備提供可識(shí)別標(biāo)簽的方法，例如， aria-label、aria-labelledby 或者 title 屬性。如果這些方法都沒有，屏幕閱讀器將使用 placeholder 屬性（如果這個(gè)屬性存在的話），但是請(qǐng)注意，使用 placeholder 代替其他識(shí)別標(biāo)簽的方式是不推薦的
[注意]就像標(biāo)準(zhǔn)的 按鈕類 一樣，.navbar-btn 可以被用在 <a> 和 <input> 元素上。然而，在 .navbar-nav 內(nèi)，.navbar-btn 和標(biāo)準(zhǔn)的按鈕類都不應(yīng)該被用在 <a> 元素上。
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> <button type="button" class="btn btn-default navbar-btn">Sign in</button> </div>
【文本】
把文本包裹在 .navbar-text中時(shí)，為了有正確的行距和顏色，通常使用 <p> 標(biāo)簽
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> <p class="navbar-text">Signed in as huochai</p> </div>
【非導(dǎo)航鏈接】
可以在標(biāo)準(zhǔn)的導(dǎo)航組件之外添加標(biāo)準(zhǔn)鏈接，使用 .navbar-link 類可以讓鏈接有正確的默認(rèn)顏色和反色設(shè)置
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> <p class="navbar-text navbar-left">Signed in as <a href="#" class="navbar-link">huochai</a></p> </div>
導(dǎo)航條位置
很多情況下，設(shè)計(jì)師希望導(dǎo)航條固定在瀏覽器頂部或底部，這種固定式導(dǎo)航條的應(yīng)用在移動(dòng)端開發(fā)中更為常見。Bootstrap框架提供了g兩種固定導(dǎo)航條的方式：
? .navbar-fixed-top：導(dǎo)航條固定在瀏覽器窗口頂部
? .navbar-fixed-bottom：導(dǎo)航條固定在瀏覽器窗口底部
使用方法很簡(jiǎn)單，只需要在制作導(dǎo)航條最外部容器navbar上追加對(duì)應(yīng)的類名即可
這個(gè)固定的導(dǎo)航條會(huì)遮住頁(yè)面上的其它內(nèi)容，除非給 <body> 元素底部設(shè)置了 padding。提示：導(dǎo)航條的默認(rèn)高度是 50px
body { padding-top: 70px; }
body { padding-bottom: 70px; }<body style="padding:70px 0;"> <nav class="navbar navbar-default navbar-fixed-top"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </nav> <p>測(cè)試內(nèi)容<br><br>測(cè)試內(nèi)容<br><br>測(cè)試內(nèi)容<br><br>測(cè)試內(nèi)容<br><br>測(cè)試內(nèi)容<br><br>測(cè)試內(nèi)容<br><br>測(cè)試內(nèi)容</p> <nav class="navbar navbar-default navbar-fixed-bottom"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </nav>
【靜止在頂部】
通過添加 .navbar-static-top 類即可創(chuàng)建一個(gè)與頁(yè)面等寬度的導(dǎo)航條，它會(huì)隨著頁(yè)面向下滾動(dòng)而消失
<nav class="navbar navbar-default navbar-static-top"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </nav> <p>測(cè)試內(nèi)容<br><br><br>測(cè)試內(nèi)容<br><br><br>測(cè)試內(nèi)容<br><br><br>測(cè)試內(nèi)容<br><br><br>測(cè)試內(nèi)容<br><br><br>測(cè)試內(nèi)容<br><br><br>測(cè)試內(nèi)容</p>
響應(yīng)式導(dǎo)航條
Bootstrap的響應(yīng)式導(dǎo)航條實(shí)現(xiàn)如下：
1、保證在窄屏?xí)r需要折疊的內(nèi)容必須包裹在帶一個(gè)p內(nèi)，并且為這個(gè)p加入collapse、navbar-collapse兩個(gè)類名。最后為這個(gè)p添加一個(gè)class類名或者id名
<div class="collapse navbar-collapse" id="example"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </div>
或者
<div class="collapse navbar-collapse example"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </div>
2、保證在窄屏?xí)r要顯示的圖標(biāo)樣式（固定寫法）：
<button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
3、并為button添加data-target=".類名/#id名"，究競(jìng)是類名還是id名呢？由需要折疊的p來決定。如
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
或者，對(duì)應(yīng)class="example"
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <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> </div> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </div> </div>
反色導(dǎo)航條
反色導(dǎo)航條其實(shí)是Bootstrap框架提供的第二種風(fēng)格的導(dǎo)航條，與默認(rèn)的導(dǎo)航條相比，使用方法并無區(qū)別，只是將navbar-deafult類名換成navbar-inverse。其變化只是導(dǎo)航條的背景色和文本做了修改
<div class="navbar navbar-inverse" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">HTML</a></li> <li><a href="##">CSS</a></li> <li><a href="##">Javascript</a></li> </ul> </div>
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Bootstrap中導(dǎo)航條的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼