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%。