作者:
WangMin
格言:努力做好自己喜欢的每一件事
1.HTML5 文档类型
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。如图:
2.Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放，需要在<head>之中添加 meta标签，其中的name属性值必须是viewport。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
</head>
<body>
</body>
</html>
width = device-width ：表示宽度是设备屏幕的宽度
initial-scale = 1.0：表示初始的缩放比例
minimum-scale = 0.5：表示最小的缩放比例
maximum-scale = 2.0：表示最大的缩放比例
user-scalable = yes/no：表示用户是否可以双指或双击放大
这里的属性值设置根据你的项目情况来定
3.布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container容器。bootstrap提供了两个相同作用的类，注意由于padding的原因，这两种容器类不能相互嵌套。.container类用于固定宽度并支持响应式布局的容器，也就是用媒体查询获得的动态尺寸。.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
利用简单的例子来说明.container与.container-fluid之间的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>container与container-fluid区别</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background:red;"><div>container</div></div>
<div class="container-fluid" style="background:blue"><div>container-fluid</div></div>
</body>
</html>
1、.container类和container-fluid类的div左右两边有一个15px的padding（内边距）
2..container类在屏幕宽度小于等于767px的时候，宽度等于屏幕宽度的，也就是100%，.container-fluid类不管屏幕宽度大小，一直是100%屏幕宽767px：
3、.container类在屏幕宽度小于等于768px的时候div左右出现了外边距margin=9px（左右padding依然是15px），.container-fluid类宽度不管屏幕宽度大小，一直是100%。
4、.container类在屏幕宽度小于1000px的时候div左右外边距margin一直增大，padding值和子div的宽度不变，屏幕拉大的部分都作用于margin上了。.container-fluid类宽度不管屏幕宽度大小，一直是100%。
5、.container类在屏幕拉大到1000px的时候，.container类的div左右外边距margin=15px，左右padding=15px。.container-fluid类宽度不管屏幕宽度大小，一直是100%。
6、屏幕又继续拉大的时候，.container类的div左右外边距margin会随着拉大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。
根据以上的六个点进行的总结：
（1）.container类出现内边距和外边距，.container-fluid类出现内边距。
（2）.container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。
就先分享到这里!! 😄 后续继续更新!!
