Bootstrap教程导航

文章目录[隐藏]

标签页
胶囊式标签页
- 基本的胶囊式导航菜单
- 垂直的胶囊式导航菜单
两端对齐的标签页
禁用的链接
添加下拉菜单
- 带下拉菜单的标签页
- 带下拉菜单的胶囊式标签页

导航是一个网页必备的元素，如果你使用Bootstrap框架的话，只需要添加一个.nav 类就可以了，我们还能灵活的处理各种标签导航样式，下面让我们一起来学习Bootstrap导航。

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

在标签页上使用导航需要依赖 JavaScript 标签页插件，由于标签页需要控制内容区的展示，因此，你必须使用标签页组件的 JavaScript 插件。

标签页

创建一个标签式的导航菜单：
以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs
下面的实例演示了这点：

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

  <li role="presentation" class="active"><a href="#">Home</a></li>

  <li role="presentation"><a href="#">Profile</a></li>

  <li role="presentation"><a href="#">Messages</a></li>

```
</ul>
```

胶囊式标签页

如果需要把标签改成胶囊的样式，只需要使用 .nav-pills 代替 .nav-tabs 即可，其他的步骤与上面相同。

基本的胶囊式导航菜单

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

   <li class="active"><a href="#">Home</a></li>

```
   <li><a href="#">SVN</a></li>
```
```
   <li><a href="#">iOS</a></li>
```
```
   <li><a href="#">VB.Net</a></li>
```
```
   <li><a href="#">Java</a></li>
```
```
   <li><a href="#">PHP</a></li>
```
```
</ul>
```
```
</ul>
```

垂直的胶囊式导航菜单

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。

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

   <li class="active"><a href="#">Home</a></li>

```
   <li><a href="#">SVN</a></li>
```
```
   <li><a href="#">iOS</a></li>
```
```
   <li><a href="#">VB.Net</a></li>
```
```
   <li><a href="#">Java</a></li>
```
```
   <li><a href="#">PHP</a></li>
```
```
</ul>
```

两端对齐的标签页

在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
下面的实例演示了这点：

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

   <li class="active"><a href="#">Home</a></li>

```
   <li><a href="#">SVN</a></li>
```
```
   <li><a href="#">iOS</a></li>
```
```
   <li><a href="#">VB.Net</a></li>
```
```
   <li><a href="#">Java</a></li>
```
```
   <li><a href="#">PHP</a></li>
```
```
</ul>
```
```
 
```
```
<ul class="nav nav-tabs nav-justified">
```

   <li class="active"><a href="#">Home</a></li>

```
   <li><a href="#">SVN</a></li>
```
```
   <li><a href="#">iOS</a></li>
```
```
   <li><a href="#">VB.Net</a></li>
```
```
   <li><a href="#">Java</a></li>
```
```
   <li><a href="#">PHP</a></li>
```
```
</ul>
```

禁用的链接

对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。
如下面的实例所示：

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

   <li class="active"><a href="#">Home</a></li>

```
   <li><a href="#">SVN</a></li>
```

   <li class="disabled"><a href="#">iOS（禁用链接）</a></li>

```
   <li><a href="#">VB.Net</a></li>
```
```
   <li><a href="#">Java</a></li>
```
```
   <li><a href="#">PHP</a></li>
```
```
</ul>
```
```
<ul class="nav nav-tabs">
```

   <li class="active"><a href="#">Home</a></li>

```
   <li><a href="#">SVN</a></li>
```
```
   <li><a href="#">iOS</a></li>
```

   <li  class="disabled"><a href="#">VB.Net（禁用链接）</a></li>

```
   <li><a href="#">Java</a></li>
```
```
   <li><a href="#">PHP</a></li>
```
```
</ul>
```

添加下拉菜单

带下拉菜单的标签页

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

   <li class="active"><a href="#">Home</a></li>

```
   <li><a href="#">SVN</a></li>
```
```
   <li><a href="#">iOS</a></li>
```
```
   <li><a href="#">VB.Net</a></li>
```
```
   <li class="dropdown">
```

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

```
      <ul class="dropdown-menu">
```
```
         <li><a href="#">Swing</a></li>
```

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

```
         <li><a href="#">EJB</a></li>
```
```
         <li class="divider"></li>
```

         <li><a href="#">分离的链接</a></li>

```
      </ul>
```
```
   </li>
```
```
   <li><a href="#">PHP</a></li>
```
```
</ul>
```

带下拉菜单的胶囊式标签页

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

   <li class="active"><a href="#">Home</a></li>

```
   <li><a href="#">SVN</a></li>
```
```
   <li><a href="#">iOS</a></li>
```
```
   <li><a href="#">VB.Net</a></li>
```
```
   <li class="dropdown">
```

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

```
      <ul class="dropdown-menu">
```
```
         <li><a href="#">Swing</a></li>
```

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

```
         <li><a href="#">EJB</a></li>
```
```
         <li class="divider"></li>
```

         <li><a href="#">分离的链接</a></li>

```
      </ul>
```
```
   </li>
```
```
   <li><a href="#">PHP</a></li>
```
```
</ul>
```

511遇见

不一样的遇见