写在前面
Bootstrap是目前最流行的前端框架，接触bootstrap不久，写一份个人版的Bootstrap教程，也分享一下自己在使用的时候出现的问题，希望能对大家有所帮助。
准备工作
1、下载Bootstrap框架核心文件。
2、下载jQuery文件。
3、下载HTML5兼容IE的JS插件。
（现在Bootstrap官网上最新版本是3.3.7，会有压缩版和非压缩版两个版本，个人建议两个都下载下来，压缩版用于开发时引入样式，非压缩版便于自己查看源码。对于Jquery文件,个人建议下载1.12以上版本。否则由于版本支持的原因，可能使用的时候js效果不出来）
（注意文件引入的顺序：依次为bootstrap.min.css，jquery-2.2.4.min.js，bootstrap.min.js (style.css是我自己的样式文件)）
如何学习bootstrap
首先实践是最好的老师！在实践的基础上，去学习并遵守它的标准，即使是没有学过网页设计的开发者，也能做出很专业、美观的页面，极大地提高了工作效率。当然官方手册也是很重要，如果想要把bootstrap玩好，有空的时候多看看。（话不多说，下面直接贴上自己的代码，再对其中的一些知识点进行个人讲解）
个人demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="lib/bootstrap_default.min.css">-->
<link rel="stylesheet" href="lib/bootstrap.min.css">
<link rel="stylesheet" href="assets/style.css">
<script src="lib/jquery-2.2.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
</head>
<body>
<!-- 导航-->
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">潮科技有限公司</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">登陆</a></li>
</ul>
</div>
</nav>
<!-- 轮播图-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播指标-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播目标-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/bg1.jpg">
<div class="carousel-caption">
<p>标题1</p>
</div>
</div>
<div class="item">
<img src="assets/bg2.jpg">
<div class="carousel-caption">
<p>标题2</p>
</div>
</div>
<div class="item">
<img src="assets/bg3.jpg">
<div class="carousel-caption">
<p>标题3</p>
</div>
</div>
</div>
<!-- 轮播导航-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- 案例-->
<div class="case container">
<div class="row">
<div class="col-md-4">
<h2>案例1</h2>
<img src="assets/bc1.jpg" class="img-circle">
</div>
<div class="col-md-4">
<h2>案例2</h2>
<img src="assets/bc2.jpg" class="img-circle">
</div>
<div class="col-md-4">
<h2>案例3</h2>
<img src="assets/bc3.jpg" class="img-circle">
</div>
</div>
</div>
<!-- 产品展示图-->
<div class="container screenshoot">
<div class="row item">
<div class="col-md-5"><img src="assets/1.jpg"></div>
<div class="col-md-7">
<h2>展示1</h2>
<p>展示1展示1展示1展示1展示1展示1展示1展示1展示1</p>
</div>
</div>
<div class="row item">
<div class="col-md-7">
<h2>展示2</h2>
<p>展示2展示2展示2展示2展示2展示2展示2展示2展示2</p>
</div>
<div class="col-md-5"><img src="assets/2.jpg"></div>
</div>
<div class="row item">
<div class="col-md-5"><img src="assets/3.jpg"></div>
<div class="col-md-7">
<h2>展示3</h2>
<p>展示3展示3展示3展示3展示3展示3展示3展示3展示3</p>
</div>
</div>
</div>
<!-- 底部-->
<div class="container">
<footer>
潮威科技有限公司版权所有
<a href="#">潮威科技</a>
</footer>
</div>
</body>
</html>
导航条组件
Bootstrap 的导航条组件：
1、添加一个 nav 标签，并设置 class 为 navbar navbar-default ，role 为 navigation 。
2、然后在里面添加一个类名为container-fluid 的 div ，用来容纳导航条里的其他元素（链接、按钮等）。
3、添加一些导航链接 <li> ，然后把第一个 <li> 的 class 指定为 active ，表示**状态。
轮播图组件
为了实现一个轮播图效果（也有人叫“幻灯片”），以前我们可能会自己写代码，或者去找 jQuery 的插件。其实 Bootstrap 已经自带了一个轮播组件-Carousel 。
轮播图组件分三部分：carousel-indicators,carousel-inner,carousel-control
<ol class="carousel-indicators">是“指示器”，就是下方的那三个白色小点，标记当前播放到哪张图片了。<div class="carousel-inner" role="listbox"> 里面是主体内容区域，包括几张图片和对应说明，分别用 <div class="item"> 包裹起来
最后的两个 <a class="left carousel-control"> 元素是手动操作图片左右切换的按钮。
栅格布局
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
这部分我觉得实践最为重要，自己动手把代码写出来比较一下有什么不同，才能理解更为深刻。
最后
Bootstrap 就是这样一个简洁、直观、强悍的前端开发框架。在不断的升级过程中，也越来越优化。
最后，附上个人github账号 ,源码供大家学习。