Bootstrap5 文字排版讲解

酷盖带你玩前端

已于 2022-05-23 01:30:24 修改

阅读量5.3k

点赞数 25

分类专栏： Bootstrap5 文章标签：前端 bootstrap 前端框架

于 2022-05-23 01:29:51 首次发布

本文链接：https://blog.csdn.net/qq_65552364/article/details/124918596

版权

Bootstrap5 专栏收录该内容

6 篇文章 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>

二、文本换行和溢出

通过类名（ .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>

效果如下图：

三、文本转换

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

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

效果图如下：

四、文本大小

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

效果图如下：

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

五、字体粗细及斜体

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

效果图如下：

六、行高(行距)

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

效果图如下：

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

七、重置链接颜色

‎使用类（ .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>

效果图如下：