Bulma - 列響應和巢狀

說明

Bulma 在不同型別的螢幕（如移動裝置、平板電腦和桌上型電腦）中提供響應式列。您可以透過在 columns 容器中新增 is-mobile 修飾符來在移動裝置上顯示這些列，或者如果您只想在臺式機上顯示這些列，則在 columns 容器中新增 is-desktop 修飾符。

讓我們建立一個簡單的示例，用於移動裝置列和桌上型電腦列，如下所示 −

即時演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Columns 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">
               Mobile Columns
            </span>
            <br>
            <br>
            
            <div class = "columns is-mobile">
               <div class = "column">
                  <p class = "has-text-black has-background-info">First column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Second column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Third column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Fourth column</p>
               </div>
            </div>
            <br>
            
            <span class = "title">
               Desktop Columns
            </span><br><br>
            
            <div class = "columns is-desktop">
               <div class = "column">
                  <p class = "has-text-black has-background-info">First column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Second column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Third column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Fourth column</p>
               </div>
            </div>
            
         </div>
      </section>
   </body>
</html>

它顯示的輸出如下 −

巢狀列

Bulma 允許在另一個列中巢狀列以構建響應式列。

以下簡單示例演示了列巢狀 −

即時演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Columns 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 Columns
            </span>
            <br>
            <br>
            
            <div class = "columns">
               <div class = "column">
                  <p class = "has-background-info">First column</p>
                  <div class = "columns is-mobile">
                     <div class = "column is-size-6">
                        <p class = "has-background-primary">First nested column</p>
                     </div>
                     <div class = "column is-size-6">
                        <p class = "has-background-primary">Second nested column</p>
                     </div>
                  </div>
               </div>
               
               <div class = "column">
                  <p class = "has-background-info">Second column</p>
                  <div class = "columns is-mobile">
                     <div class = "column is-4">
                        <p class = "has-background-primary">is-4</p>
                     </div>
                     <div class = "column is-5">
                        <p class = "has-background-primary">is-5</p>
                     </div>
                     <div class = "column is-3">
                        <p class = "has-background-primary">is-3</p>
                     </div>
                  </div>
               </div>
               
            </div>
         </div>
      </section>
      
   </body>
</html>

它顯示的輸出如下 −

bulma_columns.htm

列印頁面