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.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 级平铺来描述平铺元素的嵌套 −

注意 − 请调整 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
打印页面
上一步
下一步
广告