因为需要写前端，为了省事还是用的网上现成的框架

参考： 菜鸟教程

容器

有两个容器类，分别是.container和.container-fluid

.container类用于创建固定宽度的响应式页面，宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。

而.container-fluid类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width 始终为 100%）。

响应式容器

可以使用.container-sm|md|lg|xl类：

网格系统

Bootstrap的网格系统是响应式的，列会根据屏幕大小重新排列。最多分为12列。

有以下6种类:

可以看出Bootstrap网格系统的类的命名方式如下：.col-*-*，第一个*表示显示器尺寸，可以用来设置响应式规则，第二个表示这个列的宽度，为1-12的数字，每一行的数字相加为12，或小于12（如果下一个加上就超了的话）。两个参数都可以缺省。

比如 col-md-4 表示中等屏幕及以上占4格，而col-4代表任何未指定的屏幕上都占4格；若没有不带前缀（如-md）的class，则未指定的屏幕上自动呈现100%；若使用不带数字的class，则代表均分当前行的剩余空间。

这些不同的前缀可以组合使用，来规定不同屏幕大小以上的布局。如：

<div class="row g-3">
      {% for r in resources %}
        <div class="col-12 col-md-6 col-lg-4">
          {% include "resource_card.html" with r=r %}
        </div>
      {% endfor %}
 </div>

文字排版

默认设置是：font-size 为 16px, line-height 为 1.5。所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

通过元素<small>可以创建字号稍微小且颜色稍微浅的文本，可以用在h或者p里面。

颜色

文本颜色：有一些有代表意义的颜色类，比如：

<div class="container">
  <h2>代表指定意义的文本颜色</h2>
  <p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">执行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危险操作文本。</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-body">默认颜色，为黑色。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>

可以再加一个参数，表示文本颜色透明度，比如.text-black-50，表示透明度50%

信息提示框

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现。

<div class="alert alert-success">
  <strong>成功!</strong> 指定操作成功提示信息。
</div>

如果想要加上关闭提示框代码，可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="btn-close" 和 data-bs-dismiss="alert" 类来设置提示框的关闭操作。

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>成功!</strong> 指定操作成功提示信息。
</div>

.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：

<div class="alert alert-danger alert-dismissible fade show">

按钮

<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

徽章

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 元素上即可。 徽章可以根据父元素的大小的变化而变化。

<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危险</span>
<span class="badge bg-warning">警告</span>
<span class="badge bg-info">信息</span>
<span class="badge bg-light">浅色</span>
<span class="badge bg-dark">深色</span>

分页