响应式布局Bootstrap基础了解
响应式布局：
一个网站能够兼容多个不同的终端
Bootstrap模板：
Bootstarp使用了一些html5元素和css属性，因此需要在项目开头包含
<!DOCTYPE html> <html> ... </html>
为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewport标签，如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
将width的属性设置为device-width可以确保它在不同设备上正确的呈现。
initial-scale=1.0确保网页加载时以1:1的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放功能
标准Bootstrap模板
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="jquery.js"></script> <!--引入jQuery库-->
<script src="js/bootstrap.min.js"></script><!--引入bootstrap库-->
</body>
</html>响应式图像：
<img src="..." class="img-responsive" alt="响应式图像">
Bootstrap3 CSS有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为container设置了Max-width用以匹配
网格系统
@media(min-width: 768px)
.container{
width:750px;
}