本文概述
排版提供了一些实用程序,可为文本添加其他样式。
这些实用程序是:
- 文字对齐
- 文字转换
- 字体粗细和斜体
文字对齐
文本对齐用于通过文本对齐类轻松地将文本重新对齐到组件。
句法:
左对齐文本:
<p class="text-left">Left aligned text.</p>
对齐文字中心:
<p class="text-center">Center aligned text.</p>
右对齐文本:
<p class="text-right">Right aligned text.</p>
对齐文本对齐:
<p class="text-justify">Justified text.</p>
对齐文本不换行:
<p class="text-nowrap">No wrap text.</p>
你还可以根据其大小在视口上对齐文本。
大小为SM(较小)或较大的视口上的左对齐文本。
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
在视口大小为MD(中)或更宽的视口上左对齐文本。
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
在大小为LG(大)或更宽的视口上左对齐文本。
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
大小为XL(超大)或更大的视口上的左对齐文本。
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
文字转换
文本大写类用于在组件中转换文本。
对于小写文本:
使用“ text-lowercase”类使文本以小写形式显示。
句法:
<p class="text-lowercase">Lowercased text.</p>
输出:
lowercased text.
对于大写文本:
使用“ text-uppercase”类使文本以大写形式显示。
句法:
<p class="text-uppercase">Uppercased text.</p>
输出:
UPPERCASED TEXT.
大写字母:
使用“文本大写”类使文本的第一个字母大写。
句法:
<p class="text-capitalize">CapiTaliZed text.</p>
输出:
CapiTaliZed Text.
字体粗细和斜体
它用于快速更改文本的粗细(粗体)或斜体文本。
对于粗体文本:
使用“ font-weight-bold”类将文本粗体设置为粗体。
句法:
<p class="font-weight-bold">Bold text.</p>
输出:
Bold text.
对于普通重量文本:
使用“ font-weight-normal”类使文本正常粗细。
句法:
<p class="font-weight-normal">Normal weight text.</p>
输出:
Normal weight text.
对于斜体文字:
使用“ font-italic”类使文本变为斜体。
句法:
<p class="font-italic">Italic text.</p>