Bootstrap导航

Bootstrap导航

---

选项卡导航.nav .nav-tabs

1.新建一个web项目ch14，把ch13中的这些css文件、js文件拷贝过来。

2.打开ch14中的demo01.html。

3.设置选项卡的导航

<div class="container">

<h1>选项卡</h1>

<ul class="nav nav-tabs">

//首先给一个类选择器，注意nav和btn不一样，btn按钮会有固定的样式。

//而nav要给一个附加的样式，来告诉它是什么样的导航条效果。

<li class="active"><a href="#">首页</a></li>

//设置默认被激活的样式

<li><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a>   </li>

//禁用掉这个超链接

<li><a href="#">首页</a></li>

</ul>

4.运行效果

---

胶囊式选项卡导航.nav .nav-pills

1.胶囊式选项卡导航实例

 <h1>胶囊式</h1>

<ul class="nav nav-pills">

//胶囊式，当鼠标移上去的时候是有背景色的并且是带弧度的圆角。

<li class="active"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

 </ul>

2.运行效果

---

堆叠式导航.nav .nav.pills .nav-stacked

1.堆叠式导航实例

 <h1>胶囊式竖直</h1>

<ul class="nav nav-pills nav-stacked">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

 </ul>

2.运行效果

---

自适应导航.nav-justified

1.自适应导航实例

<h1>自适应</h1>

<ul class="nav nav-tabs nav-justified">

//实际上就是把三格<li>设成了table模式

//这四个导航按钮就占满我们的整个容器。

<li class="active"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

2.运行效果

---

分隔符

1.分隔符实例

 

<h1>胶囊式竖直</h1>

<ul class="nav nav-pills nav-stacked">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li class="nav-divider"></li>

//设置分隔符

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

2.运行效果

---

禁用

禁用就是设置disable激活是active。例如：

<li class="active"><a href="#">首页</a></li>

<li class="disabled"><a href="#">首页</a></li>

---

二级导航

1.二级导航实例

 <h1>二级导航</h1>

//二级导航就是当鼠标移到这个导航按钮上会有下拉菜单弹出

<ul class="nav nav-tabs">

//胶囊式

<li class="active"><a href="#">首页</a></li>

<li>

//在这个<li>上嵌套一个<ul>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">首页<span class="caret"></span></a>

//把这个“首页”作为下拉菜单的按钮来用，因此要增加这些样式。

<ul class="dropdown-menu">

//在这个<ul>上设置一个dropdown-menu下拉菜单的样式

  <li><a href="#">Items</a></li>

  <li><a href="#">Items</a></li>

  <li><a href="#">Items</a></li>

//设置三个子菜单

  </ul>

</li>

<li class="disabled"><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

 </ul>

</div>   

2.运行效果