Bootstrap 简明教程

Bootstrap - Typography

本章将讨论 Bootstrap 提供的各种与版式相关的功能。版式是指使书面文字在显示时看起来清晰、有吸引力且赏心悦目的艺术。

Bootstrap Default / Global Settings

Bootstrap 的最新版本设置了显示、版式和链接样式的默认设置。以下是其中一些默认设置：

Bootstrap 会将默认 font-size 设置为 1rem，默认为 16px。
Bootstrap 将 line-height 设置为 1.5
对于通过 font-family 对每个设备和操作系统进行优化的文本渲染，可使用“本机字体叠加”。
$body-bg 变量应在 <body> 标记上设置背景颜色，而 #fff 默认为灰色。
可以通过变量 $link-color 设置全局链接颜色，并且仅在 :hover 上应用链接下划线。
若要对 <body> 标记应用基本版式，请使用 $font-family-base, $font-size-base, 和 $line-height-base. 等属性

必须在 rem 中设置 $font-size-base 。全局变量在 _variables.scss 中定义，而样式则在 _reboot.scss 中定义。

Headings

HTML 标题标记，即 <h1> 至 <h6> ，在 Bootstrap 中以以下方式设置样式：

Example

可以通过 Edit & Run 选项编辑并试着运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Typography - Headings </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>
    <h1>Heading 1 - h1</h1>
    <h2>Heading 2 - h2</h2>
    <h3>Heading 3 - h3</h3>
    <h4>Heading 4 - h4</h4>
    <h5>Heading 5 - h5</h5>
    <h6>Heading 6 - h6</h6>
 </body>
 </html>

.h1 至 .h6 类也在 Bootstrap 中可用，以便匹配标题字体样式，而无需使用关联的 HTML 元素。

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Typography - Headings Classes </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="h1">Class h1 - Heading 1</p>
    <p class="h2">Class h2 - Heading 2</p>
    <p class="h3">Class h3 - Heading 3</p>
    <p class="h4">Class h4 - Heading 4</p>
    <p class="h5">Class h5 - Heading 5</p>
    <p class="h6">Class h6 - Heading 6</p>
 </body>
</html>

Customizing Headings

Bootstrap 提供的实用程序类可用于自定标题。

Example

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

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Typography - Customizing Headings </title>
      <meta charset="UTF-8">
      <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>This is an example to show the customized heading.</p>
      <h4>
        Here the text will
      <small class="text-muted"> be customized through this class.</small>
      </h4>
   </body>
</html>

Display Headings

当标题需要以更大且自由的样式显示时，可以使用显示标题类。

Example

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

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Typography - Display Headings </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="display-1">Display 1 - Heading 1</p>
      <p class="display-2">Display 2 - Heading 2</p>
      <p class="display-3">Display 3 - Heading 3</p>
      <p class="display-4">Display 4 - Heading 4</p>
      <p class="display-5">Display 5 - Heading 5</p>
      <p class="display-6">Display 6 - Heading 6</p>
   </body>
</html>

Lead

.lead 类使段落脱颖而出。它为段落中的文本提供了更大的字体大小、更细粗细和更高的行高。

Example

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

<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Bootstrap Typography - Lead </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="lead">
       The class lead will make the paragraph look different from the regular paragraph. It looks “stand-out”.
     </p>
   </body>
</html>

Abbreviations

Bootstrap 设定 HTML 的 <abbr> 元素样式，缩写和首字母缩写词的完整形式在鼠标悬停时显示，并且文本在文本底部显示带点虚线。

对缩写使用 .initialism 类，以便获得略小花号的字体。

Example

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

<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Bootstrap Typography - Abbreviations </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><abbr title="Indian Space Research Organisation">ISRO</abbr></p>
     <p><abbr title="World Health Organisation" class="initialism">WHO</abbr></p>
   </body>
</html>

Blockquote

当需要将内容块作为引用添加到文档中时，将在 <blockquote> html 元素周围使用类 .blockquote 。例子如下：

Example

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

<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Bootstrap Typography - Blockquote </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>
     <h4>Example for blockquote</h4>
     <p>Refer the quote given below.</p>
       <blockquote class="blockquote">
         <p>An ounce of patience is worth more than a tonne of preaching</p>
       </blockquote>
   </body>
</html>

Naming a Source

Bootstrap 在 <footer> 元素内提供 .blockquote-footer 类以标识来源。 <cite> 标记用于包装源的名称。

Example

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

<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Bootstrap Typography - Naming Source </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>
     <h4>Example for Naming a Source</h4>
     <p>Refer the quote given below.</p>
       <blockquote class="blockquote">
         <p>An ounce of patience is worth more than a tonne of preaching</p>
         <footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer>
       </blockquote>
   </body>
</html>

Alignment

Bootstrap 提供了类来更改引用块的对齐方式，例如 .text-center 和 .text-right 。

Example

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

<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Bootstrap Typography - Blockquote Alignment </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>
     <h4>Example for alignment of blockquote</h4>
      <p>Refer the quote given below.</p>
        <blockquote class="blockquote text-center">
         <p>An ounce of patience is worth more than a tonne of preaching</p>
         <footer class="blockquote-footer">Written by someone <cite title="Very famous">Very famous</cite></footer>
        </blockquote>
    </body>
</html>

Inline Text Elements

Bootstrap 提供了可用于为文本设置样式的类，而不是使用常见的内联 HTML5 元素。请遵循以下示例：

.mark

Example

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

  <!DOCTYPE html>
  <html lang="en">
     <head>
        <title>Bootstrap Typography Inline Elements</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>
        <h4>Use of mark </h4>
        <p>Demonstrating use of mark tag to <mark> highlight </mark>  text.</p>
        <p class="mark">Demonstrating use of mark class to highlight text.</p>
     </body>
  </html>

.small

Example

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

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Typography Inline Elements</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>
      <h4>Use of small</h4>
      <p>Demonstrating use of <small> tag to make the text look fineprint.</p>
      <p class="small">Demonstrating use of small class to make the text look fineprint.</p>
    </body>
  </html>

.text-decoration-underline

Example

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

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Typography Inline Elements</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>
      <h4>Use of .text-decoration-underline</h4>
      <p>Demonstrating use of <u> tag to make the text underlined.</p>
      <p class="text-decoration-underline">Demonstrating use of text-decoration-underline class to make the text underlined.</p>
    </body>
  </html>

.text-decoration-line-through

Example

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

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Typography Inline Elements</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>
      <h4>Use of .text-decoration-line-through</h4>
      <p>Demonstrating use of s tag to treat the text as no longer accurate.</p>
      <p class="text-decoration-line-through">Demonstrating use of text-decoration-line-through class to treat the text as no longer accurate.</p>
    </body>
  </html>

<del>

Example

可以通过 Edit & Run 选项编辑并试着运行此代码。

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Bootstrap Typography Inline Elements</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>
      <h4>Use of <del> element</h4>
      <p><del>Demonstrating use of <del> tag to render the text as deleted.</del></p>
    </body>
  </html>

<strong>

Example

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

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <title>Bootstrap Typography Inline Elements</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>
     <h4>Use of strong element</h4>
     <p><strong>Demonstrating use of strong tag to render the text as bold.</strong></p>
   </body>
</html>

<em>

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Typography Inline Elements</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>
    <h4>Use of em element</h4>
    <p><em>Demonstrating use of em tag to render the text as italicized.</em></p>
  </body>
</html>

Lists

Unstyled

.list-unstyled 类删除了列表的默认样式和列表项的左外边距。然而，此样式仅适用于直接子元素。

Example

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

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Typography Lists</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>
      <h4>Use of .list-unstyled</h4>
      <p>The class .list-unstyled removes the default style of list and the left margin on the items of the list.</p>
      <ul class="list-unstyled">
         <li>Snacks</li>
         <li>Beverages
           <ul class="list">
             <li>Cold Beverage</li>
             <li>Hot Beverage</li>
           </ul>
         </li>
         </ul>
   </body>
</html>

Inline

Bootstrap 提供了 .list-inline 和 .list-inline-item 这两个类的组合，它可以移除列表的项目符号，并在列出的项目之间添加一些边距或空格。

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Typography Lists</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>
    <h4>Use of .list-inline and .list-inline-item</h4>
    <p>The classes <b>.list-inline</b> and <b>.list-inline-item</b> removes a list's bullets and adds a little margin.</p>
    <ul class="list-inline">
      <li class="list-inline-item">Tea</li>
      <li class="list-inline-item">Coffee</li>
      <li class="list-inline-item">Juice</li>
    </ul>
  </body>
</html>

Description List Alignment

Bootstrap 提供了预定义的类来添加到 HTML 的 <dl> 、 <dt> 和 <dd> 标签，以便水平对齐术语和描述。您还可以选择添加 .text-truncate 类来用省略号截断文本。

Example

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Typography Description List Alignment</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>
    <h4>Use of classes for description list alignment</h4>
    <p>The predefined classes of bootstrap help to align terms and description in grid form.</p>
    <dl class="row">
       <dt class="col-sm-3">Description Lists</dt>
       <dd class="col-sm-9">This tag shows the description of the term</dd>
       <dt class="col-sm-3 text-truncate">The predefined class text-truncate truncates the text and returns the output with ellipsis.</dt>
       <dd class="col-sm-9">This tag shows the truncated text with ellipsis</dd>
    </dl>
  </body>
</html>

Responsive Font Sizes

默认情况下，Bootstrap 5 中启用响应字体大小，允许文本在所有设备和视口大小上自动缩放。它缩写为 RFS ，并且能够使用像 margin, padding, border-radius, 甚至 box-shadow 这样的单位值重新缩放文本。

RFS 根据浏览器视口尺寸自动计算适当的值。