Bootstrap - 文字

上一頁
下一頁

本章將討論常見的 Bootstrap 文字實用工具。您可以使用 Bootstrap 實用工具類自定義文字對齊方式、粗細、行高、換行、字型大小和其他格式選項。

文字對齊

文字對齊類提供了一種方便的方式來將文字對齊到不同的元件。這些類包括響應式選項，可以使用與網格系統相同的視口寬度斷點將文字對齊到開始、結束或中心位置。

注意：請調整瀏覽器大小以檢視相對於特定視口的文字對齊方式。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</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="text-start text-info">Text aligned at starting position across all viewports sizes.</p>
        <p class="text-center text-danger">Text aligned at center position across all viewports sizes.</p>
        <p class="text-end text-warning">Text aligned at end position across all viewports sizes.</p>
    
        <p class="text-sm-start text-primary">Text aligned at start on viewports sized SM (small) or wider.</p>
        <p class="text-md-start text-primary">Text aligned at start on viewports sized MD (medium) or wider.</p>
        <p class="text-lg-start text-primary">Text aligned at start on viewports sized LG (large) or wider.</p>
        <p class="text-xl-start text-primary">Text aligned at start on viewports sized XL (extra-large) or wider.</p>
    </body>
    </html>
Bootstrap 沒有提供兩端對齊文字的實用工具類，這意味著雖然兩端對齊文字在視覺上可能更具吸引力，但它會使單詞間距更加隨機，從而更難閱讀。

文字換行和溢位

要實現文字換行，請將.text-wrap類應用於文字。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</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>
      <div class="badge bg-warning text-wrap" style="width: 8rem;">
        This sentence should be wrapped.
      </div>
    </body>
    </html>

您可以使用.text-nowrap類阻止文字換行。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</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>
      <div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
        This sentence should overflow the parent.
      </div>
    </body>
    </html>

斷字

  • 為了避免使用長字串文字破壞元件佈局，請使用.text-break應用word-wrap: break-word和word-break: break-word。

  • 為了增強瀏覽器相容性，請使用word-wrap而不是overflow-wrap。此外，包含已棄用的word-break: break-word以防止 Flex 容器出現問題。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Text</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="text-break text-primary">TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
</body>
</html>
斷字在阿拉伯語中是不可能的，這是最常用的 RTL 語言。.text-break功能已從我們的 RTL 編譯的 CSS 中刪除

文字轉換

文字大小寫類可用於轉換元件中的文字大小寫。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</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="text-lowercase text-danger">This is a lower case text.</p>
      <p class="text-uppercase text-info"> This is a upper case text.</p>
      <p class="text-capitalize text-warning">This is a capitalized text.</p>
    </body>
    </html>

請注意.text-capitalize類如何修改每個單詞的首字母，而不更改其他字母的大小寫。

字型大小

  • 您可以輕鬆修改文字的font-size。與包含font-weight和line-height的標題類（如.h1–.h6）不同，這些實用工具僅專注於font-size。

  • 這些實用工具的大小與 HTML 的標題元素匹配，隨著數字的增加，大小會減小。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</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="fs-1 text-info">This is a text of .fs-1 font size.</p>
      <p class="fs-2 text-info">This is a text of .fs-2 font size.</p>
      <p class="fs-3 text-info">This is a text of .fs-3 font size.</p>
      <p class="fs-4 text-info">This is a text of .fs-4 font size.</p>
      <p class="fs-5 text-info">This is a text of .fs-5 font size.</p>
      <p class="fs-6 text-info">This is a text of .fs-6 font size.</p>
    </body>
    </html>

修改$font-sizes Sass 對映以自定義可用的字型大小。

字型粗細和斜體

使用以下實用工具更改文字的字型粗細或字型樣式

  1. 字型粗細實用工具縮寫為.fw-*

  2. 字型樣式實用工具縮寫為.fst-*

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</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="fw-bold text-primary">This is a bold text.</p>
      <p class="fw-bolder text-primary">This is a bolder weight text (relative to the parent element).</p>
      <p class="fw-semibold text-primary">This is a semibold weight text.</p>
      <p class="fw-medium text-secodary">This is a medium weight text.</p>
      <p class="fw-normal text-secodary">This is a normal weight text.</p>
      <p class="fw-light text-secodary">This is a light weight text.</p>
      <p class="fw-lighter text-danger">This is a lighter weight text (relative to the parent element).</p>
      <p class="fst-italic text-danger">This is a italic text.</p>
      <p class="fst-normal text-danger">This is a text with normal font style.</p>
    </body>
    </html>

行高

要更改行的高度，請使用.lh-*實用工具類。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</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="lh-1 text-primary">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p>
      <p class="lh-sm text-secondary">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p>
      <p class="lh-base text-warning">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p>
      <p class="lh-lg text-info">This is a long text that demonstrates how the utilities affect the line height of an element. Classes can be added to the element directly or occasionally to its parent element. With the help of utility API, these classes can be modified as required.</p>
    </body>
    </html>

等寬字型

使用.font-monospace類將選定的文字轉換為等寬字型堆疊。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</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="font-monospace text-primary">Text in monospace font.</p>
    </body>
    </html>

重置顏色

使用.text-reset類恢復文字或連結的顏色，並使其繼承父元素的顏色。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</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="text-body-danger">
        There is a <a href="#" class="text-reset">reset link</a> in this muted text.
      </p>
      <p class="text-body-secondary">
        There is a <a href="#">reset link without text-reset class</a> in this muted text.
      </p>
    </body>
    </html>

文字裝飾

使用文字裝飾類增強元件中文字的外觀。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Text</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="text-decoration-underline text-danger">There is a line underneath in this paragraph.</p>
      <p class="text-decoration-line-through text-danger">A line runs through this text.</p>
      <a href="#" class="text-decoration-none">There is no text decoration on this link.</a>
    </body>
    </html>
列印頁面
上一頁
下一頁
廣告