【Web】Bootstrap栅格布局系统设计原理

这个布局提供了一套响应式布局解决方案。

一. 前提

被定义的元素内边距和边框不再会增加它的宽度。

* {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}
1
2
3
4
5

二.容器container

  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}@media (min-width: 768px) {/*当宽度大于768px时触发*/  .container {    width: 750px;  }}@media (min-width: 992px) {/*当宽度大于992px时触发*/  .container {    width: 970px;  }}@media (min-width: 1200px) {/*当宽度大于1200px时触发*/  .container {    width: 1170px;  }}.container-fluid { /*这个是宽度默认*/  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

三.行row

.row {  margin-right: -15px;  margin-left: -15px;}
1
2
3
4

四, 列Column
这个也很简单，你看总共有那么宽，Bootstrap分别将他们分割成12份，意思是你可以随意使用者12份，加起来要正好12。

.col-xs-* 针对超小屏幕 手机（<768px）

.col-sm-* 小屏幕 平板 (≥768px)

.col-md-* 中等屏幕 桌面显示器 (≥992px)(栅格参数)

.col-lg-* 针对特大的（≥1200px）
这些是什么意思？如何使用的呢？假设你写如下代码:

<div class="col-sm-10 col-md-8"></div><div class="col-sm-3 col-md-4"></div>
1
2

当这两个div在row里面之后。如果是这样 这两个div在小屏幕中会排2排 因为10+3>12 ,在中等屏幕中可以排同一排 8+4=12

说白了。就是在不同的宽度里面Bootstrap将帮助你选择不同的类，你可以用这些类定义你想在不同宽度的界面排版。

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2,/*后面代码省略，选择了所有的列，所有不同的列类型全部都有这样的有这样*/{  position: relative;  min-height: 1px;  padding-right: 15px;  padding-left: 15px;}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {  float: left;}.col-xs-12 {  width: 100%;}.col-xs-11 {  width: 91.66666667%;}.col-xs-10 {  width: 83.33333333%;}.col-xs-9 {  width: 75%;}.col-xs-8 {  width: 66.66666667%;}.col-xs-7 {  width: 58.33333333%;}.col-xs-6 {  width: 50%;}.col-xs-5 {  width: 41.66666667%;}.col-xs-4 {  width: 33.33333333%;}.col-xs-3 {  width: 25%;}.col-xs-2 {  width: 16.66666667%;}.col-xs-1 {  width: 8.33333333%;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

.col-sm-*

1 @media (min-width: 768px) {  2   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {  3     float: left;  4   }  5   .col-sm-12 {  6     width: 100%;  7   }  8   .col-sm-11 {  9     width: 91.66666667%; 10   } 11   .col-sm-10 { 12     width: 83.33333333%; 13   } 14   .col-sm-9 { 15     width: 75%; 16   } 17   .col-sm-8 { 18     width: 66.66666667%; 19   } 20   .col-sm-7 { 21     width: 58.33333333%; 22   } 23   .col-sm-6 { 24     width: 50%; 25   } 26   .col-sm-5 { 27     width: 41.66666667%; 28   } 29   .col-sm-4 { 30     width: 33.33333333%; 31   } 32   .col-sm-3 { 33     width: 25%; 34   } 35   .col-sm-2 { 36     width: 16.66666667%; 37   } 38   .col-sm-1 { 39     width: 8.33333333%; 40   } 41   .col-sm-pull-12 { 42     right: 100%; 43   } 44   .col-sm-pull-11 { 45     right: 91.66666667%; 46   } 47   .col-sm-pull-10 { 48     right: 83.33333333%; 49   } 50   .col-sm-pull-9 { 51     right: 75%; 52   } 53   .col-sm-pull-8 { 54     right: 66.66666667%; 55   } 56   .col-sm-pull-7 { 57     right: 58.33333333%; 58   } 59   .col-sm-pull-6 { 60     right: 50%; 61   } 62   .col-sm-pull-5 { 63     right: 41.66666667%; 64   } 65   .col-sm-pull-4 { 66     right: 33.33333333%; 67   } 68   .col-sm-pull-3 { 69     right: 25%; 70   } 71   .col-sm-pull-2 { 72     right: 16.66666667%; 73   } 74   .col-sm-pull-1 { 75     right: 8.33333333%; 76   } 77   .col-sm-pull-0 { 78     right: auto; 79   } 80   .col-sm-push-12 { 81     left: 100%; 82   } 83   .col-sm-push-11 { 84     left: 91.66666667%; 85   } 86   .col-sm-push-10 { 87     left: 83.33333333%; 88   } 89   .col-sm-push-9 { 90     left: 75%; 91   } 92   .col-sm-push-8 { 93     left: 66.66666667%; 94   } 95   .col-sm-push-7 { 96     left: 58.33333333%; 97   } 98   .col-sm-push-6 { 99     left: 50%;100   }101   .col-sm-push-5 {102     left: 41.66666667%;103   }104   .col-sm-push-4 {105     left: 33.33333333%;106   }107   .col-sm-push-3 {108     left: 25%;109   }110   .col-sm-push-2 {111     left: 16.66666667%;112   }113   .col-sm-push-1 {114     left: 8.33333333%;115   }116   .col-sm-push-0 {117     left: auto;118   }119   .col-sm-offset-12 {120     margin-left: 100%;121   }122   .col-sm-offset-11 {123     margin-left: 91.66666667%;124   }125   .col-sm-offset-10 {126     margin-left: 83.33333333%;127   }128   .col-sm-offset-9 {129     margin-left: 75%;130   }131   .col-sm-offset-8 {132     margin-left: 66.66666667%;133   }134   .col-sm-offset-7 {135     margin-left: 58.33333333%;136   }137   .col-sm-offset-6 {138     margin-left: 50%;139   }140   .col-sm-offset-5 {141     margin-left: 41.66666667%;142   }143   .col-sm-offset-4 {144     margin-left: 33.33333333%;145   }146   .col-sm-offset-3 {147     margin-left: 25%;148   }149   .col-sm-offset-2 {150     margin-left: 16.66666667%;151   }152   .col-sm-offset-1 {153     margin-left: 8.33333333%;154   }155   .col-sm-offset-0 {156     margin-left: 0;157   }158 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

http://www.cnblogs.com/suwings/p/6079178.html