Bulma——平鋪

描述

Bulma 藉助名為 tile 的單個元素類建立二維佈局或 Metro 選單樣式。Metro 選單樣式是 Microsoft 應用程式（如 Windows 8）的新式介面。

我們透過使用 tile 類來建立一個簡單示例 −

注意 − 請調整 coding-ground 輸出視窗大小以檢視根據視窗大小產生的變化。

<!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://tutorialspoint.tw/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 級平鋪來描述平鋪元素的巢狀 −

注意 − 請調整 coding-ground 輸出視窗大小以檢視根據視窗大小產生的變化。

現場演示

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

列印頁面

上一步

下一步