Bootstrap导航

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. 激活标签页

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