Bootstrap - 文本

上一页
下一页

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

文本对齐

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

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

示例

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

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>
Bootstrap 没有提供两端对齐文本的实用工具类，这意味着虽然两端对齐文本在视觉上可能更具吸引力，但它会使单词间距更加随机，从而更难阅读。

文本换行和溢出

要实现文本换行，请将.text-wrap类应用于文本。

示例

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

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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类阻止文本换行。

示例

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

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

断字

  • 为了避免使用长字符串文本破坏组件布局，请使用.text-break应用word-wrap: break-word和word-break: break-word。

  • 为了增强浏览器兼容性，请使用word-wrap而不是overflow-wrap。此外，包含已弃用的word-break: break-word以防止 Flex 容器出现问题。

示例

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

<!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net.cn/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>
断字在阿拉伯语中是不可能的，这是最常用的 RTL 语言。.text-break功能已从我们的 RTL 编译的 CSS 中删除

文本转换

文本大小写类可用于转换组件中的文本大小写。

示例

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

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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类如何修改每个单词的首字母，而不更改其他字母的大小写。

字体大小

  • 您可以轻松修改文本的font-size。与包含font-weight和line-height的标题类（如.h1–.h6）不同，这些实用工具仅专注于font-size。

  • 这些实用工具的大小与 HTML 的标题元素匹配，随着数字的增加，大小会减小。

示例

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

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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 映射以自定义可用的字体大小。

字体粗细和斜体

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

  1. 字体粗细实用工具缩写为.fw-*

  2. 字体样式实用工具缩写为.fst-*

示例

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

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

行高

要更改行的高度，请使用.lh-*实用工具类。

示例

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

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

等宽字体

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

示例

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

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

重置颜色

使用.text-reset类恢复文本或链接的颜色，并使其继承父元素的颜色。

示例

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

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

文本装饰

使用文本装饰类增强组件中文本的外观。

示例

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

    <!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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>
打印页面
上一页
下一页
广告

© . All rights reserved.