摘要：這篇文章主要介紹了BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航的相關(guān)資料,需要的朋友可以參考下nav導(dǎo)航欄<nav role="navigation" class="navbar navbar-default">   <div class="container-f

這篇文章主要介紹了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>

具有不同對(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"> 前端萬歲 </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è)面

 更多關(guān)于BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航請(qǐng)關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！