Bootstrap5 网格系统学习笔记
什么是 Bootstrap5 网格系统？
Bootstrap5 网格系统是用于构建响应式网站布局的强大工具。它允许开发人员轻松地指定页面元素在不同屏幕大小和设备类型上的位置和大小。
如何使用 Bootstrap5 网格系统？
1. 引入 Bootstrap5
首先，需要将 Bootstrap5 的 CSS 和 JS 文件引入到 HTML 文档中。
htmlCopy Code<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
2. 创建容器
要使用 Bootstrap5 网格系统，需要首先创建一个包含所有内容的容器。可以使用 .container 或 .container-fluid 类来创建容器。
htmlCopy Code<div class="container">
<!-- content goes here -->
</div>
3. 创建行和列
在容器内，可以创建行和列。每行都被划分为12个列，可以使用 .row 类创建行。
htmlCopy Code<div class="container">
<div class="row">
<!-- columns go here -->
</div>
</div>
在行内，可以创建列，并使用 .col-* 类来定义列的大小。* 的取值可以是 1 到 12，表示占据的列数。
htmlCopy Code<div class="container">
<div class="row">
<div class="col-4">Column 1</div>
<div class="col-4">Column 2</div>
<div class="col-4">Column 3</div>
</div>
</div>
在上面的例子中，三个列都占据了容器的第一行的 1/3 宽度。
4. 响应式布局
可以使用 .col-* 类创建响应式布局。例如，可以在大屏幕上让一个列占据 4 个列，但在手机上则只占据 12 个列。
htmlCopy Code<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">Column 1</div>
<div class="col-lg-4 col-md-6 col-sm-12">Column 2</div>
<div class="col-lg-4 col-md-12 col-sm-12">Column 3</div>
</div>
</div>
在上面的例子中，每个列都有一个不同的响应式类。col-lg-* 表示大屏幕上的列宽，col-md-* 表示中等屏幕上的列宽，col-sm-* 表示小屏幕上的列宽。
实例
以下是一个简单的实例，演示了如何使用 Bootstrap5 网格系统创建响应式布局。
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap5 Grid System Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="https://picsum.photos/200" alt="">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="https://picsum.photos/200" alt="">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<img src="https://picsum.photos/200" alt="">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</body>
</html>
在上面的例子中，第一个和第二个列在大屏幕上占据了 1/3 宽度，在小屏幕上则占据了 1/2 宽度。第三列在大屏幕和中等屏幕上占据了整个行的宽度，在小屏幕上也占据了整个行。