【Bootstrap学习 day3】

2023-12-29 16:28:37

文本大小
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>

文章来源:https://blog.csdn.net/weixin_44032244/article/details/135286045
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。