Bootstrap 简明教程

Bootstrap - Text

本章将讨论有关常见的 Bootstrap 文本实用程序的内容。您可以使用 Bootstrap 实用程序类来自定义文本对齐、粗细、行高、换行、字体大小和其他格式选项。

Text alignment

文本对齐类提供了将文本对齐到不同组件的便捷方式。这些类包括响应选项，这些选项使用与网格系统相同的视口宽度断点将文本对齐到开始、结束或中心位置。

Note: 请调整浏览器大小，以查看文本相对于特定视口的对齐方式。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <p class="text-start text-info">Text aligned at starting position across all viewports sizes.</p>
        <p class="text-center text-danger">Text aligned at center position across all viewports sizes.</p>
        <p class="text-end text-warning">Text aligned at end position across all viewports sizes.</p>

        <p class="text-sm-start text-primary">Text aligned at start on viewports sized SM (small) or wider.</p>
        <p class="text-md-start text-primary">Text aligned at start on viewports sized MD (medium) or wider.</p>
        <p class="text-lg-start text-primary">Text aligned at start on viewports sized LG (large) or wider.</p>
        <p class="text-xl-start text-primary">Text aligned at start on viewports sized XL (extra-large) or wider.</p>
    </body>
    </html>

Text wrapping and overflow

要实现文本包装，请将 .text-wrap 类应用到文本中。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="badge bg-warning text-wrap" style="width: 8rem;">
        This sentence should be wrapped.
      </div>
    </body>
    </html>

您可以通过使用 .text-nowrap 类来阻止文本换行。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
        This sentence should overflow the parent.
      </div>
    </body>
    </html>

Word break

为避免用过长的文本串打断组件布局，可使用 .text-break 来应用 word-wrap: break-word 和 word-break: break-word 。
为了提升浏览器兼容性，请使用 word-wrap 代替 overflow-wrap 。另外，包含已弃用的 word-break: break-word 以防止柔性容器出现问题。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Text</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <p class="text-break text-primary">TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
</body>
</html>

Text transform

可以利用文本大小写类来转换组件中的文本大小写。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p class="text-lowercase text-danger">This is a lower case text.</p>
      <p class="text-uppercase text-info"> This is a upper case text.</p>
      <p class="text-capitalize text-warning">This is a capitalized text.</p>
    </body>
    </html>

请注意 .text-capitalize 类如何修改每个单词的第一个字母，而不改变其他字母的大小写。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p class="fs-1 text-info">This is a text of .fs-1 font size.</p>
      <p class="fs-2 text-info">This is a text of .fs-2 font size.</p>
      <p class="fs-3 text-info">This is a text of .fs-3 font size.</p>
      <p class="fs-4 text-info">This is a text of .fs-4 font size.</p>
      <p class="fs-5 text-info">This is a text of .fs-5 font size.</p>
      <p class="fs-6 text-info">This is a text of .fs-6 font size.</p>
    </body>
    </html>

修改 $font-sizes Sass 映射以自定义可用的字体大小。

Font weight and italics

使用以下工具来更改文本的字体粗细或字体样式：

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p class="fw-bold text-primary">This is a bold text.</p>
      <p class="fw-bolder text-primary">This is a bolder weight text (relative to the parent element).</p>
      <p class="fw-semibold text-primary">This is a semibold weight text.</p>
      <p class="fw-medium text-secodary">This is a medium weight text.</p>
      <p class="fw-normal text-secodary">This is a normal weight text.</p>
      <p class="fw-light text-secodary">This is a light weight text.</p>
      <p class="fw-lighter text-danger">This is a lighter weight text (relative to the parent element).</p>
      <p class="fst-italic text-danger">This is a italic text.</p>
      <p class="fst-normal text-danger">This is a text with normal font style.</p>
    </body>
    </html>

Line height

要更改行高，请使用 .lh- * 实用程序类。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p class="lh-1 text-primary">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p>
      <p class="lh-sm text-secondary">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p>
      <p class="lh-base text-warning">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p>
      <p class="lh-lg text-info">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p>
    </body>
    </html>

Monospace

使用 .font-monospace 类，将选中的文本转换成等宽字体堆栈。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p class="font-monospace text-primary">Text in monospace font.</p>
    </body>
    </html>

Reset color

使用 .text-reset 类还原文本或链接的颜色，并允许它从父组件中继承颜色。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p class="text-body-danger">
        There is a <a href="#" class="text-reset">reset link</a> in this muted text.
      </p>
      <p class="text-body-secondary">
        There is a <a href="#">reset link without text-reset class</a> in this muted text.
      </p>
    </body>
    </html>

Text decoration

使用文本修饰类来提升组件中文本的外观。

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p class="text-decoration-underline text-danger">There is a line underneath in this paragraph.</p>
      <p class="text-decoration-line-through text-danger">A line runs through this text.</p>
      <a href="#" class="text-decoration-none">There is no text decoration on this link.</a>
    </body>
    </html>

Bootstrap 简明教程

Bootstrap - Text

Text alignment

Example

Text wrapping and overflow

Example

Example

Word break

Example

Text transform

Example

Font size

Example

Font weight and italics

Example

Line height

Example

Monospace

Example

Reset color

Example

Text decoration

Example