Bulma - 标签和标题

说明

Bulma 提供称为标签的小标签来显示附加信息。您需要添加 tag 类，才能在页面中插入标签标签。

以下示例描述了如何显示标签标签、使用颜色修饰符(例如 is-black、is-dark、is-light、is-white、is-primary、is-link、is-info、is-success、is-warning、is-danger)显示不同类型的颜色，以及页面元素的标签标签大小(使用 is-medium 和 is-large 等类) −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements 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">
               Tags
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Basic Tag
            </span>
            <br>
            
            <span class = "tag">
               Simple Tag
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Tag Colors
            </span>
            <br>
            
            <span class = "tag is-black">Black</span>
            <span class = "tag is-dark">Dark</span>
            <span class = "tag is-light">Light</span>
            <span class = "tag is-white">White</span>
            <br>
            <br>
            
            <span class = "tag is-primary">Primary</span>
            <span class = "tag is-link">Link</span>
            <span class = "tag is-info">Info</span>
            
            <span class = "tag is-success">Success</span>
            <span class = "tag is-warning">Warning</span>
            <span class = "tag is-danger">Danger</span>
            <br>
            <br>
            
            <span class = "is-size-5">Tag Sizes</span><br>
            <span class = "tag is-primary is-medium">Medium</span>
            <span class = "tag is-info is-large">Large</span>
            <br>
            <br>
         </div>
         
      </section>
   </body>
   
</html>

执行上述代码，您将得到以下输出 −

标签列表和颜色组合

Bulma 允许在容器中使用 tags 类创建标签列表，并以不同类型的颜色显示标签。

让我们创建一个简单的示例，在页面中显示标签列表(使用 tags 类)和颜色组合(使用上述颜色修饰符)−

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements 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">
               Tags
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               List of tags
            </span>
            <br>
            <br>
            
            <div class = "tags">
               <span class = "tag">India</span>
               <span class = "tag">Srilanka</span>
               <span class = "tag">England</span>
               <span class = "tag">Australia</span>
               <span class = "tag">Spain</span>
               <span class = "tag">Russia</span>
               <span class = "tag">South Africa</span>
               <span class = "tag">Ireland</span>
               <span class = "tag">Zimbabwe</span>
            </div>
            
            <span class = "is-size-5">
               Tags with Delete and Color Combinations
            </span>
            <br>
            <br>
            
            <div class = "tags has-addons">
               <span class = "tag is-success">India</span>
               <a class = "tag is-delete"></a>
            </div>
            
            <div class = "tags has-addons">
               <span class = "tag is-warning">Srilanka</span>
               <a class = "tag is-delete"></a>
            </div>
            
            <div class = "tags has-addons">
               <span class = "tag is-danger">Srilanka</span>
               <a class = "tag is-delete"></a>
            </div>
         </div>
         
      </section>
   </body>
   
</html>

上述代码将显示以下输出 −

标题和副标题

您可以使用元素中的 .title 和 .subtitle 类来显示标题和副标题。此外，还有 6 种尺寸类型，从 is-1 到 is-6，用于在页面中显示标题和副标题。

以下示例演示了如何在页面中使用 .title 和 .subtitle 类以及尺寸 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements 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-3">Title and Subtitle</span>
            <br>
            
            <h1 class = "title">Tutorialspoint (title)</h1>
            <h2 class = "subtitle">easy way for learning online (subtitle)</h2>
            <span class = "is-size-3">Sizes of Title and Subtitle</span>
            <br>
            
            <h1 class = "title is-1">Tutorialspoint (is-1)</h1>
            <h1 class = "subtitle is-1">easy way for learning online</h1>
            <br>
            
            <h2 class = "title is-2">Tutorialspoint (is-2)</h2>
            <h2 class = "subtitle is-2">easy way for learning online</h2>
            <br>
            
            <h3 class = "title is-3">Tutorialspoint (is-3)</h3>
            <h3 class = "subtitle is-3">easy way for learning online</h3>
            <br>
            
            <h4 class = "title is-4">Tutorialspoint (is-4)</h4>
            <h4 class = "subtitle is-4">easy way for learning online</h4>
            <br>
            
            <h5 class = "title is-5">Tutorialspoint (is-5)</h5>
            <h5 class = "subtitle is-5">easy way for learning online</h5>
            <br>
            
            <h6 class = "title is-6">Tutorialspoint (is-6)</h6>
            <h6 class = "subtitle is-6">easy way for learning online</h6>
         </div>
      </section>
   </body>
</html>

执行上述代码，您将得到以下输出 −

bulma_elements.html