【Bootstrap5】Bootstrap5学习笔记

目的

学完Blazor以后，我自己用这个写了一个小工具，但是我发现自己对前端粗浅的认知确实很难把UI层的组件弄出我想要的样子，所以我思来想去决定再把前端知识补一补.记录基于菜鸟教程的Bootstrap5教程，然后有些不清楚的我还补充一些AI说的知识。

容器

Bootstrap需要一个容器来放网站的内容

.container 类是默认的容器，提供一个固定宽度的布局，如果改变浏览器的窗体尺寸大小，它会跟着变
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

容器在默认情况下是会填充左右边距的，但是顶部和底部没有，Bootstrap给定义了一些固定的填充尺寸。

<div class="container pt-5"></div>

.pt-5 是一个顶部内边距（padding-top）工具类
这里的pt-5的含义是
p 表示 padding（内边距）。
t 表示 top（顶部）。
5 是尺寸级别，对应 Bootstrap 预设的 3rem（约 48px）的间距值
加了这句话之后，容器就存在顶部内边距了，否则内容会贴紧容器顶部

Bootstrap 的间距工具类规则
Bootstrap 提供了一套统一的间距工具类，规则如下：
方向：t（top）、b（bottom）、x（水平方向）、y（垂直方向）。
尺寸：0（0px）、1（0.25rem）、2（0.5rem）、3（1rem）、4（1.5rem）、5（3rem）

这里再引出常见单位的换算
pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。
px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。
em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
rem是CSS3新增的一个相对单位（root em，根em），它是相对大小，但相对的只是HTML根元素

容器的边框和颜色也是可以被修改的

<div class="container p-5 my-5 border"></div>
 
<div class="container p-5 my-5 bg-dark text-white"></div>
 
<div class="container p-5 my-5 bg-primary text-white"></div>

这里的my-5:
一个间距工具类，用于控制元素的垂直方向外边距（margin）。具体含义如下：
m：表示外边距（margin）。
y：表示垂直方向（Y 轴），即同时作用于元素的顶部（margin-top）和底部（margin-bottom）。
5：表示间距的大小级别，Bootstrap 预设了 0-5 六个等级，数值越大间距越大。
因此，my-5 的实际效果是：为元素的上下两侧添加较大的外边距。

具体数值
在 Bootstrap 中，5 对应 3rem 的间距（1rem = 16px，即 3rem ≈ 48px）。不同数值对应的尺寸如下：

等级	0	1	2	3	4	5
尺寸	0	0.25rem	0.5rem	1rem	1.5rem	3rem

类似的工具类有
水平方向外边距：mx-（作用于左右两侧）。
单侧外边距：mt-（顶部）、mb-（底部）、ms-（左）、me-*（右）。
内边距：将 m 替换为 p（如 py-5 表示上下内边距）

响应式容器
Bootstrap 的 .container-sm|md|lg|xl 是响应式容器类，其核心差异在于不同屏幕尺寸下的最大宽度（max-width）和断点生效范围。以下是具体差异说明：

.container-sm：移动端优先的页面，在小屏设备上限制内容宽度。
.container-md：混合布局，允许平板设备保持全宽，桌面端固定宽度。
.container-xl：专为超宽屏幕优化，避免内容过度拉伸。
.
container-sm：从 sm 断点（≥576px）开始应用固定宽度，适用于需要在小屏设备上限制宽度的场景。
.container-md：从 md 断点（≥768px）开始生效，适用于中等屏幕（如平板）。
.container-lg：从 lg 断点（≥992px）生效，适合大屏桌面设备。
.container-xl：仅从 xl 断点（≥1200px）应用固定宽度，针对超大屏幕设计。
未达到断点时
所有容器类在未达到对应断点前，默认保持 100% 宽度（即与 .container-fluid 行为一致）。

在这里插入图片描述

网格系统

系统会自动分为最多 12 列，会根据屏幕大小自动重新排列。请确保每一行中列的总和等于或小于 12。
遵守的规则如下:

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
使用行来创建水平的列组。
内容需要放置在列中，并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
列通过填充创建列内容之间的间隙。这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
Bootstrap 5 和 Bootstrap 4 使用 flexbox（弹性盒子）而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列

在这里插入图片描述

<div class="row border">
  <div class="col-*-* border">11</div>
</div>
<div class="row border">
  <div class="col-*-* border">22</div>
  <div class="col-*-* border">33</div>
  <div class="col-*-* border">44</div>
</div>
 
<!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->
<div class="row border">
  <div class="col border">55</div>
  <div class="col border">66</div>
  <div class="col border">77</div>
</div>

第一个div，这里(-)的意思是，单列布局：无论屏幕大小，独占一行
第二个div，这里会让系统根据屏幕大小自动推断渲染行为
第三个div，系统会按照3列等宽的方式渲染

网格系统可以支持同时把几种屏幕的适配都写进去

<div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark text-white">.col</div>
</div>

网格系统也可以实现拆分单元格的效果

<div class="row">
  <div class="col-8">
    .col-8
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
  <div class="col-4">.col-4</div>
</div>

在这里插入图片描述
网格系统也可以支持偏移

偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

但是需要注意在嵌套的时候，会将父容器的宽度重新划分为新的 12 列，例如，父容器 col-md-8 占据外层的 8/12 列后，其内部嵌套的 row 会重新分配这 8 列的宽度为新的 12 列。
偏移计算需基于新划分的 12 列：子列 col-md-4 的宽度为 4/12（即占父容器宽度的 1/3），而 col-md-offset-2 表示向右偏移 2/12（即父容器宽度的 1/6）。总占用逻辑列数为 4 + 2 = 6，未超过 12，因此逻辑空间足够

<div class="col-md-8">   
<div class="row">    
 <div class="col-md-4 col-md-offset-2">嵌套偏移列</div>   
 </div> 
 </div>

父容器的实际宽度需能容纳“偏移后的子列”：即使逻辑列数未超限，仍需考虑父容器的实际渲染宽度是否足够；若父容器宽度较小（如手机端），子列偏移可能导致内容溢出48。间隙（Gutter）占用额外空间：Bootstrap 默认列之间有 30px 间隙（左右各 15px），偏移会增加边距，可能压缩内容区域；偏移类仅在特定断点生效。例如 col-md-offset-2 仅在中等屏幕（≥992px）生效，若父容器在更小屏幕下（如平板）宽度不足，偏移可能失效，导致布局堆叠

文字排版

这一讲还是比较容易理解的
就简单过一下
h1和h6是标题，可以直接写，也可以通过class=""的方式给

修改排版
display-1~6这个是控制标题类[h1-h6]的样式的
small标签是创建字体更小，颜色更浅的文本，控制标题类[h1-h6]的样式
mark标签是让

具备黄色背景及有一定的内边距
abbr标签是让

的样式为显示在文本底部的一条虚线边框，具备鼠标悬停显示一段提示词的样式，提示词是通过title值赋值实现的

<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

blockquote标签是用于引用文本的样式，其中还包含footer，也就是脚注的样式。
dl，dd，dt标签是用于列表和列表项的样式,看下显示效果

<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

在这里插入图片描述
code标签是代码高亮的作用，也是对

标签修饰的
kbd标签是【快捷键】标签的作用，也是对

标签修饰的
pre标签的作用是对应的文本的换行和空格会保留渲染，不会删掉

颜色

bootstrap的颜色系统就是靠定义好的标签做的，直接给class赋值，前缀是text-
在这里插入图片描述
文本颜色透明度也可以修改

<p class="text-black-50">透明度为 50% 的黑色文本，背景为白色。</p>

不仅文本可以改，链接也可以改字体颜色，前缀是text-
在这里插入图片描述
字体的背景颜色也可以改，也是通过class赋值的方式,前缀是bg-