1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!-- //简介:boststrap内置了一套响应式，移动设备优先的流式栅格系统，随着屏幕设备或视口尺寸的增加，系统会自动分为最多12列，它包含了易于使用的预定义class，还有强大的mixin用于生成更具语义的布局 --> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <link href="resource/bootstrap/css/bootstrap.css" rel="stylesheet"> 8 <!-- /*栅格选项：bootstrap3.x使用了四种栅格选项来形成栅格系统，其实区别只有一条就是适合不同尺寸的屏幕设备。 9 class= col-xs、col-sm、col-md、col-lg 10 *** small mid large */ 11 /*列偏移：使用.col-md-offset-* 可以将列偏移到右侧，这些class通过使用*选折起将所有列增加了列的左侧margin。 12 例如：.col-md-offset-4将.col-md-4向右移动了4个列的宽度。 13 */ 14 /*嵌套列：为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列内即可实现。注意：嵌套row所包含的列加起来应该等于12. 15 */ 16 /*列排序：通过使用.col-md-push-*和.col-md-pull-*就可以很容易地改变列的顺序。 17 */ --> 18 <!-- margin叫边界手册上叫外补丁，padding是填充内补丁，在他们之间有一个边界border。padding包围的就是content， --> 19 <style type="text/css"> 20 .show-grid [class ^="col-"] { 21 padding-top: 10px; 22 padding-bottom: 10px; 23 background-color: #eee; 24 border: 1px solid #ddd; 25 background-color: rgba(86, 61, 124, .15); 26 border: 1px solid rgba(86, 61, 124, .2); 27 } 28 </style> 29 <script type="text/javascript"> 30 $(function(){ 31 }); 32 </script> 33 </head> 34 <body> 35 36 <b>col-lg-*用法</b> 37 <br/> 38 <div class="row show-grid"> 39 <div class="col-lg-8">.col-lg-8</div> 40 <div class="col-lg-4">.col-lg-4</div> 41 </div> 42 <br/> 43 <b>col-md-*用法</b> 44 <div class="row show-grid"> 45 <div class="col-md-1">.col-md-1</div> 46 <div class="col-md-1">.col-md-1</div> 47 <div class="col-md-1">.col-md-1</div> 48 <div class="col-md-1">.col-md-1</div> 49 <div class="col-md-1">.col-md-1</div> 50 <div class="col-md-1">.col-md-1</div> 51 <div class="col-md-1">.col-md-1</div> 52 <div class="col-md-1">.col-md-1</div> 53 <div class="col-md-1">.col-md-1</div> 54 <div class="col-md-1">.col-md-1</div> 55 <div class="col-md-1">.col-md-1</div> 56 <div class="col-md-1">.col-md-1</div> 57 </div> 58 <br/> 59 <div class="row show-grid"> 60 <div class="col-md-8">.col-md-8</div> 61 <div class="col-md-4">.col-md-4</div> 62 </div> 63 <br/> 64 <b>col-sm-*用法</b> 65 <div class="row show-grid"> 66 <div class="col-sm-8">.col-sm-8</div> 67 <div class="col-sm-4">.col-sm-4</div> 68 </div> 69 <br/> 70 <b>col-xs-*用法</b> 71 <div class="row show-grid"> 72 <div class="col-xs-8">.col-xs-8</div> 73 <div class="col-xs-4">.col-xs-4</div> 74 </div> 75 <br/> 76 <b>列偏移: col-md-offset-*</b> 77 <div class="row show-grid"> 78 <div class="col-md-4">.col-md-4</div> 79 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 80 </div> 81 <div class="row show-grid"> 82 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 83 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 84 </div> 85 <div class="row show-grid"> 86 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> 87 </div> 88 <br/> 89 <b>嵌套列: 嵌套row所包含的列加起来应该等于12</b> 90 <div class="row show-grid"> 91 <div class="col-md-9"> 92 Level 1: .col-md-9 93 <div class="row show-grid"> 94 <div class="col-md-6">Level 2: .col-md-6</div> 95 <div class="col-md-6">Level 2: .col-md-6</div> 96 </div> 97 </div> 98 </div> 99 <br/> 100 <b>列排序: .col-md-push-*和.col-md-pull-*</b> 101 <div class="row show-grid"> 102 <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 103 <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 104 </div> 105 </body> 106 </html>