爬虫训练场基础铺垫，BT加载器，分页，列表组，卡片，下拉菜单一文掌握
Posted 梦想橡皮擦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了爬虫训练场基础铺垫，BT加载器，分页，列表组，卡片，下拉菜单一文掌握相关的知识，希望对你有一定的参考价值。
爬虫训练场基础铺垫目录
本篇博客为大家继续补充，爬虫训练场这一项目需要的 Bootstrap 基础知识，其内容设计加载器，分页，列表组，卡片，下拉菜单。
Bootstrap 5 加载器
Bootstrap 5 提供了加载器（spinner）组件，可以用来在页面上显示加载进度。
在 Bootstrap 中，加载器是使用 .spinner-border 类来创建的。例如，下面是一个简单的加载器代码示例：
<div class="spinner-border" role="status"></div>
同样，也可以给其添加颜色。
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
如果希望加载器换个效果，可以使用 .spinner-grow 类实现。
加载器的大小依旧是使用 .spinner-border-sm 和 .spinner-grow-sm 。
由于我们已经学习了按钮，所以可以想按钮添加加载器，代码如下。
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
Bootstrap 5 分页组件
Bootstrap 5 提供了分页（pagination）组件，可以用来在网站或应用中实现分页功能。
在 Bootstrap 中，分页组件是使用 .pagination 类来创建的。你可以在分页组件中使用 .page-item 和 .page-link 类来创建分页按钮。例如，下面是一个简单的分页组件代码示例：
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>
</nav>
这将会创建一个包含五个分页按钮的分页组件，其中第一个和最后一个按钮分别为 "上一页" 和 "下一页"。
激活按钮状态，使用 .active 类设置。
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link " href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>
</nav>
除此之外，学习分页之后，还可以掌握另一种形式，面包屑样式。
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">列表</a></li>
<li class="breadcrumb-item"><a href="#">详情页</a></li>
<li class="breadcrumb-item active">梦想橡皮擦</li>
</ul>
Bootstrap 5 列表组
Bootstrap 5 提供了列表组（list group）组件，可以用来在网站或应用中创建列表。
在 Bootstrap 中，列表组是使用 .list-group 类来创建的。你可以在列表组中使用 .list-group-item 类来创建列表项。例如，下面是一个简单的列表组代码示例：
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
这将会创建一个包含三个列表项的列表组。
你可以使用 Bootstrap 提供的不同的颜色类来改变列表项的颜色。例如，如果你想让列表项为蓝色，可以使用 .list-group-item-primary 类：
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Item 1</li>
<li class="list-group-item list-group-item-primary">Item 2</li>
<li class="list-group-item list-group-item-primary">Item 3</li>
</ul>
使用 .active 类突出显示当前项目：
<ul class="list-group pt-2 pb-5">
<li class="list-group-item list-group-item-primary active">Item 1</li>
<li class="list-group-item list-group-item-primary">Item 2</li>
<li class="list-group-item list-group-item-primary">Item 3</li>
</ul>
如果希望项目可以被点击，请使用 div 替代 ul，使用 a 替代 li，得到下述内容。
<div class="list-group pb-5">
<a href="#" class="list-group-item list-group-item-action">第一项</a>
<a href="#" class="list-group-item list-group-item-action">第二项</a>
<a href="#" class="list-group-item list-group-item-action">第三项</a>
</div>
使用 .list-group-numbered 类创建前面带有数字的列表项，使用 .list-group-flush 类删除边框和圆角，使用 .list-group-horizontal 可以将垂直列表组，转换为水平列表组。
<ul class="list-group list-group-horizontal">
<li class="list-group-item">博客</li>
<li class="list-group-item">论坛</li>
<li class="list-group-item">下载</li>
<li class="list-group-item">商城</li>
</ul>
将徽章 badge 类于列表组结合起来，可以实现下图效果。
<ul class="list-group list-group-horizontal pb-5">
<li class="list-group-item">
博客<span class="badge bg-danger rounded-pill">12</span>
</li>
<li class="list-group-item">论坛</li>
<li class="list-group-item">下载</li>
<li class="list-group-item">商城</li>
</ul>
Bootstrap 5 卡片
终于迎来了 爬虫训练场项目 出场率最高的一个组件，卡片。
Bootstrap 5 提供了卡片（card）组件，可以用来在网站或应用中创建卡片布局。
在 Bootstrap 中，卡片是使用 .card 类来创建的。你可以在卡片中使用 .card-body、.card-title 和 .card-text 等类来设置卡片的内容。例如，下面是一个简单的卡片代码示例：
<div class="card" style="width: 18rem;">
<img src="/static/images/sucai.png" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">第一个爬虫项目</h5>
<p class="card-text">最普通的爬虫，点击进入是一些学校清单展示</p>
<a href="#" class="btn btn-primary">点击进入</a>
</div>
</div>
基础的卡片
使用 .card 类包裹一个 .card-body 类就可以实现一个基础卡片。
<div class="card">
<div class="card-body">基础的卡片</div>
</div>
然后可以使用 .card-header 类为卡片添加标题，.card-footer 类为卡片添加页脚。
<div class="card">
<div class="card-header">页眉</div>
<div class="card-body">内容</div>
<div class="card-footer">页脚</div>
</div>
使用 .card-title 将卡片标题添加到任意标题元素， .card-text 类用于添加普通段落内容。
如果希望在卡片中添加图片，可以对 <img> 标签添加 .card-img-top 或 .card-img-bottom ，可将图像放置在卡片的顶部或底部。
Bootstrap 5 下拉列表
Bootstrap 5 提供了下拉列表（dropdown）组件，可以用来在网站或应用中创建下拉菜单。
在 Bootstrap 中，下拉列表是使用 .dropdown 类来创建的。你可以在下拉列表中使用 .dropdown-menu 类来创建菜单项，使用 .dropdown-item 类来创建菜单项。例如，下面是一个简单的下拉列表代码示例：
<div class="dropdown">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
>
下拉按钮
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</div>
在上述代码中，可以添加 <li><hr class="dropdown-divider"></hr></li> 增加一个分割线。使用 .dropdown-header 类可以在下拉菜单中添加标题。
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
下拉按钮
</button>
以上是关于爬虫训练场基础铺垫，BT加载器，分页，列表组，卡片，下拉菜单一文掌握的主要内容，如果未能解决你的问题，请参考以下文章
9. 爬虫训练场，分页爬虫案例设计Demo，打通 Python Flask 和 MySQL