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.

大写字母:

使用“文本大写”类使文本的第一个字母大写。

句法:

<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>
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?