Bootstrap学习笔记（六）--导航

一、基础

<ul class="nav nav-tabs">
    <li><a href="##">Home</a></li>
    <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类

二、标签形tab导航

添加类“nav-tabs”，如果是当前在li上添加“active”，如果禁用添加“disabled”

 <ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
 </ul>

 三、胶囊形导航

<ul class="nav nav-pills">   //这里用nav-pills
    <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
</ul>

四、垂直导航

 <ul class="nav nav-tabs nav-stacked">   //加上nav-stacked
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
 </ul>
 <br />
<ul class="nav nav-pills nav-stacked">  //加上nav-stacked
    <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
    <li class="nav-divider"></li>
     <li class="disabled"><a href="##">Responsive</a></li>
</ul>

 五、自适应导航

自适应导航是指导航占据容器的整个宽度，添加类“nav-justified”，要和“nav-pills”或“nav-tabs”一起使用。

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li><a href="##">Responsive</a></li>
</ul>

六、二级导航

<ul class="nav nav-pills">
  <li class="active"><a href="##">首页</a></li>
  <li class="dropdown">             //添加dropdown
      <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>  //添加dropdown-toggle类和 data-toggle="dropdown"属性
      <ul class="dropdown-menu">           //添加dropdown-menu类
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
      </ul>
  </li>
 <li><a href="##">关于我们</a></li>
</ul>

七、面包屑导航

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>