爬虫训练场项目，1小时掌握 Bootstrap 网格系统

最新推荐文章于 2024-10-11 01:58:42 发布

梦想橡皮擦

最新推荐文章于 2024-10-11 01:58:42 发布

阅读量1.5w

点赞数 4

分类专栏：【反爬虫】系列专栏文章标签：爬虫 bootstrap flask

梦想橡皮擦-独家版权，禁止转载

本文链接：https://blog.csdn.net/hihell/article/details/128387250

版权

【反爬虫】系列专栏专栏收录该内容

28 篇文章 ¥99.90 ¥299.90

订阅专栏

本文通过爬虫训练场项目的页面设计，引导读者学习Bootstrap5的安装使用和网格系统。讲解了如何利用Bootstrap5的CDN、HTML5声明、响应式容器及内边距属性，并详细介绍了网格系统的响应式列布局和嵌套列的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

项目设计图概览

爬虫训练场项目的基本呈现为方块布局，然后点击每个卡片可以进入待爬取目标页。通过设计软件对页面进行简单规划，草图如下。

爬虫训练场项目，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>

爬虫训练场项目，1小时掌握 Bootstrap 网格系统
如果对容器细节再进行学习，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-* 两个属性，在图片后，也对该属性进行了说明。

爬虫训练场项目，1小时掌握 Bootstrap 网格系统
使用 .bg-* 和 .text-* 属性，* 的取值如下所示，对应的颜色在代码后展示。

$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark
);

爬虫训练场项目，1小时掌握 Bootstrap 网格系统
.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 配置。
爬虫训练场项目，1小时掌握 Bootstrap 网格系统

<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 等属性即可完成任务，这里不再一一展示。
爬虫训练场项目，1小时掌握 Bootstrap 网格系统
实战的时候，可以不在每个 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>