BootStrap学习笔记之nav导航栏和面包屑导航

nav导航栏

<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>

响应式的导航栏

<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">切换导航</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>

具有不同对齐风格和固定的导航栏

<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>

面包屑导航(BreadCrumb)

<ol class="breadcrumb">
 <li> <a href='#' > 首页 </a> </li>
 <li> <a hef="#" > Java </a> </li>
 <li class=active"> <a href="#"> Xxx文章 </a> </li>
</ol>

层次导航,让我想起UC的极速模式的 X 级页面

以上所述是小编给大家介绍的BootStrap学习笔记之nav导航栏和面包屑导航，希望对大家有所帮助

来源：http://blog.csdn.net/guddqs/article/details/53994376