Bootstrap导航

爱被打了一巴掌 2021-09-19 02:34 446阅读 0赞

# Bootstrap 导航 #

## 1. 定义导航组件 ##

基本结构：

<ul class="nav">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">导航标题1</a></li>
      <li><a href="#">导航标题2</a></li>
    </ul>

### 1-1. 设计标签页 ###

### 1-2. pills胶囊导航 ###

<ul class="nav nav-pills">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">导航标题1</a></li>
      <li><a href="#">导航标题2</a></li>
    </ul>

## 2. 设置导航选项 ##

### 2-1. 设计导航对齐方式(pull-right pull-left类) ###

<ul class="nav nav-tabs pull-left">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">导航标题1</a></li>
      <li><a href="#">导航标题2</a></li>
    </ul>
    
    <ul class="nav nav-tabs pull-right">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">导航标题1</a></li>
      <li><a href="#">导航标题2</a></li>
    </ul>
    
    <ul class="nav nav-tabs nav-justified">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">导航标题1</a></li>
      <li><a href="#">导航标题2</a></li>
    </ul>

### 2-2. 设计禁用项(disabled) ###

### 2-3. 设计堆叠效果(stacked) ###

## 3 绑定导航和下拉菜单 ##

需要引用jquery.js和bootstrap.js

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

### 3-1. 设计标签页下拉菜单 ###

### 3-2. 设计pills下拉菜单 ###

## 4. 激活标签页 ##

1.  引入jQuery和bootstrap-tab.js文件
2.  在标签页结构基础上，添加内容包含框，通过tab-content定义，子内容框类为tab-pane
3.  为每个内容框定义id值，并在标签列表项中为每个超链接绑定锚链接
4.  为每个标签项超链接定义data-toggle="tab"属性，激活标签页的交互行为
5.  在每个子内容框中添加fade类，可以实现淡入效果