快捷導(dǎo)航

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

更新時間：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="#" > 分類 </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)站的支持！

您可能感興趣的文章:

相關(guān)文章

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