貴州網站建設公司響應式布局（一）——bootstrap柵格系統
bootstrap根據不同屏幕尺寸，響應系統選擇不同的式布柵格選項。一共有四種柵格選項，柵格超小屏（手機）、響應系統小屏（平板）、式布中屏（桌面）、柵格大屏（超大桌面）。響應系統柵格系統分為12列，式布即每行最多可容納12列。柵格若<HTML>里，響應系統一個.row內包含的式布列（column）大于12個（即，一行中的柵格柵格單元超過12個單元），則會自動排版，響應系統總之，式布一行只能最多12列，柵格具體分析往后閱讀。
一、 柵格系統的使用
使用柵格系統時，需要在<head>部分做如下處理：
1 <head>2 <meta charset="UTF-8">3 <title>Document</title>4 <meta name="viewport" content="width=device-width, initial-scale=1.0">5 <link rel="stylesheet" href="css/bootstrap.min.css">6 <!-- [if lt IE 9]>7 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>8 <![endif] -->9 </head>
1. 為了確保適當的繪制和觸屏縮放，需要在<head>中添加viewport元數據標簽
width=device-width 寬度等于設備寬度
initial-scale=1.0 初始顯示大小——原始大小，即不進行縮放
2. 導入bootstrap.css文件【bootstrap核心CSS文件，必須導入】，有兩種方式導入方式：
一是，直接導入本地.css文件： <link rel="stylesheet" href="css/bootstrap.min.css">
二是，使用CDN加速服務：
<link rel="stylesheet" >
獲取最新版地址，請關注官網http://getbootstrap.com/getting-started/
3. 兼容性：
bootstrap是基于CSS3的，對于IE8- 不支持
IE8需要Respond.js配合才能實現對媒體查詢（media query）的支持。
以下代碼實現兼容性
<!-- [if lt IE 9]> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif] -->
二、柵格系統在多種屏幕設備上如何工作
使用方式：在相應的<div>上加上對應的類名即可。 類名形式為： 類前綴+num
如： <div class="col-md-1"></div>
表示中等屏幕，該<div>僅占1列
三、移動設備(xs)，平板(sm)，桌面屏幕(md)
移動設備(手機)用 .col-xs-* 類
平板用 .col-sm-* 類
桌面屏幕用 .col-md-* 類
它們的布局有如下關系：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/bootstrap.min.css"> 8 <!-- [if lt IE 9]> 9 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>10 <![endif] -->11 <style>12 div.example{ 13 margin-bottom: 80px;14 }15 div.row{ 16 margin-bottom: 15px; 17 }18 19 [class ^="col-"]{ 20 padding: 10px;21 background-color: #cff;22 border: 1px solid #fca;23 font-weight: bold;24 }25 </style>26 </head>27 <body>28 <div class="example">29 <h1>移動設備，桌面</h1> 30 <!-- Stack the columns on mobile by making one full-width and the other half-width -->31 <div class="row">32 <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>33 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>34 </div>35 36 <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->37 <div class="row">38 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>39 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>40 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>41 </div>42 43 <!-- Columns are always 50% wide, on mobile and desktop -->44 <div class="row">45 <div class="col-xs-6">.col-xs-6</div>46 <div class="col-xs-6">.col-xs-6</div>47 </div>48 </div>49 50 <div class="example">51 <h1>手機，平板，桌面</h1> 52 <div class="row">53 <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>54 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>55 </div>56 <div class="row">57 <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>58 <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>59 <!-- Optional: clear the XS cols if their content doesn't match in height -->60 <div class="clearfix visible-xs-block"></div>61 <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>62 </div> 63 </div>64 </body>65 </html>上圖的代碼實現 1. 超小屏(手機 col-xs-* ) 與 中屏(桌面 col-md-*)之間有3:2的換算關系
2. 在中屏以上屏幕(>=992px)中，才會顯示上圖效果；
若<=992px或是<=768px (在手機或者平板上)，有的一行 ( .row ) 已經超過12列，則分兩行顯示。
四、多余的列另起一行（列數>12）
如果一個.row內包含的列大于12個，包含多余列的元素將作為一個整體單元被另起一行排列
1 <h1>多余的列另起一行</h1> 2 <div class="row">3 <div class="col-xs-9"> .col-xs-9</div>4 <div class="col-xs-4"> .col-xs-4<br/>9+4>12，所以.col-xs-4另起一行</div>5 <div class="col-xs-8"> .col-xs-8<br/>4+8<=12，所以.col-xs-8仍在該行中顯示</div> 6 </div>多余的列另起一行
作者：GraceZy
來源鏈接：https://www.cnblogs.com/yinshuige/p/6108055.html
