快捷導(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)站的支持！

您可能感興趣的文章: