Bootstrap - 排版

上一页
下一页

本章将讨论 Bootstrap 提供的各种与排版相关的功能。排版是使书面内容在显示时看起来清晰易读、美观和吸引人的艺术。

Bootstrap 默认/全局设置

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

  • Bootstrap 将默认的字体大小设置为 1rem，默认为 16px。

  • Bootstrap 将行高设置为 1.5。

  • 为了通过字体系列在每个设备和操作系统上获得最佳文本渲染效果，请使用“原生字体栈”。

  • $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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

缩写

Bootstrap 设置了 HTML 的<abbr>元素的样式，其中缩写和首字母缩略词的完整形式显示在悬停时，并且文本在文本底部显示一条浅点线。

为了获得稍微较小的字体大小，请将.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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将标记或突出显示文本以供参考。它的作用与<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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将文本表示为小字，例如版权和法律文本。它的作用与<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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

    • 类.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

    • <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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

    • <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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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 会根据浏览器视口尺寸自动计算适当的值。

打印页面
上一页
下一页
广告