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="#" > 分類 </a> </li> <li> <a href="#" > 分類 </a> </li> <li> <a href="#" > 分類 <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="#"> 分類1 </a> </li> <li> <a href="#"> 分類2 </a> </li> <li> <a href="#"> 分類3 </a> </li> <li> <a href="#"> 分類4 </a> </li> </ul> </div> </div> </nav>
具有不同對齊風(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"> 前端萬歲 </a> </div> <div> <ul class="nav navbar-nav navbar-right"> <li> <a href="#" > <span class="glyphicon glyphicon-user"/>注冊</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"/>注冊</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='#' > 首頁 </a> </li> <li> <a hef="#" > Java </a> </li> <li class=active"> <a href="#"> Xxx文章 </a> </li> </ol>
層次導(dǎo)航,讓我想起UC的極速模式的 X 級頁面
以上所述是小編給大家介紹的BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- 詳解bootstrap導(dǎo)航欄.nav與.navbar區(qū)別
- Bootstrap實現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄
- BootStrap實現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果(在小屏幕、手機(jī)屏幕瀏覽時自動折疊隱藏)
- 解決bootstrap導(dǎo)航欄navbar在IE8上存在缺陷的方法
- Bootstrap編寫導(dǎo)航欄和登陸框
- Bootstrap3制作自己的導(dǎo)航欄
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- Bootstrap實現(xiàn)響應(yīng)式導(dǎo)航欄效果
- bootstrap自定義樣式之bootstrap實現(xiàn)側(cè)邊導(dǎo)航欄功能
相關(guān)文章
JavaScript檢測彈出窗口是否已經(jīng)關(guān)閉的方法
這篇文章主要介紹了JavaScript檢測彈出窗口是否已經(jīng)關(guān)閉的方法,涉及javascript中window屬性的closed屬性的使用技巧,需要的朋友可以參考下2015-03-03js前端加密庫Crypto-js進(jìn)行MD5/SHA256/BASE64/AES加解密的方法與示例
js加密解密可以使用crypto-js它可以進(jìn)行MD5、SHA-1、SHA-256、Base64、AES、DES、等算法和加密,這是一個對稱加密的庫,可以使用 AES、DES、但沒有rsa等非對稱加密的方法2023-12-12js 剪切板的用法(clipboardData.setData)與js match函數(shù)介紹
這篇文章主要是對js中剪切板的使用方法(clipboardData.setData)與js中的match函數(shù)進(jìn)行了介紹。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11js中eval()函數(shù)和trim()去掉字符串左右空格應(yīng)用
對于js中eval()函數(shù)的理解和寫一個函數(shù)trim()去掉字符串左右空格;對于js中eval()函數(shù)的理解是本人心得不一定正確,感興趣的朋友參考下,或許對你學(xué)習(xí)eval()函數(shù)有所幫助2013-02-02獲取Javscript執(zhí)行函數(shù)名稱的方法
獲取Javscript執(zhí)行函數(shù)名稱的方法...2006-12-12