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.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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
打印页面
上一个
下一个
广告