Bootstrap 简明教程
Bootstrap - Grid system
本章将讨论 Bootstrap 网格系统。在 Bootstrap 中,网格系统允许横跨页面最多 12 列,并且使用 flexbox 构建
This chapter will discuss about Bootstrap grid system. In Bootstrap, Grid system allows up to 12 columns across the page and is built with flexbox
Basic example
-
Bootstrap’s grid system is a responsive layout tool that uses containers, rows, and columns to align content.
为自适应固定宽度容器使用 .container 类。
. Use a .container class for a responsive fixed width container.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row mt-2">
<div class="col p-2 bg-primary">
First Column
</div>
<div class="col p-2 bg-warning">
Second Column
</div>
<div class="col p-2 bg-info">
Third Column
</div>
</div>
</div>
</body>
</html>
How it works
-
Bootstrap grid supports six responsive breakpoints. Breakpoints affect all sizes above it (such as sm, md, lg, xl, xxl), allowing you to control container and column sizing and behavior at each breakpoint.
-
Containers center and horizontally pad your content. Use .container for responsive pixel width or .container-fluid for full width across all viewport and device sizes. For various breakpoints the responsive container classes are used.
-
Rows are wrappers for columns. Each column contains horizontal padding. This padding is then applied to rows with negative margins. In this manner, all the content in the columns, is left-aligned.
-
Rows supports modification classes for uniform column sizing column sizing and gutter classes for changing the spacing of your text.
-
Columns are incredibly flexible. You can create various elements combination with any number of columns using one of the 12 template columns available per row.
-
Column widths are set in percentages for fluid and relative sizing to parent element.
-
Gutters are responsive and customizable. They are available for all the viewports and are of same size as margin and padding. You can modify gutters by using the .gx- (for horizontal gutters), .gy- (for vertical gutters), .g-* (for all gutters) and .g-0 to remove gutters.
-
To create more semantic markup, you can use predefined grid’s source Sass mixins.
Bootstrap 网格系统中有六个类:
There are six classes in Bootstrap Grid System:
-
Extra small (.col-xs)
-
Small (.col-sm-)
-
Medium (.col-md-)
-
Large (.col-lg-)
-
Extra large (.col-xl-)
-
Extra extra large (.col-xxl-)
网格在这些断点上的变化如下表所示:
How the grid varies over these breakpoints is shown in the below table:
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
Container max-width |
None (auto) |
540px |
720px |
960px |
1140px |
1320px |
Class prefix |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# of columns |
12 |
- |
- |
- |
- |
- |
Gutter width |
1.5rem (.75rem margin on both sides.) |
- |
- |
- |
- |
- |
Custom gutters |
Yes |
- |
- |
- |
- |
- |
Nestable |
Yes |
- |
- |
- |
- |
- |
Column ordering |
Yes |
- |
- |
- |
- |
- |
Auto-layout columns
要轻松调整列大小而不使用显示编号的类,请使用特定于断点的列类,例如 .col-sm-6 。
For easy column sizing without an explicit numbered class, use breakpoint-specific column classes like .col-sm-6.
Equal-width
-
Use equal-width grid system to create the grid in equal sizes.
-
Two grid layouts work on any device size from xs to xxl. For each breakpoint, you can add many unit-less classes, and each column/row will have the same width.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<h5>Equal columns</h5>
<div class="row mt-2">
<div class="col p-2 bg-primary">
First Column
</div>
<div class="col p-2 bg-info">
Second Column
</div>
</div>
<h5>Equal rows</h5>
<div class="col mt-2">
<div class="row p-2 bg-warning text-white">
First Row
</div>
<div class="row p-2 bg-secondary text-white">
Second Row
</div>
<div class="row p-2 bg-success text-white">
Third Row
</div>
</div>
</div>
</body>
</html>
Setting one column width
-
You can choose one column width and other columns automatically resize around it.
-
Use grid classes, mixins, or inline widths. You can resize the other columns no matter the width of the center column.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row mt-2">
<div class="col-6 p-2 bg-primary text-white">
First Column (col-6)
</div>
<div class="col-3 p-2 bg-secondary text-white">
Second Column (col-3)
</div>
<div class="col p-2 bg-warning text-white">
Third Column (col)
</div>
</div>
</div>
</body>
</html>
Variable width content
使用 col-{breakpoint}-auto 类根据内容的自然宽度调整列的大小。
Use col-{breakpoint}-auto classes to size columns according to the content’s natural width.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row justify-content-md-center mt-2">
<div class="col col-lg-2 p-2 bg-primary ">
First Column
</div>
<div class="col-md-auto p-2 bg-info ">
Second column with variable width content.
</div>
<div class="col col-lg-2 p-2 bg-warning">
Third Column
</div>
</div>
</div>
</body>
</html>
Responsive classes
在 Bootstrap 中,网格具有六层预定义类,用于创建复杂的响应式布局。你可以将列/行自定义为小、中、大或超大型设备。
In Bootstrap, grid has six tiers of predefined classes which is used to create complex responsive layouts. You can customize the columns/row to small, medium, large, or extra-large devices.
All breakpoints
对所有大小的设备都一致的网格使用 .col 和 .col- * 类。如果你需要特定大小的列,请使用编号类。
Use the .col and .col-* classes for grids that are consistent across all sizes of devices. If you require a column of a specific size then use a numbered class.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<h5>Columns</h5>
<div class="row mt-2">
<div class="col p-2 bg-primary">First Column</div>
<div class="col p-2 bg-warning">Second Column</div>
<div class="col p-2 bg-light">Third Column</div>
</div>
<h5>Rows</h5>
<div class="col mt-2">
<div class="row-9 p-2 bg-info">First Row</div>
<div class="row-3 p-2 bg-success">Second Row</div>
</div>
</div>
</body>
</html>
Stacked to horizontal
使用 .col-sm- * 类构建一个简单的网格系统,该系统在超小和小的设备上堆叠,并在较大的设备上变成水平。
Use .col-sm-* classes to build a simple grid system that is stacked on extra small and small devices and becomes horizontal on larger devices.
*注意:*调整浏览器的尺寸以检查对不同设备的影响。
*Note: *Resize the browser to check the effect on various devices.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<h5>Columns</h5>
<div class="row mt-2">
<div class="col-sm-6 p-2 bg-primary text-white">First Column</div>
<div class="col-sm-3 p-2 bg-success text-white">Second Column</div>
<div class="col-sm-2 p-2 bg-dark text-white">Third Column</div>
</div>
<h5>Rows</h5>
<div class="col mt-2">
<div class="row-sm p-2 bg-info">First row</div>
<div class="row-sm p-2 bg-warning">Second row</div>
</div>
</div>
</body>
</html>
Mix and match
将不同层级的各种类相互组合,可以根据需要轻松地将某些网格层级中的列堆叠在一起。
Use a combination of various classes for each tier to easily stack the columns in some grid tiers according to your needs.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row mt-2">
<div class="col-sm-4 p-2 bg-primary text-white">First column of col-sm-4</div>
<div class="col-3 p-2 bg-secondary text-white">Second column of col-3</div>
</div>
<div class="row mt-2">
<div class="col-4 col-md-2 p-2 bg-warning text-white">First column of col-4 col-md-2</div>
<div class="col-4 col-md-2 p-2 bg-secondary text-white">Second column of col-4 col-md-2</div>
<div class="col-4 col-md-2 p-2 bg-info text-white">Third column of col-4 col-md-2</div>
</div>
<div class="row mt-2">
<div class="col-sm-3 p-2 bg-dark text-white">First column of col-sm-3</div>
<div class="col-md-6 p-2 bg-success text-white">Second column of col-md-6</div>
</div>
</div>
</body>
</html>
Row columns
-
Bootstrap grid provides row column classes to create simple grid layouts.
-
Individual rows are included in .row* class.
-
Individual columns are included in .col* class.
-
Use .row-cols-* class to set the number of columns in a single row.
-
Use .row-cols-auto to adjust the column’s size based on its content.
===
使用 .row-cols-2 类创建两列。
Create two different columns using .row-cols-2 class.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row row-cols-2">
<div class="col bg-info p-2">First Row First Column</div>
<div class="col bg-primary p-2">First Row Second Column</div>
<div class="col bg-warning p-2">Second Row First Column</div>
</div>
</div>
</body>
</html>
使用 .row-cols-3 类创建三列。
Create three different columns using .row-cols-3 class.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center mt-2">
<div class="row row-cols-3 mt-2">
<div class="col bg-info p-2">First Row First Column</div>
<div class="col bg-light p-2">First Row Second Column</div>
<div class="col bg-primary p-2">First Row Third Column</div>
<div class="col bg-secondary p-2">Second Row First Column</div>
<div class="col bg-success p-2">Second Row Second Column</div>
<div class="col bg-warning p-2">Second Row Third Column</div>
</div>
</div>
</body>
</html>
使用 row-cols-auto 类创建行和列的网格。
Create grids of rows and columns using row-cols-auto class.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row row-cols-auto">
<div class="col bg-primary p-2">First Row First Column</div>
<div class="col bg-secondary p-2">First Row Second Column</div>
<div class="col bg-warning p-2">First Row Third Column</div>
<div class="col bg-info p-2">First Row Fourth Column</div>
<div class="col bg-success p-2">First Row Fifth Column</div>
<div class="col bg-light p-2">First Row sixth Column</div>
<div class="col bg-danger p-2">Second Row First Column</div>
</div>
</div>
</body>
</html>
使用 row-cols-4 类创建四列。
Create four different columns using row-cols-4 class.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row row-cols-4">
<div class="col bg-primary p-2">First Row First Column</div>
<div class="col bg-secondary p-2">First Row Second Column</div>
<div class="col bg-warning p-2">First Row Third Column</div>
<div class="col bg-info p-2">First Row Fourth Column</div>
<div class="col bg-light p-2">Second Row First Column</div>
<div class="col bg-danger p-2">Second Row Second Column</div>
</div>
</div>
</body>
</html>
使用 row-cols-1 、 row-cols-sm-3 类和 row-cols-md-6 类。
Using row-cols-1, row-cols-sm-3 and row-cols-md-6 classes.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row row-cols-1 row-cols-sm-3 row-cols-md-6 mt-2">
<div class="col bg-primary p-2">First Row First Column</div>
<div class="col bg-light p-2">First Row Second Column</div>
<div class="col bg-warning p-2">First Row Third Column</div>
<div class="col bg-info p-2">First Row Fourth Column</div>
<div class="col bg-danger p-2">First Row Fifth Column</div>
</div>
</div>
</body>
</html>
使用 row-cols() Sass 混入。
Using the row-cols() Sass mixin.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.custom_grid{
@media row-cols(2);
@media media-breakpoint-up(lg) {
@media row-cols(6);
}
}
</style>
</head>
<body>
<div class="container custom_grid text-center">
<div class="row">
<div class="col bg-primary p-2">First Row First Column</div>
<div class="col bg-light p-2">First Row Second Column</div>
<div class="col bg-warning p-2">First Row Third Column</div>
<div class="col bg-info p-2">First Row Fourth Column</div>
<div class="col bg-danger p-2">First Row Fifth Column</div>
</div>
</div>
</body>
</html>
Nesting
嵌套网格系统在现有网格的单格中添加网格的行和列。嵌套行应由一组列组成,其总数不得超过 12(没有必要使用全部 12 列)。
A nesting grid system adds rows and columns of the grid in single cell of an existing grid. The nested rows should consist of a group of columns whose total does not exceed 12 (it is not necessary to utilize all 12 columns).
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row mt-2">
<div class="col-sm bg-primary p-2">
First Column
</div>
<div class="col-sm bg-info p-2">
<div class="container">
<div class="row">
<div class="col col-sm bg-light">
Second Column
</div>
<div class="col col-sm bg-light">
Second Column
</div>
</div>
</div>
</div>
<div class="col-sm bg-primary p-2">
Third Column
</div>
</div>
</div>
</body>
</html>