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.htm

列印頁面