BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航
nav導(dǎo)航欄
<nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的logo </a> </div> <div > <ul class="nav navbar-nav"> <li> <a href="#" > 分類(lèi) </a> </li> <li> <a href="#" > 分類(lèi) </a> </li> <li> <a href="#" > 分類(lèi) <span class="caret"/> </a> </li> </ul> </div> </nav>
響應(yīng)式的導(dǎo)航欄
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#one"> <span class="sr-only">切換導(dǎo)航</span> <span class="icon-bar"/> <span class="icon-bar"/> <span class="icon-bar"/> </button> <a href="#" class="navbar-brand"> BigLogo </a> </div> <div class="collapse navbar-collapse" id="one"> <ul class="nav navbar-nav"> <li> <a href="#"> 分類(lèi)1 </a> </li> <li> <a href="#"> 分類(lèi)2 </a> </li> <li> <a href="#"> 分類(lèi)3 </a> </li> <li> <a href="#"> 分類(lèi)4 </a> </li> </ul> </div> </div> </nav>
具有不同對(duì)齊風(fēng)格和固定的導(dǎo)航欄
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a href="#" class="navbar-brand"> 前端萬(wàn)歲 </a> </div> <div> <ul class="nav navbar-nav navbar-right"> <li> <a href="#" > <span class="glyphicon glyphicon-user"/>注冊(cè)</a></li> <li> <a href="#" > <span class="glyphicon glyphicon-log-in"/>登錄</a></li> </ul> <ul class="nav navbar-nav navbar-left"> <li> <a href="#" > <span class="glyphicon glyphicon-user"/>注冊(cè)</a></li> <li> <a href="#" > <span class="glyphicon glyphicon-log-in"/>登錄</a></li> </ul> </div> </div> </nav>
面包屑導(dǎo)航(BreadCrumb)
<ol class="breadcrumb"> <li> <a href='#' > 首頁(yè) </a> </li> <li> <a hef="#" > Java </a> </li> <li class=active"> <a href="#"> Xxx文章 </a> </li> </ol>
層次導(dǎo)航,讓我想起UC的極速模式的 X 級(jí)頁(yè)面
以上所述是小編給大家介紹的BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 詳解bootstrap導(dǎo)航欄.nav與.navbar區(qū)別
- Bootstrap實(shí)現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果(在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏)
- 解決bootstrap導(dǎo)航欄navbar在IE8上存在缺陷的方法
- Bootstrap編寫(xiě)導(dǎo)航欄和登陸框
- Bootstrap3制作自己的導(dǎo)航欄
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- bootstrap自定義樣式之bootstrap實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能
相關(guān)文章
JS 對(duì)象屬性相關(guān)(檢查屬性、枚舉屬性等)
這篇文章主要介紹了JS 對(duì)象屬性相關(guān)(檢查屬性、枚舉屬性等),需要的朋友可以參考下2015-04-04JS操作xml對(duì)象轉(zhuǎn)換為Json對(duì)象示例
本篇文章主要介紹了JS操作xml對(duì)象轉(zhuǎn)換為Json對(duì)象示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03JavaScript檢測(cè)彈出窗口是否已經(jīng)關(guān)閉的方法
這篇文章主要介紹了JavaScript檢測(cè)彈出窗口是否已經(jīng)關(guān)閉的方法,涉及javascript中window屬性的closed屬性的使用技巧,需要的朋友可以參考下2015-03-03js前端加密庫(kù)Crypto-js進(jìn)行MD5/SHA256/BASE64/AES加解密的方法與示例
js加密解密可以使用crypto-js它可以進(jìn)行MD5、SHA-1、SHA-256、Base64、AES、DES、等算法和加密,這是一個(gè)對(duì)稱(chēng)加密的庫(kù),可以使用 AES、DES、但沒(méi)有rsa等非對(duì)稱(chēng)加密的方法2023-12-12vue+ts下對(duì)axios的封裝實(shí)現(xiàn)
這篇文章主要介紹了vue+ts下對(duì)axios的封裝實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02js 剪切板的用法(clipboardData.setData)與js match函數(shù)介紹
這篇文章主要是對(duì)js中剪切板的使用方法(clipboardData.setData)與js中的match函數(shù)進(jìn)行了介紹。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11js中eval()函數(shù)和trim()去掉字符串左右空格應(yīng)用
對(duì)于js中eval()函數(shù)的理解和寫(xiě)一個(gè)函數(shù)trim()去掉字符串左右空格;對(duì)于js中eval()函數(shù)的理解是本人心得不一定正確,感興趣的朋友參考下,或許對(duì)你學(xué)習(xí)eval()函數(shù)有所幫助2013-02-02獲取Javscript執(zhí)行函數(shù)名稱(chēng)的方法
獲取Javscript執(zhí)行函數(shù)名稱(chēng)的方法...2006-12-12js判斷頁(yè)面中是否有指定控件的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)js判斷頁(yè)面中是否有指定控件的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03