1.导入bootStrap
2.导入jQuery
3.bootstrap的完整模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示-->
<!--width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"(表示采用设备的宽度)
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap完整模板</title>
<!-- 引入Bootstrap核心样式文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果，必须放置到web服务器中，暂时不必掌握 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--正文从此处开始-->
<h1>你好，世界！</h1>
<!--前端开发建议：网站优化时，除了立即需要工作的js存放在head外，将大部分JS文件放在页面的末尾-->
<!-- 引入jQuery核心js文件，必须放置在bootStrap.js前面！ -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>4.bootstrap网址
5.布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
6.栅格参数
加起来等于12，若超过12单独放一行
7.响应式工具
8.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
<!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>利用bootstrap对oppo商城首页进行重构</title>
<!-- 引入Bootstrap核心样式文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.col-lg-1 a {
text-decoration: none;
color: black;
font-size: 17px;
float: right;
margin-top: 15px;
}
</style>
</head>
<body>
<!--正文从此处开始-->
<!--logo头部-->
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-1">
<img src="img/oppologo.png" style="float: left;" />
</div>
<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<a href="#">手机</a>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<a href="#">品牌</a>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<a href="#">商城</a>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<a href="#">体验店</a>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<a href="#">服务</a>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<a href="#">社区</a>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<a href="#">ColorOS</a>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs">
<a href="#">云服务</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-1">
<a href="#"><img src="img/应用商店.png" style="float: right;" /></a>
</div>
</div>
</div>
<!--轮播图-->
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/oppo01.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/oppo02.jpg" style="width:79.5%; height: 50%;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/oppo03.jpg" >
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/oppo04.jpg" style="width: 41%; height: 50%;">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--四个方块图-->
<div class="container" style="margin-top: 10px;">
<div class="row">
<div class="col-lg-6">
<img src="img/邀月邀国庆.jpg"style="width: 100%;"/>
</div>
<div class="col-lg-6" >
<img src="img/以旧换新.jpg" style="width: 100%;"/>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-lg-6" style="width: 50%;">
<img src="img/旅行的意义.jpg" style="width: 100%;"/>
</div>
<div class="col-lg-6" style="width: 50%;">
<img src="img/ColorOS5.2.png" style="width: 100%;"/>
</div>
</div>
</div>
<!--友情链接-->
<div class="container">
</div>
<!-- 引入jQuery核心js文件，必须放置在bootStrap.js前面！ -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>