1 <!DOCTYPE html>
2 <html >
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>