ブルマ-タグとタイトル

説明

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_クラスを使用して、タイトルとサブタイトルを表示できます。また、ページにタイトルとサブタイトルを表示するための_is-1_から_is-6_までの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">finddevguides (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">finddevguides (is-1)</h1>
            <h1 class = "subtitle is-1">easy way for learning online</h1>
            <br>

            <h2 class = "title is-2">finddevguides (is-2)</h2>
            <h2 class = "subtitle is-2">easy way for learning online</h2>
            <br>

            <h3 class = "title is-3">finddevguides (is-3)</h3>
            <h3 class = "subtitle is-3">easy way for learning online</h3>
            <br>

            <h4 class = "title is-4">finddevguides (is-4)</h4>
            <h4 class = "subtitle is-4">easy way for learning online</h4>
            <br>

            <h5 class = "title is-5">finddevguides (is-5)</h5>
            <h5 class = "subtitle is-5">easy way for learning online</h5>
            <br>

            <h6 class = "title is-6">finddevguides (is-6)</h6>
            <h6 class = "subtitle is-6">easy way for learning online</h6>
         </div>
      </section>
   </body>
</html>

上記のコードを実行すると、以下の出力が得られます-

Bulma-elements-tag-title

ブルマ-タグとタイトル

説明

タグと色の組み合わせのリスト

タイトルとサブタイトル

目次