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

举报
梦想橡皮擦 发表于 2023/02/22 16:45:07 2023/02/22
【摘要】 项目设计图概览爬虫训练场项目的基本呈现为方块布局,然后点击每个卡片可以进入待爬取目标页。通过设计软件对页面进行简单规划,草图如下。为了实现该效果,本篇博客会带着大家串一下 Bootstrap5 相关技术点,如果你需要本部分知识点,正好可以一起学起来。 Bootstrap 串讲 Bootstrap5 安装使用如果你的服务器带宽不足,建议使用 Bootstrap 的 CDN 地址提高访问速度,...

项目设计图概览

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

为了实现该效果,本篇博客会带着大家串一下 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>

其中第一个 * 表示设备,可选 smmdlgxlxxl 等内容,第二个 * 为一个数字,同一行相加等于 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>

拖动浏览器,可以看到页面布局的变化,如果希望继续调整,只需要适配 lgxl 等属性即可完成任务,这里不再一一展示。

实战的时候,可以不在每个 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 篇原创博客

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。