目录
一、文本对齐方式
二、文本换行和溢出
三、文本转换
四、文本大小
五、字体粗细及斜体
六、行高(行距)
七、重置链接颜色
一、文本对齐方式
使用文本对齐类能够轻松地将文本重新对齐到组件。对于左侧、居中和右侧对齐,同时也可以搭配断点实现响应式布局
- 左侧对齐 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 文字排版讲解
发布评论