Bootstrap 排版



Bootstrap 排版

Bootstrap 排版

Bootstrap 排版提供了一些实用程序,可为文本添加其他样式。
这些实用程序是:

文本对齐
文本转换
字体粗细和斜体

文本对齐方式

文本对齐方式用于轻松地将文本重新对齐到具有文本对齐方式类的组件。
语法:

左对齐文本:

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

大写字母文本:

使用" text-capitalize"类使文本的首字母大写。
语法:
<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.

用于斜体文本:

使用"字体斜体"类将文本设置为斜体。
语法:
<p class="font-italic">Italic text.</p>