bootstrap- 網格系統
阿新 • • 發佈：2017-06-05
code ots document 外邊距 alt fse har 沒有 max
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/bootstrap.min.css"> 7 <style> 8 9 </style> 10 <script src=‘script/jquery-1.7.2.min.js‘></script> 11 <script src=‘script/bootstrap.min.js‘></script> 12 </head> 13 <body> 14 <!-- 15 網格系統（Grid System）。 16 Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。 17 18 媒體查詢: 19 媒體查詢是非常別致的"有條件的 CSS 規則"。它只適用於一些基於某些規定條件的 CSS。如果滿足那些條件，則應用相應的樣式。20 21 //超小設備（手機 小於768px） bootstrap中默認情況下沒有媒體查詢 22 23 --> 24 <style> 25 /*小型設備（平板電腦，768以上）*/ 26 @media (min-width: @screen-sm-min) {} 27 /*中型設備（臺式電腦，992px起）*/ 28 @media (min-width: @screen-md-min){} 29 /*大型設備 （大臺式電腦 1200起）*/ 30 @media (min-width: @screen-lg-min) {} 31 32 /*媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小範圍的屏幕大小之內。*/ 33 @media (max-width: @screen-xs-max){} 34 /*對於所有帶有 min-width: @screen-sm-min 的設備，如果屏幕的寬度小於 @screen-sm-max，則會進行一些處理。*/ 35 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max){} 36 @media (min-width: @screen-md-min) and (max-width: @screen-md-max){} 37 @media (min-width: @screen-lg-min){} 38 </style> 39 /*網格系統一般的結構 */ 40 <div class="container"> 41 <div class="row"> 42 <!---在小型設備上 分 2-9 在中等設備上 分6-6 在大型設備上 分4-8--> 43 <div class="col-sm-3 col-md-6 col-lg-4">....</div> 44 <div class="col-sm-9 col-md-6 col-lg-8">....</div> 45 </div> 46 </div> 47 /*偏移列*/ 48 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。 49 50 eg: <div class="col-md-6 col-md-offset-3">..</div> 51 我們將使用 .col-md-offset-3 class 來居中這個 div。因為col-md-6是12中的一半，要居中的話，移動它占的6個列，然後再移動它的一半列 col-md-offset-* = 6-(6/2) 52 53 54 /*列排序*/ 55 地以一種順序編寫列，然後以另一種順序顯示列。 56 您可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內置網格列的順序，其中 * 範圍是從 1 到 11。 57 58 </body> 59 </html>
bootstrap- 網格系統