Bootstrap 4 - 文字

上一個

下一個

描述

Bootstrap 提供文字實用程式來控制文字對齊、變換、加粗等。

文字對齊

可以使用 .text-justify 類來對齊文字，也可以使用 text-left、text-right 和 text-center 類分別對文字進行左對齊、右對齊和居中對齊。

以下示例演示瞭如何使用文字對齊實用程式 −

示例

即時演示

<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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
      <style type = "text/css"></style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Text alignment: Text Justify </h2>
         <p class = "text-success">
            The below text is justified by using the class "text-justify"
         </p>
         <p class = "text-justify">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 
            1500s, when an unknown printer took a galley of type and scrambled it to 
            make a type specimen book. It has survived not only five centuries, but 
            also the leap into electronic typesetting, remaining essentially unchanged. 
            It was popularised in the 1960s with the release of Letraset sheets 
            containing Lorem Ipsum passages, and more recently with desktop publishing 
            software like Aldus PageMaker including versions of Lorem Ipsum.
         </p>
         
         <h2>Text alignment: Left, Right, Center </h2>
         <p class = "text-left">Text is aligned on Left side by using class "text-left"</p>
         <p class = "text-center">Text is aligned at Center by using class "text-center"</p>
         <p class = "text-right">Text is aligned on Right side by using class "text-right"</p>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
         
   </body>
</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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
      <style type = "text/css"></style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Text Transform</h2>
         <p>Welcome to 
            <span class = "text-lowercase">tutorialspoint (text-lowercase)</span>. 
         </p>
         <p>Welcome to 
            <span class = "text-uppercase">tutorialspoint (text-uppercase)</span>
         </p>
         <p>Welcome to 
            <span class = "text-capitalize">tutorials-point (text-capitalize)</span>
         </p>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity =" sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將生成以下結果 −

輸出

字型粗細、斜體和等寬

你可以使用 font-weight-* 類來更改文字的粗細，並使用 font-italic 類來使文字呈斜體。monospace 字型會建立固定寬度的文字，它佔用的水平空間量是相同的。

以下示例演示瞭如何使用上述實用程式 −

示例

即時演示

<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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
      <style type = "text/css"></style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Font weight and italics</h2>
         <p>
            This text is <span class = "font-weight-bold">font-weight-bold </span>
         </p>
         <p>
            This text is <span class = "font-weight-normal">font-weight-normal</span>
         </p>
         <p>
            This text is <span class = "font-weight-light">font-weight-light</span>
         </p>
         <p>
            This text is <span class = "font-italic">font-italic</span>
         </p>
         
         <h2>Monospace</h2>
         <p class = "text-monospace">
            This text is written by using 'text-monospace' class
         </p>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它將生成以下結果 −

輸出

bootstrap4_utilities.htm

列印頁面

上一個

下一個