Bootstrap - 版式

本章将讨论 Bootstrap 提供的各种与版式相关的功能。版式是一门使书面内容在展示时看起来清晰、有吸引力和吸引人的艺术。

引导程序默认/全局设置

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

Bootstrap 设置默认字体大小为 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中定义。

标题

HTML 标题标签（即<h1>到<h6>）在 bootstrap 中按以下方式设置样式：

例子

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

<!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 元素。

例子

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

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

自定义标题

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

例子

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

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

显示标题

当标题要以更大且固执己见的样式显示时，可以使用显示标题类。

例子

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

    
<!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使该段落脱颖而出。它为段落中的文本提供更大的字体大小、更轻的粗细和更高的行高。

例子

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

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

缩写

HTML 的<abbr>元素由 bootstrap 设计，其中缩写词和首字母缩略词的完整形式显示在悬停时，文本在文本底部显示为浅虚线。

使用.initialism类来表示缩写，以获得稍小的字体大小。

例子

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

        
<!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> html 元素周围使用类.blockquote。这是一个例子：

例子

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

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

命名来源

Bootstrap在<footer>元素内提供了一个.blockquote-footer类，用于标识源。<cite>标签用于包装源作品的名称。

例子

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

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

结盟

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

例子

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

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

内嵌文本元素

bootstrap 不使用常见的内联 HTML5 元素，而是提供可用于文本样式的类。请遵循下面给出的一些示例：

。标记

.mark类将标记或突出显示文本以供参考。它的工作方式与<mark>元素相同。

例子

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

  <!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类表示细则文本，例如版权和法律文本。它的工作方式与<small>元素相同。

例子

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

  <!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-装饰-下划线

.text-decoration-underline类将文本呈现为带下划线的。它的工作方式与<u>元素相同

例子

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

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

.text-decoration-line-through类将文本视为不再准确。它的工作原理与<s>元素相同

例子

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

  <!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>元素将一行文本视为已删除。

例子

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

  <!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>元素将一行文本呈现为粗体。

例子

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

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

<em>元素将一行文本呈现为斜体。

例子

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

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

列表

无样式

.list-unstyled类删除列表的默认样式和列表项的左边距。但是，这种样式仅适用于直接子元素。

例子

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

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

排队

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

例子

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

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

描述列表对齐

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

例子

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

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

响应式字体大小

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

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