1、总体注意事项 · Bootstrap前端响应式框架学习技术分享总结

## **总体注意事项** 1.**HTML5 文档类型** Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。如图: ![](https://img.kancloud.cn/8e/45/8e45e73e57edc80d8d477cf485c74c61_642x237.png) 2.**Bootstrap 是移动设备优先的**,为了确保适当的绘制和触屏缩放，需要在`<head>`之中**添加 meta标签**，其中的name属性值必须是viewport。 ```html <!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`之间的区别** ```html <!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（内边距） ![](https://img.kancloud.cn/fa/99/fa9994533e54bd21d5e4aa12ae392bb8_990x158.png) 2.`.container`类在屏幕宽度小于等于767px的时候，宽度=屏幕宽度的，也就是100%，`.container-fluid`类不管屏幕宽度大小，一直是100%屏幕宽767px： ![](https://img.kancloud.cn/65/29/6529f37fe366965beca2c5a3c556a245_980x140.png) 3、`.container`类在屏幕宽度小于等于768px的时候div左右出现了外边距margin=9px（左右padding依然是15px），`.container-fluid`类宽度不管屏幕宽度大小，一直是100%。 ![](https://img.kancloud.cn/d5/62/d562383ca5f47f270ed3faf794711ccb_992x153.png) 4、`.container`类在屏幕宽度小于1000px的时候div左右外边距margin一直增大，padding值和子div的宽度不变，屏幕拉大的部分都作用于margin上了。`.container-fluid`类宽度不管屏幕宽度大小，一直是100%。 ![](https://img.kancloud.cn/07/3d/073de70b8ae256186defef0d17f541c3_1154x146.png) 5、`.container`类在屏幕拉大到1000px的时候，`.container`类的div左右外边距margin=15px，左右padding=15px。`.container-fluid`类宽度不管屏幕宽度大小，一直是100%。 ![](https://img.kancloud.cn/85/97/8597b665a404c6ec1322ea7dc47bc042_1279x143.png) 6、屏幕又继续拉大的时候，拉大的部分又全部作用于`.container`类的div左右外边距margin。`.container-fluid`类宽度不管屏幕宽度大小，一直是100%。 ![](https://img.kancloud.cn/a4/52/a45242ffdb2d70ed90e4619b9a9c093e_1367x154.png) 根据以上的六个点进行的总结：（1）.container类出现内边距和外边距，.container-fluid类出现内边距。（2）.container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。