Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果
導(dǎo)航欄是一個(gè)很好的功能，是 Bootstrap 網(wǎng)站的一個(gè)突出特點(diǎn)。導(dǎo)航欄是響應(yīng)式元組件就，作為應(yīng)用程序或網(wǎng)站的導(dǎo)航標(biāo)題。導(dǎo)航欄在移動(dòng)設(shè)備的視圖中是折疊的，隨著可用視口寬度的增加，導(dǎo)航欄也會(huì)水平展開(kāi)。在 Bootstrap 導(dǎo)航欄的核心中，導(dǎo)航欄包括了為站點(diǎn)名稱和基本的導(dǎo)航定義樣式。
創(chuàng)建一個(gè)默認(rèn)的導(dǎo)航欄的步驟如下：
- 向 <nav> 標(biāo)簽添加 class .navbar、.navbar-default（白底黑字），navbar-inverse（黑底白字）
- 向上面的元素添加 role="navigation"，有助于增加可訪問(wèn)性。
- 向 <div> 元素添加一個(gè)標(biāo)題 class .navbar-header，內(nèi)部包含了帶有 class navbar-brand 的 <a> 元素。這會(huì)讓文本看起來(lái)更大一號(hào)。
為了向?qū)Ш綑谔砑渔溄樱恍枰?jiǎn)單地添加帶有 class .nav、.navbar-nav 的無(wú)序列表即可。
下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 默認(rèn)的導(dǎo)航欄</title> <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-2.1.4.min.js"></script> <script src="bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">林炳文在此～</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">導(dǎo)航一</a></li> <li><a href="#">導(dǎo)航二</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 下拉菜單 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">我是誰(shuí)呢？</a></li> <li><a href="#">我也不知道</a></li> <li><a href="#">你是誰(shuí)呢？</a></li> <li class="divider"></li> <li><a href="#">分離的鏈接</a></li> <li class="divider"></li> <li><a href="#">另一個(gè)分離的鏈接</a></li> </ul> </li> </ul> </div> </nav> </body> </html>
效果如下：
把
<nav class="navbar navbar-inverse" role="navigation">
改成
<nav class="navbar navbar-default" role="navigation">
效果如下：
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果的代碼，希望對(duì)大家的學(xué)習(xí)有所幫助。
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- Bootstrap每天必學(xué)之導(dǎo)航條
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- Bootstrap每天必學(xué)之導(dǎo)航
- 第一次接觸神奇的Bootstrap菜單和導(dǎo)航
- Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件
- 第一次接觸神奇的Bootstrap導(dǎo)航條
- Bootstrap多級(jí)導(dǎo)航欄(級(jí)聯(lián)導(dǎo)航)的實(shí)現(xiàn)代碼
- Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
- Bootstrap導(dǎo)航中表單簡(jiǎn)單實(shí)現(xiàn)代碼
相關(guān)文章
JS組件Bootstrap實(shí)現(xiàn)圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap實(shí)現(xiàn)圖片輪播效果的具體代碼，對(duì)圖片輪播效果感興趣的小伙伴們可以參考一下2016-05-05
由于javascript是一種無(wú)類(lèi)型語(yǔ)言,所以一個(gè)數(shù)組的元素可以具有任意的數(shù)據(jù)類(lèi)型,同一個(gè)數(shù)組的不同元素 可以具有不同的類(lèi)型,數(shù)組的元素設(shè)置可以包含其他數(shù)組,這樣就可以創(chuàng)建一個(gè)復(fù)雜的數(shù)組了.2009-12-12
微信小程序?qū)崿F(xiàn)手勢(shì)滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手勢(shì)滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
不同的排序算法，執(zhí)行效率有著天壤之別，本腳本用JavaScript演示了各種常見(jiàn)的排序算法，包括：冒泡排序、選擇排序、插入排序、謝爾排序、快速排序(遞歸)、快速排序(堆棧)、歸并排序、堆排序2014-09-09
javascript(jquery)利用函數(shù)修改全局變量的代碼
現(xiàn)在博客系統(tǒng)的評(píng)論遇到一個(gè)問(wèn)題，用戶點(diǎn)擊“最后一頁(yè)”鏈接之后就自動(dòng)調(diào)取最后一頁(yè)的資料來(lái)顯示。2009-11-11
picker為用戶提供了多個(gè)選擇,用戶選了其中一種,但仍是需要有東西去告訴后臺(tái)用戶選了什么,下面這篇文章主要給大家介紹了關(guān)于微信小程序picker選擇器獲取值的2種方法,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Javascript confirm多種使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
使用 js 簡(jiǎn)單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例
這篇文章主要介紹了使用 js 簡(jiǎn)單的實(shí)現(xiàn) bind、call 、aplly代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript中document.querySelector函數(shù)用法介紹
這篇文章主要給大家介紹了關(guān)于JavaScript中document.querySelector函數(shù)用法的相關(guān)資料,document.querySelector是JavaScript中的一個(gè)內(nèi)置方法,用于通過(guò)CSS選擇器選擇文檔中的第一個(gè)匹配元素,需要的朋友可以參考下2023-08-08
