二、栅格系统

发表于 | 更新于: | 分类于 ， |
| 字数: 4.3k | 时长 ≈ 22 分钟

说白了就是媒体查询和百分比布局

bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当的扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

1
2
3
bootstrap3是移动设备优先
bootstrap的栅格系统最多12列
bootstrap中包含了许多预定义类。

在通常我们写的页面里，浏览器缩小到一定程度，页面会错位、变形，这在bootstrap中不会，因为他是自适应的。

下图是栅格系统，它最多可以分为12列，你可以按自己喜欢的比例来划分页面，只要它们加起来不超过12。

NL9SqH.png

1、栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

NL9Ez8.png

2、类名说明

容器：container（固定宽度）（版心） container-fluid（100%）（通栏）

行：row

列：col-xs-5 col-sm col-md col-lg

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

3、案例

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
<!-- 版心 bootstrap中叫做容器 -->
<div class="container">
    <!-- 行 row 写栅格系统必须写 row-->
    <div class="row">
        <!-- 栅格系统 列 column  .col-mg-n  n范围 1~12 表示该盒子宽度占有整行总共12列的 n 列 -->
        <div class="col-md-4">
            <h1>我是第一个板块</h1>
        </div>
        <div class="col-md-4">
            <span>我是span</span>
        </div>
        <div class="col-md-4">3</div>
    </div>

<div class="row">
    <!-- 特殊样式另外起类名 栅格系统内容不要动 -->
        <div class="col-lg-11">11列</div>
    </div>
</div>

.bg-red {
            background-color: red;
            font-size: 50px;
            line-height: 50px;
            height: 100px;
        }

NLPOGq.png

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
<!-- lg 大屏幕一行显示6个盒子
         md 中屏幕一行显示3个盒子
         sm 小屏幕一行显示2个盒子
         xs 超小屏幕一行默认只显示 1个盒子 
    -->
    <div class="container">
        <!-- 1 行最多显示 12列-->
        <div class="row">
            <div class="col-lg-2 col-md-4 col-sm-6 bg01">1</div>
            <div class="col-lg-2 col-md-4 col-sm-6 bg02">2</div>
            <div class="col-lg-2 col-md-4 col-sm-6 bg03">3</div>
            <div class="col-lg-2 col-md-4 col-sm-6 bg04">4</div>
            <div class="col-lg-2 col-md-4 col-sm-6 bg05">5</div>
            <div class="col-lg-2 col-md-4 col-sm-6 bg06">6</div>
        </div>
    </div>

.bg01 {
    background-color: red;
    height: 200px;
}
.bg02 {
    background-color: blue;
    height: 200px;
}
.bg03 {
    background-color: green;
    height: 200px;
}
.bg04 {
    background-color: orange;
    height: 200px;
}
.bg05 {
    background-color: pink;
    height: 200px;
}
.bg06 {
    background-color: lightblue;
    height: 200px;
}

NLum9g.png

4、实例：从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

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
<div class="container">
    <div class="row">
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
        <div class="col-md-1 bd">.col-md-1</div>
    </div> 
    <div class="row"> 
        <div class="col-md-8 bd">.col-md-8</div>
        <div class="col-md-4 bd">.col-md-4</div>
    </div> 
    <div class="row"> 
        <div class="col-md-4 bd">.col-md-4</div>
        <div class="col-md-4 bd">.col-md-4</div>
        <div class="col-md-4 bd">.col-md-4</div>
    </div> 
    <div class="row"> 
        <div class="col-md-6 bd">.col-md-6</div>
        <div class="col-md-6 bd">.col-md-6</div>
    </div>
</div>

.bd {
    background-color: lightblue;
    height: 50px;
    border: 1px solid #000;
}

NLnO76.png

5、实例：流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

1
2
3
4
5
6
7
8
9
10
<div class="container-fluid">
    <div class="row">
        ...
    </div>
</div>

.row {
    background-color: lightblue;
    height: 50px;
}

NLuQun.png

6、实例：移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。

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
<div class="container">

    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
        <div class="col-xs-12 col-md-8 bd">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4 bd">.col-xs-6 .col-md-4</div>
    </div>
      
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-xs-6 col-md-4 bd">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4 bd">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4 bd">.col-xs-6 .col-md-4</div>
    </div>
      
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
        <div class="col-xs-6 bd">.col-xs-6</div>
        <div class="col-xs-6 bd">.col-xs-6</div>
    </div>
</div>

.bd {
    background-color: lightblue;
    border: 1px solid #000;
    height: 30px;
}

NLuN34.png

7、实例：手机、平板、桌面

在上面案例的基础上，通过使用针对平板设备的 .col-sm-* 类，来创建更加动态和强大的布局吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">

    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8 bd">.col-xs-12 .col-sm-6 .col-md-8</div>
        <div class="col-xs-6 col-md-4 bd">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4 bd">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4 bd">.col-xs-6 .col-sm-4</div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-4 bd">.col-xs-6 .col-sm-4</div>
    </div>
</div>

NLurE6.png

注：预定义类 clearfix visible-xs-block的作用

1.不使用clearfix和visible-xs-block

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>bootstrap test</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum=1.0,maxmum=1.0,user-scalable=no">
	<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-xs-6 col-sm-3">1.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example.</div>
		<div class="col-xs-6 col-sm-3">2.col-xs-6 .col-sm-3</div>
		<div class="col-xs-6 col-sm-3">3.col-xs-6 .col-sm-3</div>
		<div class="col-xs-6 col-sm-3">4.col-xs-6 .col-sm-3</div>
	</div>
</div>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>

NLKtdP.png

2.使用了clearfix和visible-xs-block类之后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>bootstrap test</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum=1.0,maxmum=1.0,user-scalable=no">
	<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-xs-6 col-sm-3">1.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example.</div>
		<div class="col-xs-6 col-sm-3">2.col-xs-6 .col-sm-3</div>
		<!-- Add the extra clearfix for only the required viewport -->
		<div class="clearfix visible-xs-block"></div>
		<div class="col-xs-6 col-sm-3">3.col-xs-6 .col-sm-3</div>
		<div class="col-xs-6 col-sm-3">4.col-xs-6 .col-sm-3</div>
	</div>
</div>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>

NLMVSg.png

8、实例：多余的列（column）将另起一行排列

如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

1
2
3
4
5
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

NLMJl4.png

9、响应式列重置

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。

1
2
3
4
5
6
7
8
9
10
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

NLM0k6.png

除了列在分界点清除响应， 可能需要 重置偏移, 后推或前拉某个列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row">
    <div class="col-sm-5 col-md-6">
        .col-sm-5 .col-md-6
    </div>
    <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
        .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
    </div>
</div>
              
<div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">
        .col-sm-6 .col-md-5 .col-lg-6
    </div>
    <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">
        .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
    </div>
</div>

NLM5h8.png

10、列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

1
2
3
4
5
6
7
8
9
10
11
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

NLMjA0.png

还可以使用.col-*-offset-0类覆盖较低网格层的偏移量。

1
2
3
4
5
6
7
8
<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

11、嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="row">
    <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
                    <div class="col-xs-8 col-sm-6">
                        Level 2: .col-xs-8 .col-sm-6
                    </div>
                    <div class="col-xs-4 col-sm-6">
                        Level 2: .col-xs-4 .col-sm-6
                    </div>
            </div>
    </div>
</div>

NLQy5V.png

12、列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

1
2
3
4
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

NLlSat.png

13 Less mixin 和变量

除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。

13.1 变量

通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。我们使用这些变量生成预定义的栅格类，如上所示，还有如下所示的定制 mixin。

1
2
3
@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

13.2 mixin

mixin 用来和栅格变量一同使用，为每个列（column）生成语义化的 CSS 代码。

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
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

13.3 实例展示

你可以重新修改这些变量的值，或者用默认值调用这些 mixin。下面就是一个利用默认设置生成两列布局（列之间有间隔）的案例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>
相关文章
点击查看

本文标题:二、栅格系统

文章作者:Mango

发布时间:2020年07月08日 - 21:14:39

最后更新:2020年07月08日 - 22:35:39

原始链接:https://mango185.github.io/post/83e1301b.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️