爬虫训练场项目，1小时掌握 Bootstrap 网格系统
项目设计图概览
爬虫训练场项目的基本呈现为方块布局，然后点击每个卡片可以进入待爬取目标页。通过设计软件对页面进行简单规划，草图如下。
为了实现该效果，本篇博客会带着大家串一下 Bootstrap5 相关技术点，如果你需要本部分知识点，正好可以一起学起来。
Bootstrap 串讲
Bootstrap5 安装使用
如果你的服务器带宽不足，建议使用 Bootstrap 的 CDN 地址提高访问速度，一般调用如下三个文件即可。
bootstrap.min.css：核心 CSS 文件；popper.min.js：用于弹窗，提示，下拉菜单等组件的 JS 文件文件；bootstrap.min.js：核心 JS 文件。
如果直接使用 bootstrap.bundle.min.js 文件，可以忽略 popper.min.js 及其它以来脚本。
在上一篇博客，我们已经建立了第一个 Bootstrap 5 页面，这次从零开始重新学习一下。
Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
</html>
接下来再配置一下移动设备优先，在 head 标签中添加 viewport meta 标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
</html>
其中 width=device-width 表示宽度是设备屏幕的宽度，initial-scale=1 表示初始的缩放比例。
在编写 Bootstrap5 页面的时候，一般还需要一个容器元素来包裹整个网站内容，常用容器类如下：
container：固定宽度并支持响应式的布局容器；container-fluid：宽度 100%的窗口容器。
示例代码如下所示，案例都在 Python Flask 框架模板中实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>爬虫训练场，版权：梦想橡皮擦</title>
<link
rel="stylesheet"
href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css"
/>
</head>
<body>
<div class="container">
<h1>爬虫训练场项目，Bootstrap 知识点学习</h1>
<p>为了搭建页面，我们需要补充 Bootstrap 相关知识点</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
如果对容器细节再进行学习，container 类用于创建固定宽度响应式页面，其宽度会根据屏幕宽度同比例放大或缩小，其 max-width 属性变化如下。
超级小屏幕：<576px：100%；小屏幕 ≥576px：540px；中等屏幕 ≥768px：720px；大屏幕 ≥992px：960px；特大屏幕 ≥1200px：1140px；超级大屏幕 ≥1400px：1320px；
container-fluid 创建一个全屏幕尺寸容器，容器始终占整个屏幕宽度，如果希望设置容器内边距，可以使用 .pt-5 类属性。
掌握该属性之后，其对应的一组属性也要掌握，分别如下：
.p-*：*可取值为 0~5，表示内边距取值分别为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem；.pt-*：*可取值为 0~5，顶部内边距；.pb-*：右侧内边距；.ps-*：底部内边距；.pe-*：左侧内边距；.px-*：左右内边距；.py-*：上下内边距。
可以在代码中进行一下测试，例如下述代码。
<div class="container pt-1 bg-primary text-white">
<h1>爬虫训练场项目，Bootstrap 知识点学习</h1>
<p>为了搭建页面，我们需要补充 Bootstrap 相关知识点</p>
</div>
<div class="container pt-3 bg-primary text-white">
<h1>爬虫训练场项目，Bootstrap 知识点学习</h1>
<p>为了搭建页面，我们需要补充 Bootstrap 相关知识点</p>
</div>
运行代码可以看到内边距变化，上述代码还用到了容器背景色和前景色设置，即 bg-* 和 text-* 两个属性，在图片后，也对该属性进行了说明。
使用 .bg-* 和 .text-* 属性，* 的取值如下所示，对应的颜色在代码后展示。
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
.text-* 属性的颜色值多几个，分别如下。
.text-muted：柔和颜色；.text-black-50：黑色半透明；.text-white-50：白色半透明；.text-body：主体颜色
Bootstrap5 网格系统
Bootstrap 提供了一整套响应式，移动设备优先的流式网格系统，页面最多允许 12 列，为完成该目标，Bootstrap 提供了 6 个类，分别如下。
.col-*：超小型设备，屏幕宽度小于 576px；.col-sm-：小型设备，屏幕宽度等于或大于 576px；.col-md-：中型设备；.col-lg-：大型设备；.col-xl-：特大设备；.col-xxl-：超大设备。
实践中可以组合上述类，完成目标。
接下来我们就完成网格结构的基本学习。
第一种编写方式，控制列的宽度在不同设备上显示，结构代码如下。
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
其中第一个 * 表示设备，可选 sm，md，lg，xl，xxl 等内容，第二个 * 为一个数字，同一行相加等于 12。
例如我们使用 sm 配置 4 个 div，代码实现如下。
<div class="container">
<div class="row">
<div class="col-sm-6 bg-primary">
<h3>爬虫训练场项目</h3>
</div>
<div class="col-sm-6 bg-info">
<h3>爬虫训练场项目</h3>
</div>
</div>
</div>
运行代码得到下图效果，在此基础上，增加 md 配置。
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 bg-primary">
<h3>爬虫训练场项目</h3>
</div>
<div class="col-sm-6 col-md-8 bg-info">
<h3>爬虫训练场项目</h3>
</div>
</div>
</div>
拖动浏览器，可以看到页面布局的变化，如果希望继续调整，只需要适配 lg，xl 等属性即可完成任务，这里不再一一展示。
实战的时候，可以不在每个 col 上添加数字，而是由 bootstrap 自动实现。代码如下。
<div class="row">
<div class="col"><h3>爬虫训练场项目</h3></div>
<div class="col"><h3>爬虫训练场项目</h3></div>
<div class="col"><h3>爬虫训练场项目</h3></div>
</div>
除了上述写法外，还可以实现嵌套列，注意嵌套列也是按照 12 份进行分割。
<div class="container">
<div class="row">
<div class="col-8 bg-success p-4">
爬虫训练场
<div class="row">
<div class="col-6 bg-info p-2">左分割</div>
<div class="col-6 bg-secondary p-2">右分割</div>
</div>
</div>
<div class="col-4 bg-primary p-4">尾部4份</div>
</div>
</div>
📢📢📢📢📢📢
💗 你正在阅读 【梦想橡皮擦】 的博客
👍 阅读完毕，可以点点小手赞一下
🌻 发现错误，直接评论区中指正吧
📆 橡皮擦的第 795 篇原创博客
- 点赞
- 收藏
- 关注作者
评论（0）