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>
