171 lines
5.4 KiB
Markdown
171 lines
5.4 KiB
Markdown
---
|
||
title: Grid System
|
||
localeTitle: 网格系统
|
||
---
|
||
## 网格系统
|
||
|
||
简而言之，Bootstrap网格系统可帮助您创建响应式布局，它包含一个行和列系统，可帮助您构建内容。
|
||
|
||
行是水平的列组，每行最多12列。在每行中，内容放置在列内，并且可以跨越1到12列之间的任何位置。
|
||
|
||
Bootstrap有五种不同类型的网格层，即Extra small，Small，Medium，Large和Extra large，为每个网格层定义了一个断点。
|
||
|
||
Bootstrap使用像素来定义网格层断点，作为网格层断点的不同视口宽度为：
|
||
|
||
#### 怎么运行的
|
||
|
||
###### 容器
|
||
|
||
容器是_包含_网格的最外层元素，在屏幕中间使用`container`作为固定宽度的容器（大屏幕上的额外边距）或`container-fluid`的全宽度。
|
||
```
|
||
<div class="container"></div>
|
||
```
|
||
|
||
###### 行
|
||
|
||
使用`row`对`row`进行分组，这将使所有内容保持正确排列并帮助您构建网格。
|
||
```
|
||
<div class="row"></div>
|
||
```
|
||
|
||
###### 列
|
||
|
||
列类指示您希望在每行可能使用的12列中使用的列数。例如`col-sm-6`将意味着你的专栏将使用了宽度的一半`row`在小屏幕上，和`col-lg-4`将使用了大屏幕上的三分之一。
|
||
|
||
以下是如何定义类前缀以在各种屏幕尺寸上使用一个列宽：
|
||
|
||
* **超小** `col-1`
|
||
* **小** `col-sm-1`
|
||
* **中等** `col-md-1`
|
||
* **大** `col-lg-1`
|
||
* **超大** `col-xl-1`
|
||
```
|
||
<div class="col-sm-1"></div>
|
||
```
|
||
|
||
#### 例
|
||
|
||
一个全宽网格，有四列，每个列在xs屏幕上占据整行，在sm和md屏幕上占据半行，在大屏幕和上面的屏幕上占据行宽度的四分之一。
|
||
```
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-12 col-sm-6 col-lg-4">First Column</div>
|
||
<div class="col-12 col-sm-6 col-lg-4">Second Column</div>
|
||
<div class="col-12 col-sm-6 col-lg-4">Third Column</div>
|
||
<div class="col-12 col-sm-6 col-lg-4">Forth Column</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
_请注意，未定义`col-md`和`col-xl` ，其中未定义大小，它将默认为下一个已指定的较小大小。_
|
||
|
||
Bootstrap提供了一个现成的12列网格系统，用于布局。请考虑以下代码。
|
||
|
||
```html
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6">Content</div>
|
||
<div class="col-md-6">Content</div>
|
||
<div>
|
||
</div>
|
||
```
|
||
|
||
哪里：
|
||
```
|
||
- col = column
|
||
- md = screen size
|
||
- 6 = column width
|
||
```
|
||
|
||
作为12列网格系统，所有用户定义的网格列宽度必须最多为12。
|
||
|
||
屏幕尺寸值可以分配如下：
|
||
|
||
* xs - <768px手机
|
||
|
||
* sm - <992px平板电脑
|
||
|
||
* md - <1200px笔记本电脑
|
||
|
||
* lg - > 1200px台式机
|
||
|
||
Bootstrap首先是移动的并且响应迅速。
|
||
|
||
移动优先意味着网格布局将自动响应较小的屏幕。然后，HTML定义更大屏幕的网格布局。
|
||
|
||
|
||
以下代码和图像显示了使用不同列宽的可能性。
|
||
|
||
```html
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="example col-md-6">Content</div>
|
||
<div class="example col-md-6">Content</div>
|
||
<div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="example col-md-4">Content</div>
|
||
<div class="example col-md-4">Content</div>
|
||
<div class="example col-md-4">Content</div>
|
||
<div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="example col-md-3">Content</div>
|
||
<div class="example col-md-3">Content</div>
|
||
<div class="example col-md-3">Content</div>
|
||
<div class="example col-md-3">Content</div>
|
||
<div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="example col-md-2">Content</div>
|
||
<div class="example col-md-2">Content</div>
|
||
<div class="example col-md-2">Content</div>
|
||
<div class="example col-md-2">Content</div>
|
||
<div class="example col-md-2">Content</div>
|
||
<div class="example col-md-2">Content</div>
|
||
<div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
<div class="example col-md-1">Content</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
|
||
|
||
#### 更多信息：
|
||
|
||
[Bootstrap Docs - 网格系统](https://getbootstrap.com/docs/4.0/layout/grid/)
|
||
|
||
_本指南基于Bootstrap v4（它将与v3一起使用，除了额外的小屏幕定义为`xs`且没有`xl`大小）_
|
||
|
||
* 超大： **视口宽度> = 1200px**
|
||
* 大： **视口宽度> = 992px**
|
||
* 中： **视口宽度> = 768px**
|
||
* 小： **视口宽度> = 576px**
|
||
* 超小： **视口宽度低于576px**
|
||
|
||
#### 更多信息：
|
||
|
||
https://getbootstrap.com/docs/4.0/layout/grid/ |