Bootstrap5 文字排版讲解

目录

一、文本对齐方式

二、文本换行和溢出

三、文本转换

四、文本大小

五、字体粗细及斜体

六、行高(行距)

七、重置链接颜色

---

一、文本对齐方式

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

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

	
在所有视口大小上左侧对齐的文本。
	
在所有视口大小上居中对齐的文本
	
在所有视口大小上右侧对齐的文本。

	
在大小为 SM（小）或更宽的视口上开始对齐文本
	
在大小为 MD（中）或更宽的视口上开始对齐文本
	
在大小为 LG（大）或更宽的视口上开始对齐文本
	
在大小为 XL（超大）或更宽的视口上开始对齐文本

---

二、文本换行和溢出

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

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

	

  		该文本在超过盒子宽度后会自动换行
	
	

  		该文本长度超过盒子宽度会溢出
	

效果如下图：

---

三、文本转换

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

• .text-lowercase   将该组件内所有的字母修改为小写
• .text-uppercase   将该组件内所有的字母修改为大写
• .text-capitalize     将该组件内所有单词的首字母修改为大写，而不影响其他字母的大小写

	
Lowercased text.
	
Uppercased text.
	
capiTaliZed text.

效果图如下：

---

 四、文本大小

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

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

	
h1 Bootstrap 标题
	
h2 Bootstrap 标题
	
h3 Bootstrap 标题
	
h4 Bootstrap 标题 
	
h5 Bootstrap 标题
	
h6 Bootstrap 标题
	
	
h1 Bootstrap 标题
 
	
h2 Bootstrap 标题
	
h3 Bootstrap 标题
	
h4 Bootstrap 标题
	
h5 Bootstrap 标题
	
h6 Bootstrap 标题
	
	
h1 Bootstrap 标题
	
h2 Bootstrap 标题
	
h3 Bootstrap 标题
	
h4 Bootstrap 标题
	
h5 Bootstrap 标题
	
h6 Bootstrap 标题

效果图如下：

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

---

五、字体粗细及斜体

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

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

	
粗体文本
	
粗体文本(相对于父元素)
	
正常的文本
	
细体文本.
	
细体文本(相对于父元素)
	
斜体
	
正常字体样式的文本 取消斜体

效果图如下：

---

六、行高(行距)

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

	
这是一个很长的段落，用来说明我们的实用程序如何影响元素的行高。类应用于元素本身，有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。
	
这是一个很长的段落，用来说明我们的实用程序如何影响元素的行高。类应用于元素本身，有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。
	
这是一个很长的段落，用来说明我们的实用程序如何影响元素的行高。类应用于元素本身，有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。
	
这是一个很长的段落，用来说明我们的实用程序如何影响元素的行高。类应用于元素本身，有时也应用于父元素。这些类可以根据需要使用我们的实用程序API进行定制。

效果图如下：

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

---

七、重置链接颜色

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

	
Muted text with a reset link
	
 Muted text with a reset link

效果图如下：

---