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.jquery.com/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.jquery.com/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.jquery.com/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.jquery.com/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
列印頁面
上一頁
下一頁
廣告