快捷導(dǎo)航

BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航

更新時(shí)間：2017年01月03日 16:21:41 作者：Guddqs

這篇文章主要介紹了BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航的相關(guān)資料,需要的朋友可以參考下

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)站的支持！

您可能感興趣的文章:

相關(guān)文章

iScroll中事件點(diǎn)擊觸發(fā)兩次解決方案
iScroll是我們?cè)谧鍪謾C(jī)網(wǎng)頁(yè)中常用的滑動(dòng)控件之一。單說(shuō)其功能已相當(dāng)豐富。但個(gè)別時(shí)候也是會(huì)掉坑的，正好這次就遇上了。在android的app中嵌入網(wǎng)頁(yè)時(shí)不少手機(jī)會(huì)出現(xiàn)一次點(diǎn)擊兩次觸發(fā)的現(xiàn)象。經(jīng)過(guò)一段時(shí)間的折騰，總算想到了一個(gè)還算合理的解決放案。
2015-03-03
動(dòng)態(tài)添加option及createElement使用示例
動(dòng)態(tài)添加option在某些特殊的情況下還是比較實(shí)用的，本文有個(gè)小示例為大家介紹下createElement使用，感興趣的朋友可以參考下
2014-01-01
JavaScript實(shí)現(xiàn)全選取消效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)全選取消效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12
js判斷請(qǐng)求的url是否可訪問(wèn),支持跨域判斷的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js判斷請(qǐng)求的url是否可訪問(wèn),支持跨域判斷的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
JS完整獲取IE瀏覽器信息包括類(lèi)型、版本、語(yǔ)言等等
這篇文章主要介紹了JS如何完整獲取IE瀏覽器信息包括類(lèi)型、版本、語(yǔ)言等等,需要的朋友可以參考下
2014-05-05
javascript設(shè)計(jì)模式 – 模板方法模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 模板方法模式原理,結(jié)合實(shí)例形式分析了javascript模板方法模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JavaScript 實(shí)現(xiàn)一個(gè)響應(yīng)式系統(tǒng)的解決方案
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)一個(gè)響應(yīng)式系統(tǒng)的解決方案,本次示例使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)控,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2024-04-04
使用微信小程序制作核酸檢測(cè)點(diǎn)查詢(xún)工具
出門(mén)在外，沒(méi)有核酸證明寸步難行，此文將教你如何通過(guò)小程序制作一個(gè)工具幫你在人生地不熟的情況如何迅速找到核酸檢測(cè)點(diǎn)，實(shí)現(xiàn)核酸點(diǎn)查詢(xún)、地圖導(dǎo)航、撥號(hào)等功能，需要的朋友可以參考下
2022-10-10
js自定義QQ菜單效果
這篇文章主要為大家詳細(xì)介紹了js自定義QQ菜單，具有收縮，下拉等功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
整理一些最近經(jīng)常遇到的前端面試題
這篇文章主要給大家整理了一些在面試的時(shí)候經(jīng)常遇到的前端面試題，本文總結(jié)的這三十道面試題都是一些最近碰到的一些較為有用的前端題目，相信會(huì)對(duì)大家面試具有一定的參考價(jià)值，需要的朋友可以參考學(xué)習(xí)，下面來(lái)一起看看吧。
2017-04-04