bootstrap栅格布局

发表于 | 更新于 | 分类于

bootstrap 提供了一套响应式、移动设备优先的栅格系统，通过一系列的行（row）与列（column）的组合来创建页面，十分强大，通过 bootstap 的源码我们可以更加详细的了解到栅格布局是如何实现的，同时创建更加符合自己需求的栅格布局

样式重置表

bootstrap 使用的样式重置表为 normalize.css 用来重置 html 标签在浏览器各自的默认样式，如果只为实现栅格布局，只需要重置盒模型

1
2
3
4
5
6
7
8
/*scss*/
*{
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

设置盒模型的边框类型为内边框，避免padding对盒宽度的影响

.container&.container-fluid

bootstrap 的栅格布局需要将所有内容都放进.container或者.container-fluid这个容器中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*scss*/
.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  @media (min-width: 768px) {
    width: 750px;
  }
  @media (min-width: 992px) {
    width: 970px;
  }
  @media (min-width: 1200px) {
    width: 1170px;
  }
  &:before,
  &:after {
  display: table;
  content: " ";
  }
  &:after {
  clear: both;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*scss*/
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  &:before,
  &:after {
  display: table;
  content: " ";
  }
  &:after {
  clear: both;
  }
}

.container容器在视区（viewport）宽度 >= 1200px时宽度为1170px；在视区（viewport）宽度 >= 992px时宽度为970px；在视区（viewport）宽度 >= 768px时宽度为750px；在视区（viewport）宽度 < 768px时宽度为屏幕宽度
.container会始终居中，并且有15px的左右内边距，由于容器内依靠浮动布局，所以还带有clearfix
.container-fluid容器宽度为100%，始终等于视区（viewport）宽度
.container中不应该在嵌套另一个.container

.row

1
2
3
4
5
6
7
8
9
10
11
12
13
//scss
.row{
  margin-right: -15px;
  margin-left: -15px;
  &:before,
  &:after {
  display: table;
  content: " ";
  }
  &:after {
  clear: both;
  }
}

.row需要放在.container内，并且有-15px的左右外边距，这样会抵消.container中15px的内边距，依旧带有clearfix

.col

.col-xs-x

1
2
3
4
5
6
7
8
9
scss
.col-xs-x {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  width: (x / 12) * 100%;
}

.col-sm-x

1
2
3
4
5
6
7
8
9
10
11
//scss
.col-sm-x {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  @media (min-width: 768px) {
  float: left;
  width: (x / 12) * 100%;
  }
}

.col-md-x

1
2
3
4
5
6
7
8
9
10
11
//scss
.col-md-x {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  @media (min-width: 992px) {
  float: left;
  width: (x / 12) * 100%;
  }
}

.col-lg-x

1
2
3
4
5
6
7
8
9
10
11
//scss
.col-lg-x {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  @media (min-width: 1200px) {
  float: left;
  width: (x / 12) * 100%;
  }
}

.col需要放在.row内，并且有15px的左右内边距，这样不同的.col之间就有了30px的间距，bootstrap 的栅格布局一般将.row平分成12份也就是12个.col

.col-xs-x用于视区（viewport）宽度 < 768px时
.col-sm-x用于视区（viewport）宽度 >= 768px时
.col-md-x用于视区（viewport）宽度 >= 992px时
.col-lg-x用于视区（viewport）宽度 >= 1200px时
x 在 bootstrap 中取值为：1~12

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
.col-xx-12 {
  width: 100%;
}
.col-xx-11 {
  width: 91.66666667%;
}
.col-xx-10 {
  width: 83.33333333%;
}
.col-xx-9 {
  width: 75%;
}
.col-xx-8 {
  width: 66.66666667%;
}
.col-xx-7 {
  width: 58.33333333%;
}
.col-xx-6 {
  width: 50%;
}
.col-xx-5 {
  width: 41.66666667%;
}
.col-xx-4 {
  width: 33.33333333%;
}
.col-xx-3 {
  width: 25%;
}
.col-xx-2 {
  width: 16.66666667%;
}
.col-xx-1 {
  width: 8.33333333%;
}

.col的宽度如需扩展，可自行设置百分比的宽度
举例：
将.row平分为5份

1
2
3
4
5
6
7
8
.col-xx-1_5 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  width: 20%;
}

将.row分为3+7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.col-xx-3_10 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  width: 30%;
}
.col-xx-7_10 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  width: 70%;
}

nesting

如果复杂的嵌套布局，可直接在.col中再次嵌套.row而不需要套.container
然后在.row中再嵌套.col

代码整理

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
//grid.scss
/*样式重置*/
*{
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/*container&container-fluid*/
.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  @media (min-width: 768px) {
    width: 750px;
  }
  @media (min-width: 992px) {
    width: 970px;
  }
  @media (min-width: 1200px) {
    width: 1170px;
  }
  &:before,
  &:after {
  display: table;
  content: " ";
  }
  &:after {
  clear: both;
  }
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  &:before,
  &:after {
  display: table;
  content: " ";
  }
  &:after {
  clear: both;
  }
}
/*row*/
.row{
  margin-right: -15px;
  margin-left: -15px;
  &:before,
  &:after {
  display: table;
  content: " ";
  }
  &:after {
  clear: both;
  }
}
.col-xs-x,
.col-sm-x,
.col-md-x,
.col-lg-x {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
/*col*/
.col-xs-x {
  float: left;
  width: (x / 12) * 100%;
}
.col-sm-x {
  @media (min-width: 768px) {
  float: left;
  width: (x / 12) * 100%;
  }
}
.col-md-x {
  @media (min-width: 992px) {
  float: left;
  width: (x / 12) * 100%;
  }
}
.col-lg-x {
  @media (min-width: 1200px) {
  float: left;
  width: (x / 12) * 100%;
  }
}