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-responsiveness-nesting

Bulma-列の応答性と入れ子

説明

列のネスト