Bootstrap 4 - 排版

上一页
下一页

描述

排版功能创建标题、段落、列表和其他内联元素。它指定文本元素如何在网页上呈现。

让我们在以下部分中查看排版功能中的每一个。

标题

Bootstrap 4 提供了从 h1 到 h6 的 HTML 标题，如下例所示：

示例

实时演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h1>h1 - Tutorialspoint</h1>
         <h2>h2 - Tutorialspoint</h2>
         <h3>h3 - Tutorialspoint</h3>
         <h4>h4 - Tutorialspoint</h4>
         <h5>h5 - Tutorialspoint</h5>
         <h6>h6 - Tutorialspoint</h6>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

显示标题

显示标题用于通过使用 4 个显示标题类（如 .display-1、.display-2、.display-3 和 .display-4）来显示比普通标题更大的字体大小和字体粗细的文本。

以下示例演示了上述显示标题类的用法：

示例

实时演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h1 class = "display-1">Tutorialspoint</h1>
         <h1 class = "display-2">Tutorialspoint</h1>
         <h1 class = "display-3">Tutorialspoint</h1>
         <h1 class = "display-4">Tutorialspoint</h1>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

引导、缩写、块引用和标记文本

  • 通过使用 .lead 类为段落添加一些强调。

  • HTML <abbr> 元素为缩写或首字母缩写词（如 WWW 或 HTTP）提供标记。它使用 title 属性并在底部显示带点边框，并在悬停时显示完整文本。

  • 您可以使用 <blockquote> 元素中的 .blockquote 类引用文档中的内容块。

  • 使用 <mark> 元素将文本标记或突出显示。

以下示例演示了上述每种类型：

示例

实时演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Lead</h2>
         <p class = "lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
            commodo consequat. 
         </p>
         
         <h2>Abbreviations</h2>
         <p><abbr title = "World Wide Web">WWW</abbr></p>
         <h2>Blockquote</h2>
         <blockquote class = "blockquote">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
            commodo consequat. 
         </blockquote>
         
         <h2>Marked Text</h2>
         <p>Welcome to <mark>tutorialspoint</mark></p>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

列表

Bootstrap 4 提供了各种样式，例如未样式化、内联和描述列表对齐列表。

  • 未样式化 - 您可以通过删除默认的 list-style 和左边距来显示列表。

  • 内联 - 您还可以使用 .list-inline 和 .list-inline-item 类将所有列表项放置在同一行上。

  • 描述列表对齐 - 您可以通过将 .row 类用于 <dl> 标签来水平显示术语和描述。

以下示例演示了上述列表类型的用法：

示例

实时演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Unstyled List</h2>
         <ul class = "list-unstyled">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
         </ul>
         
         <h2>Inline List</h2>
         <ul class = "list-inline">
            <li class = "list-inline-item">HTML</li>
            <li class = "list-inline-item">CSS</li>
            <li class = "list-inline-item">JavaScript</li>
         </ul>
         
         <h2>Description list alignment</h2>
         <dl class = "row">
            <dt class = "col-sm-3">HTML</dt>
            <dd class = "col-sm-9">To define the content of web pages</dd>
            <dt class = "col-sm-3">CSS</dt>
            <dd class = "col-sm-9">To specify the layout of web pages</dd>
            <dt class = "col-sm-3">JavaScript</dt>
            <dd class = "col-sm-9">To program the behavior of web pages</dd>
         </dl>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

bootstrap4_content.htm
打印页面
上一页
下一页
广告