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. 设计标签页
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">导航标题1</a></li>
<li><a href="#">导航标题2</a></li>
</ul>
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类)
<!-- 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>
<!-- pull-right: -->
<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>
<!-- pull-right: -->
<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)
<ul class="nav nav-tabs pull-left">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">微信</a></li>
<li><a href="#">微博</a></li>
</ul>
2-3. 设计堆叠效果(stacked)
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">微信</a></li>
<li><a href="#">微博</a></li>
</ul>
3 绑定导航和下拉菜单
需要引用jquery.js和bootstrap.js
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<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. 设计标签页下拉菜单
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">微博</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">其他 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">退出</a>
</li>
</ul>
</li>
</ul>
3-2. 设计pills下拉菜单
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">微博</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">其他 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">退出</a>
</li>
</ul>
</li>
</ul>
4. 激活标签页
- 引入jQuery和bootstrap-tab.js文件
- 在标签页结构基础上，添加内容包含框，通过tab-content定义，子内容框类为tab-pane
- 为每个内容框定义id值，并在标签列表项中为每个超链接绑定锚链接
- 为每个标签项超链接定义data-toggle="tab"属性，激活标签页的交互行为
- 在每个子内容框中添加fade类，可以实现淡入效果
<ul class="nav nav-pills">
<li class="active"><a href="#tab1" data-toggle="tab">首页</a></li>
<li><a href="#tab2" data-toggle="tab">微信</a></li>
<li><a href="#tab3" data-toggle="tab">微博</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">其他 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">退出</a>
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">首页内容</div>
<div class="tab-pane fade" id="tab2">微信内容</div>
<div class="tab-pane fade" id="tab3">微博内容</div>
</div>
