一、文本对齐方式

二、文本换行和溢出

三、文本转换

四、文本大小

五、字体粗细及斜体

六、行高(行距)

七、重置链接颜色

一、文本对齐方式

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

左侧对齐 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>

效果图如下：

Bootstrap5 文字排版讲解相关推荐

03Bootstrap5文字排版
03Bootstrap5文字排版 <!DOCTYPE html> <html lang="zh-CN"> <head><meta char ...
Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...
网页UI设计基础之线框图设计（栅格建立、基础布局、分屏、文字排版）
线框图介绍概念线框图(Wireframe或Wireframing) 网站线框图是网站框架的草图,是网站设计师根据网页设计标准将客户需求图形化的一种展现形式. 例如: 特点作为一个视觉设计的起点, ...
dev c++自动排版_再也不头疼文字排版了
前言在办公时,我们经常会需要用到Word,经常需要到网上查找一些资料然后整理排版,如果想提高文字排版.整理的效率.那么小编给你推荐Gidot Typesetter 这款非常好用的排版软件. Word ...
(转)iOS7界面设计规范(10) - UI基础 - 文字排版与配色
明天就是周四了.貌似前几天还在恨周一呢.话说今天几乎开了一整天的会,正经事情没做多少:这种感觉比一整天从早到晚12个小时的忙碌于一件事情还要让人感到疲惫的对叭?那今天的iOS7设计规范更新又是一篇很简 ...
css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
python 图像处理与识别书籍_Python图像处理之识别图像中的文字(实例讲解)
①安装PIL:pip install Pillow(之前的博客中有写过) ②安装pytesser3:pip install pytesser3 ③安装pytesseract:pip install p ...
iOS UIlabel文字排版（改变字间距行间距）分类
在iOS开发中经常会用到UIlabel来展示一些文字性的内容,但是默认的文字排版会觉得有些挤,为了更美观也更易于阅读我们可以通过某些方法将UIlabel的行间距和字间距按照需要调节. 比如一个Labe ...
python去除图片上的文字_Python图像处理之识别图像中的文字(实例讲解)
①安装PIL:pip install Pillow(之前的博客中有写过) ②安装pytesser3:pip install pytesser3 ③安装pytesseract:pip install p ...

Bootstrap5 文字排版讲解

一、文本对齐方式

二、文本换行和溢出

三、文本转换

四、文本大小

五、字体粗细及斜体

六、行高(行距)

七、重置链接颜色

Bootstrap5 文字排版讲解相关推荐

最新文章

热门文章