Bulma - 颜色和排版助手

描述

您可以使用 color 助手来更改文本或背景的颜色。

文本颜色

S.No.	类别	颜色
1	has-text-white	hsl(0, 0%, 100%)
2	has-text-black	hsl(0, 0%, 4%)
3	has-text-light	hsl(0, 0%, 96%)
4	has-text-dark	hsl(0, 0%, 21%)
5	has-text-primary	hsl(171, 100%, 41%)
6	has-text-info	hsl(204, 86%, 53%)
7	has-text-link	hsl(217, 71%, 53%)
8	has-text-success	hsl(141, 71%, 48%)
9	has-text-warning	hsl(48, 100%, 67%)
10	has-text-danger	hsl(348, 100%, 61%)
11	has-text-black-bis	hsl(0, 0%, 7%)
12	has-text-black-ter	hsl(0, 0%, 14%)
13	has-text-grey-darker	hsl(0, 0%, 21%)
14	has-text-grey-dark	hsl(0, 0%, 29%)
15	has-text-grey	hsl(0, 0%, 48%)
16	has-text-grey-light	hsl(0, 0%, 71%)
17	has-text-grey-lighter	hsl(0, 0%, 86%)
18	has-text-white-ter	hsl(0, 0%, 96%)
19	has-text-white-bis	hsl(0, 0%, 98%)

背景颜色

S.No.	Class	Color
1	has-background-white	hsl(0, 0%, 100%)
2	has-background-black	hsl(0, 0%, 4%)
3	has-background-light	hsl(0, 0%, 96%)
4	has-background-dark	hsl(0, 0%, 21%)
5	has-background-primary	hsl(171, 100%, 41%)
6	has-background-info	hsl(204, 86%, 53%)
7	has-background-link	hsl(217, 71%, 53%)
8	has-background-success	hsl(141, 71%, 48%)
9	has-background-warning	hsl(48, 100%, 67%)
10	has-background-danger	hsl(348, 100%, 61%)
11	has-background-black-bis	hsl(0, 0%, 7%)
12	has-background-black-ter	hsl(0, 0%, 14%)
13	has-background-grey-darker	hsl(0, 0%, 21%)
14	has-background-grey-dark	hsl(0, 0%, 29%)
15	has-background-grey	hsl(0, 0%, 48%)
16	has-background-grey-light	hsl(0, 0%, 71%)
17	has-background-grey-lighter	hsl(0, 0%, 86%)
18	has-background-white-ter	hsl(0, 0%, 96%)
19	has-background-white-bis	hsl(0, 0%, 98%)

排版助手

排版助手用于更改文本的大小和颜色。Bulma 包含 7 种大小，如下表所示 −

S.No.	类别	字体大小
1	is-size-1	3rem
2	is-size-2	2.5rem
3	is-size-3	2rem
4	is-size-4	1.5rem
5	is-size-5	1.25rem
6	is-size-6	1rem
7	is-size-7	0.75rem

让我们使用上述尺寸创建一个简单的示例 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Typography Helpers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-1">
               7 types of sizes
            </span><br><br>
            
            <span class = "is-size-1">
               Tutorialspoint
            </span><br>  
            
            <span class = "is-size-2">
               Tutorialspoint
            </span><br>
            
            <span class = "is-size-3">
               Tutorialspoint
            </span><br>
            
            <span class = "is-size-4">
               Tutorialspoint
            </span><br>
            
            <span class = "is-size-5">
               Tutorialspoint
            </span><br>
            
            <span class = "is-size-6">
               Tutorialspoint
            </span><br>
            
            <span class = "is-size-7">
               Tutorialspoint
            </span><br>
         </div>
      </section>
   </body>
</html>

它将显示如下所示的输出 −

颜色

Bulma 提供了不同类型的颜色类来设置容器中的元素。请参阅上面的文本颜色部分，使用如下所示的颜色类创建示例 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Typography Helpers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Text color using color classes
            </span>
            <br>
            
            <span class = "has-text-primary">
               Tutorialspoint
            </span><br>
            
            <span class = "has-text-link">
               Tutorialspoint
            </span><br>  
            
            <span class = "has-text-black-bis">
               Tutorialspoint
            </span><br>
            
            <span class = "has-text-grey">
               Tutorialspoint
            </span><br>
            
            <span class = "has-text-grey-lighter">
               Tutorialspoint
            </span><br>
            
            <span class = "has-text-danger">
               Tutorialspoint
            </span>
         </div>
      </section>
   </body>
</html>

它显示如下所示的输出 −

对齐

Bulma 提供了 4 种类型的对齐助手来对齐容器中的文本。

S.No.	Class	对齐
1	has-text-centered	将文本显示在中心。
2	has-text-justified	将文本显示为两端对齐。
3	has-text-left	将文本显示在左侧。
4	has-text-right	将文本显示在右侧。

让我们使用上面的对齐类创建一个简单的示例 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Alignment Helpers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Alignment
            </span>
            <br>
            <br>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-centered"> has-text-centered</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-justified"> has-text-justified</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-left"> has-text-left</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-right"> has-text-right</p>
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>

它显示如下所示的输出 −

文本转换

Bulma 提供了 4 种类型的文本转换助手来转换容器中的文本。

S.No.	Class	转换
1	is-capitalized	它将每个单词的第一个字符转换为大写。
2	is-lowercase	它将所有字符定义为小写。
3	is-uppercase	将所有字符定义为大写。
4	is-italic	将所有字符定义为斜体。

让我们使用上面的文本转换类创建一个简单的示例 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Text Transformation Helpers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Text Transformation
            </span><br><br>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-capitalized"> is-capitalized</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-lowercase"> is-lowercase</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-uppercase"> is-uppercase</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-italic"> has-is-italic</p>
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>

它显示如下所示的输出 −

文本粗细

Bulma 提供了 4 种类型的文本粗细助手来转换容器中的文本粗细。

S.No.	Class	Alignment
1	has-text-weight-light	它将文本粗细显示为浅色。
2	has-text-weight-normal	它将文本粗细显示为正常。
3	has-text-weight-semibold	它将文本粗细显示为半粗体(而不是粗体)。
4	has-text-weight-bold	它将文本粗细显示为粗体。

让我们使用上述文本粗细类创建一个简单的示例 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Text Weight Helpers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Text Weight
            </span>
            <br>
            <br>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-light"> has-text-weight-light</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-normal"> has-text-weight-normal</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-semibold"> has-text-weight-semibold</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-bold"> has-text-weight-bold</p>
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>

它显示如下所示的输出 −

bulma_modifiers.html