ブルマ-タイル

説明

Bulmaは、_tile_という単一の要素クラスを使用して、2次元レイアウトまたはMetroメニュースタイルを作成します。メトロメニュースタイルは、Windows 8などのMicrosoftアプリケーション用の新しいスタイルのインターフェイスです。

_tile_クラスを使用して簡単な例を作成しましょう-

_ 注-コーディンググラウンド出力ウィンドウのサイズを変更して、ウィンドウサイズに応じて発生する変更を確認します。_

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Tiles 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">
               Tiles
            </span>
            <br>
            <br>

            <div class = "tile is-ancestor">
               <div class = "tile is-vertical is-8">
                  <div class = "tile">
                     <div class = "tile is-parent is-vertical">
                        <article class = "tile is-child notification is-primary">
                           <p class = "title">Vertical Tile</p>
                           <div class = "content">Hello World!!!</div>
                           <br>
                        </article>
                     </div>
                     <div class = "tile is-parent">
                        <article class = "tile is-child notification is-info">
                           <p class = "title">Middle Tile</p>
                           <p class = "subtitle">With an image</p>
                           <figure class = "image is-2by1">
                              <img src = "https://www.finddevguides.com/bootstrap/images/64.jpg">
                           </figure>
                        </article>
                     </div>
                  </div>
                  <div class = "tile is-parent">
                     <article class = "tile is-child notification is-danger">
                        <p class = "title">Wide tile</p>
                        <div class = "content">
                           Hello World!!!
                        </div>
                        <br>
                     </article>
                  </div>
               </div>

               <div class = "tile is-parent">
                  <article class = "tile is-child notification is-success">
                     <div class = "content">
                        <p class = "title">Tall tile</p>
                        <div class = "content">
                           Hello World!!!
                        </div>
                        <br>
                     </div>
                  </article>
               </div>
            </div>

         </div>
      </section>

   </body>
</html>

以下の出力が表示されます-

ネスティング

Bulmaでは、タイル要素をネストして、グリッド形式でタイルを表示できます。タイルのネストは3レベルの階層を使用します-

is-ancestor -これはタイルの始まりであり、他のタイルをラップします。
is-parent -これは修飾子であり、_is-ancestor_修飾子の下にあります。
is-child -これは修飾子であり、_is-parent_修飾子の下にあります。

以下の簡単な例では、上記の3レベルのタイルを使用してタイル要素のネストを説明します-

_ 注-コーディンググラウンド出力ウィンドウのサイズを変更して、ウィンドウサイズに応じて発生する変更を確認します。_

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Tiles 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">
               Nesting of Tiles
            </span>
            <br>
            <br>

            <div class = "tile is-ancestor">
               <div class = "tile is-4 is-vertical is-parent">
                  <div class = "tile is-child box">
                     <p class = "title">First Box</p>
                     <p>This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.</p>
                  </div>
                  <div class = "tile is-child box">
                     <p class = "title">Second Box</p>
                     <p>This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.</p>
                  </div>
               </div>
               <div class = "tile is-parent">
                  <div class = "tile is-child box">
                     <p class = "title">Third Box</p>
                     <p>This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.</p>

                     <p>This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.</p>

                     <p>This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.
                     This is some sample text. This is some sample text.</p>
                  </div>
               </div>
            </div>
         </div>
      </section>

   </body>
</html>

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

Bulma-tiles

ブルマ-タイル

説明

ネスティング