【Bootstrap学习 day3】

文本大小
Bootstrap5默认字体初始大小为16px
在Bootstrap5中奖文本大小分为了六类，分别对应标题的h1-h6
添加类名.fs-*或添加类名h *（*号为1-6的数值）

<p class="fs-1">这是一个段落fs-1</p>
<p class="fs-2">这是一个段落fs-2</p>
<p class="fs-3">这是一个段落fs-3</p>
<p class="fs-4">这是一个段落fs-4</p>
<p class="fs-5">这是一个段落fs-5</p>
<p class="fs-6">这是一个段落fs-6</p>

字体粗细及斜体
在Bootstrap5中将字体的粗细分为了5类

<p class="fw-bold">粗体文字</p>
<p class="fw-bolder">粗体文字（相对于父元素）</p>
<p class="fw-normal">正常的文本</p>
<p class="fw-light">细体文本</p>
<p class="fw-lighter">细体文本（相对于父元素）</p>
<p class="fst-italic">斜体</p>
<p class="fst-normal">取消斜体</p>

行高行距
bootstrap5默认字体初始行高为1.5，共包含4中行高.lh-1(1rem)，.lh-sm（1.25rem），lh-base（1.5rem），.lh-lg（2rem）

颜色
bootstrap5提供了一些有代表意义的颜色类：

<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>

可以设置文本颜色透明度为50%，使用.text-black-50或.text-white-50类

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

背景颜色类
与上下文颜色类似，可以使用上下文背景颜色类来设置background-color元素，以对它们施加额外的强调。

<p class="bg-primary text-white">重要的背景颜色.</p>
<p class="bg-success text-white">执行成功背景颜色。</p>
<p class="bg-info text-white">信息提示背景颜色.</p>
<p class="bg-warning text-white">警告背景颜色.</p>
<p class="bg-danger text-white">危险背景颜色.</p>
<p class="bg-secondary text-white">副标题背景颜色.</p>
<p class="bg-dark text-white">深灰背景颜色。</p>
<p class="bg-light text-dark">浅灰色背景颜色.</p>