Bootstrap5 文本排版详细讲解

r囧r小猫 2023-10-14 13:18 10阅读 0赞

# 1.文本对齐方式 #

*  使用文本对齐类能够轻松地将文本重新对齐到组件。
 *  对于左侧、居中和右侧对齐，同时也可以搭配断点实现响应式布局

左侧对齐 `text-start`  
居中对齐 `text-center`  
右侧对齐 `text-end`

<div class="container mt-3">
    	<p class="text-start">在所有视口大小上左侧对齐的文本。</p>
    	<p class="text-center">在所有视口大小上居中对齐的文本</p>
    	<p class="text-end">在所有视口大小上右侧对齐的文本。</p>
     
    	<p class="text-sm-center">在大小为 SM（小）或更宽的视口上开始对齐文本</p>
    	<p class="text-md-center">在大小为 MD（中）或更宽的视口上开始对齐文本</p>
    	<p class="text-lg-center">在大小为 LG（大）或更宽的视口上开始对齐文本</p>
    	<p class="text-xl-center">在大小为 XL（超大）或更宽的视口上开始对齐文本</p>
    </div>

![在这里插入图片描述][054b01548258435aa6f93d9e1e483d32.png]

# 2.文本换行和溢出 #

通过类名`（ .text-wrap ）`可以设置文字在超过盒子宽度时自动换行

通过类名`（ .text-nowrap ）`可以阻止文字的换行，此时文字会溢出盒子

<div class="container mt-3 bg-dark">
    	<div class="badge bg-primary text-wrap text-center fs-6" 
    style="width: 6rem; height: 6rem;">
      		该文本在超过盒子宽度后会自动换行
    	</div>
    	<div class="badge text-nowrap bg-primary fs-6" 
    style="width: 8rem; height: 8rem;">
      		该文本长度超过盒子宽度会溢出
    	</div>
    </div>

效果如下图：

![在这里插入图片描述][002c41ddef6d4eb8ba602f68b6e33f0f.png]

# 3.文本转换 #

通过类名修改组件内字母的大小写

.text-lowercase   将该组件内所有的字母修改为小写
    .text-uppercase   将该组件内所有的字母修改为大写
    .text-capitalize     将该组件内所有单词的首字母修改为大写，而不影响其他字母的大小写
    <div class="container mt-3 fs-3">
    	<p class="text-lowercase">Lowercased text.</p>
    	<p class="text-uppercase">Uppercased text.</p>
    	<p class="text-capitalize">capiTaliZed text.</p>
    </div>

效果图如下：

![在这里插入图片描述][8587a6b1d9ca4102bf39e6d83f5dd7d9.png]

# 4.文本大小 #

在BootStrap5中将文本大小分为了六类，分别对应标题的h1~h6

写法：添加类名 .fs-\* 或 添加类名 h\* ( \*号为1~6的数值 )

<div class="container mt-3">
    	<p class="h1">h1 Bootstrap 标题</p>
    	<p class="h2">h2 Bootstrap 标题</p>
    	<p class="h3">h3 Bootstrap 标题</p>
    	<p class="h4">h4 Bootstrap 标题 </p>
    	<p class="h5">h5 Bootstrap 标题</p>
    	<p class="h6">h6 Bootstrap 标题</p>
    	
    	<h1>h1 Bootstrap 标题</h1> 
    	<h2>h2 Bootstrap 标题</h2>
    	<h3>h3 Bootstrap 标题</h3>
    	<h4>h4 Bootstrap 标题</h4>
    	<h5>h5 Bootstrap 标题</h5>
    	<h6>h6 Bootstrap 标题</h6>
    	
    	<p class="fs-1">h1 Bootstrap 标题</p>
    	<p class="fs-2">h2 Bootstrap 标题</p>
    	<p class="fs-3">h3 Bootstrap 标题</p>
    	<p class="fs-4">h4 Bootstrap 标题</p>
    	<p class="fs-5">h5 Bootstrap 标题</p>
    	<p class="fs-6">h6 Bootstrap 标题</p>
    </div>

效果图如下：  
![在这里插入图片描述][1690c7a07c9e45fdb71524da191c0c7f.png]

BootStrap5默认字体初始大小为16px

# 5.字体粗细及斜体 #

在BootStrap5中将字体的粗细分为了5类 .`fw-bolder(bolder) .fw-bold(700) .fw-normal(400) .fw-light(300) .fw-lighter(lighter)`

斜体 则是通过类名`（ .fst-italic ）`来控制 而通过类名`（ .fst-normal ）也可以取消斜体`

<div class="container mt-3">
    	<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>
    </div>

效果图如下：

![在这里插入图片描述][da2cc81d193c487fb0b7cf151369941b.png]

# 6.行高(行距) #

在BootStrap5中将行高分为了4种 `.lh-1(1rem) .lh-sm(1.25rem) .lh-base(1.5rem) .lh-lg(2rem)`

<div class="container mt-3">
    	<p class="lh-1">这是一个很长的段落，用来说明我们的实用程序如何影响元素的行高。类应用于元素本身，有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。</p>
    	<p class="lh-sm">这是一个很长的段落，用来说明我们的实用程序如何影响元素的行高。类应用于元素本身，有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。</p>
    	<p class="lh-base">这是一个很长的段落，用来说明我们的实用程序如何影响元素的行高。类应用于元素本身，有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。</p>
    	<p class="lh-lg">这是一个很长的段落，用来说明我们的实用程序如何影响元素的行高。类应用于元素本身，有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。</p>
    </div>

效果图如下：

![在这里插入图片描述][c9a18ad0714848749324efe1cf1b8065.png]

> BootStrap5默认字体初始行高为1.5（即 .ih-base） 1rem 为 16px

# 7.重置链接颜色 #

‎使用类`（ .text-reset ）`重置文本或链接的颜色，以便它从其父级继承颜色。‎

<div class="container mt-3">
    	<p class="text-muted">Muted text with a <a href="#">reset link</a></p>
    	<p class="text-muted"> Muted text with a <a href="#" class="text-reset">reset link</a></p>
    </div>

效果图如下：

![在这里插入图片描述][b8c0a9bb60634e3db997fc2c8400ae8c.png]

[参考][Link 1]

[054b01548258435aa6f93d9e1e483d32.png]: https://img-blog.csdnimg.cn/054b01548258435aa6f93d9e1e483d32.png
[002c41ddef6d4eb8ba602f68b6e33f0f.png]: https://img-blog.csdnimg.cn/002c41ddef6d4eb8ba602f68b6e33f0f.png
[8587a6b1d9ca4102bf39e6d83f5dd7d9.png]: https://img-blog.csdnimg.cn/8587a6b1d9ca4102bf39e6d83f5dd7d9.png
[1690c7a07c9e45fdb71524da191c0c7f.png]: https://img-blog.csdnimg.cn/1690c7a07c9e45fdb71524da191c0c7f.png
[da2cc81d193c487fb0b7cf151369941b.png]: https://img-blog.csdnimg.cn/da2cc81d193c487fb0b7cf151369941b.png
[c9a18ad0714848749324efe1cf1b8065.png]: https://img-blog.csdnimg.cn/c9a18ad0714848749324efe1cf1b8065.png
[b8c0a9bb60634e3db997fc2c8400ae8c.png]: https://img-blog.csdnimg.cn/b8c0a9bb60634e3db997fc2c8400ae8c.png
[Link 1]: https://blog.csdn.net/qq_65552364/article/details/124918596?ops_request_misc=&request_id=&biz_id=102&utm_term=Bootstrap%20fs&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-124918596.142%5Ev92%5Econtrol&spm=1018.2226.3001.4187