爬虫训练场基础铺垫，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>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">链接 1</a></li>
            <li><a class="dropdown-item" href="#">链接 2</a></li>
            <li><h5 class="dropdown-header">分组标题</h5></li>

            <li>
                <hr class="dropdown-divider"></hr>
            </li>
            <li><a class="dropdown-item" href="#">链接 3</a></li>
        </ul>
    </div>

如果希望下拉菜单是向上展开，请修改 dropdown 为 dropup。

📢📢📢📢📢📢
💗 你正在阅读 【梦想橡皮擦】 的博客
👍 阅读完毕，可以点点小手赞一下
🌻 发现错误，直接评论区中指正吧
📆 橡皮擦的第 798 篇原创博客