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

縮寫

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/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將標記或突出顯示文字以供參考。它的作用與<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將文字表示為小字，例如版權和法律文字。它的作用與<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-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/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>

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

    • <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 會根據瀏覽器視口尺寸自動計算適當的值。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.