一、概要
Bootstrap 提供了一组导航组件，Bootstrap 中的导航组件都依赖同一个.nav 类，状态类也是共用的。改变修饰类可以改变样式。
注意需要引入jquery， bootstrap.js插件
二、导航
标签页
1、说明
在导航组件上使用 .nav-tabs 类 注意依赖公共.nav类
2、栗子
<ul class="nav nav-tabs">
<li class="active"><a>阿里巴巴</a></li>
<li><a>腾讯</a></li>
<li><a>百毒</a></li>
<li><a>京东</a></li>
</ul>
实现标签切换只需要在a标签上添加自定义属性data-toggle='tab'
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab">阿里巴巴</a></li>
<li><a data-toggle="tab">腾讯</a></li>
<li><a data-toggle="tab">百毒</a></li>
<li><a data-toggle="tab">京东</a></li>
</ul>
实现标签页切换内容
<ul id="navigation" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">阿里巴巴</a></li>
<li><a href="#apple" data-toggle="tab">苹果公司</a></li>
<li class="dropdown">
<a href="#" id="dropdown" class="dropdown-toggle" data-toggle="dropdown">
Java<i class="caret"></i></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
<li><a href="#dobbo" tabindex="-1" data-toggle="tab">分布式dubbo</a></li>
<li><a href="#ms" tabindex="-1" data-toggle="tab">微服务</a></li>
<li><a href="#docker" tabindex="-1" data-toggle="tab">大数据</a></li>
</ul>
</li>
</ul>
<!-- 每个tab页对应的内容 -->
<div id="tab-content" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>
阿里巴巴网络技术有限公司（简称：阿里巴巴集团或阿里巴巴）是以曾担任英语教师的马云为首的18人于1999年在浙江杭州创立的公司
阿里巴巴集团经营多项业务，另外也从关联公司的业务和服务中取得经营商业生态系统上的支援。
业务和关联公司的业务包括：淘宝网、天猫、聚划算、全球速卖通、阿里巴巴国际交易市场、1688、阿里妈妈、阿里云、蚂蚁金服、菜鸟网络等
</p>
</div>
<div class="tab-pane fade" id="apple">
<p>
苹果公司（Apple Inc. ）是美国一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和罗·韦恩(Ron Wayne)等人于1976年4月1日创立，并命名为美国苹果电脑公司（Apple Computer
Inc. ），
2007年1月9日更名为苹果公司，总部位于加利福尼亚州的库比蒂诺。
苹果公司1980年12月12日公开招股上市，2012年创下6235亿美元的市值记录，截至2014年6月，苹果公司已经连续三年成为全球市值最大公司。苹果公司在2016年世界500强排行榜中排名第9名。
2013年9月30日，在宏盟集团的“全球最佳品牌”报告中，苹果公司超过可口可乐成为世界最有价值品牌。2014年，苹果品牌超越谷歌（Google），成为世界最具价值品牌。
</p>
</div>
<div class="tab-pane fade" id="dobbo">
<p>
Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架，使得应用可通过高性能的 RPC 实现服务的输出和输入功能，可以和 Spring框架无缝集成。
Dubbo是一款高性能、轻量级的开源Java RPC框架，它提供了三大核心能力：面向接口的远程方法调用，智能容错和负载均衡，以及服务自动注册和发现。
</p>
</div>
<div class="tab-pane fade" id="ms">
<p>
微服务架构是一项在云中部署应用和服务的新技术。大部分围绕微服务的争论都集中在容器或其他技术是否能很好的实施微服务，而红帽说API应该是重点。
微服务可以在“自己的程序”中运行，并通过“轻量级设备与HTTP型API进行沟通”。
关键在于该服务可以在自己的程序中运行。通过这一点我们就可以将服务公开与微服务架构（在现有系统中分布一个API）区分开来。在服务公开中，许多服务都可以被内部独立进程所限制。
如果其中任何一个服务需要增加某种功能，那么就必须缩小进程范围。在微服务架构中，只需要在特定的某种服务中增加所需功能，而不影响整体进程的架构。
</p>
</div>
<div class="tab-pane fade" id="docker">
<p> Docker是一个创建高度可扩展性和强大的容器架构。</p>
</div>
</div>
胶囊式标签页
1、说明
水平胶囊式导航.nav-pills 类、垂直胶囊式导航 nav-pills nav-stacked
2、栗子
水平胶囊式导航
<ul class="nav nav-pills">
<li class="active"><a href="#">阿里巴巴</a></li>
<li><a href="#">腾讯</a></li>
<li><a href="#">百毒</a></li>
<li><a href="#">京东</a></li>
</ul>
垂直胶囊式导航
<h1>垂直胶囊式标签页</h1>
<div>
<ul class="nav nav-pills nav-stacked col-lg-3">
<li class="active">
<a href="#1" data-toggle="tab">1号技师</a>
</li>
<li><a href="#2" data-toggle="tab">2号技师</a></li>
<li><a href="#3" data-toggle="tab">3号技师</a></li>
<li><a href="#4" data-toggle="tab">4号技师</a></li>
</ul>
<div class="tab-content col-lg-6">
<img class="tab-pane in active" id="1" src="img/01.jpg" alt="">
<img class="tab-pane fade" id="2" src="img/02.jpg" alt="">
<img class="tab-pane fade" id="3" src="img/03.jpg" alt="">
<img class="tab-pane fade" id="4" src="img/04.jpg" alt="">
</div>
</div>
</div>
三、导航条
1、说明
导航条是网站中作为导航页头的响应式基础组件。使用.navbar作为基础。
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
注意 导航条的可访问性 请使用 <nav> 元素或者使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。
2、栗子
<h1>导航条基础案例</h1>
<nav class="navbar navbar-default " role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">欣欣影城</a>
</div>
<ul class="nav navbar-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>
<li><a href="#">欧美</a></li>
<li><a href="#">伦理</a></li>
<li><a href="#">福利</a></li>
</ul>
</nav>
固定在底部 navbar-fixed-bottom
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
</div>
</nav>
固定在顶部 navbar-fixed-top
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
</div>
</nav>
反色的导航条 navbar-inverse
<nav class="navbar navbar-inverse">
</nav>
静止在顶部 navbar-static-top
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
</div>
</nav>
四、路径导航
1、说明
在一个带有层次的导航结构中标明当前页面的位置。使用 .breadcrumb来实现
2、栗子
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">电影</a></li>
<li class="active">最新电影</li>
</ol>
五、常用的data-toggle
<!--下拉菜单 -->
data-toggle="dropdown"
<!--模态框事件-->
data-toggle="model"
<!--提示框事件-->
data-toggle="tooltip"
<!--标签页-->
data-toggle="tab"
<!--折叠-->
data-toggle="collapse"
<!--弹出框 -->
data-toggle="popover"
<!-- 按钮事件 -->
data-toggle="button"
