Bulma - 列布局和大小

描述

Bulma 允许通过在容器中添加 column 类来非常轻松地构建列布局。

在 columns 容器中添加 column 类，以在网页中创建宽度相等的每一列，如下例所示。

注意 − 调整编码地面输出窗口的大小以查看根据窗口大小发生的变化。

<!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">
               Column Layout
            </span><br><br>
            <div class = "columns">
               <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 提供以下类来更改单个列的大小 −

is-three-quarters
is-two-thirds
is-half
is-one-third
is-one-quarter

让我们使用上面的列大小创建一个简单的示例 −

注意 −调整编码地面输出窗口的大小，以查看根据窗口大小发生的变化。

<!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">
               Column Sizes
            </span><br><br>
            
            <div class = "columns">
               <div class = "column is-three-quarters">
                  <p class = "has-text-black has-background-info">is-three-quarters</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-two-thirds">
                  <p class = "has-text-black has-background-info">is-two-thirds</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-half">
                  <p class = "has-text-black has-background-info">is-half</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-one-third">
                  <p class = "has-text-black has-background-info">is-one-third</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-one-quarter">
                  <p class = "has-text-black has-background-info">is-one-quarter</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-grey-lighter">Auto</p>
               </div>
            </div>
         </div>
      </section>
   </body>
</html>

它显示的输出如下所示 −

12 列系统

Bulma 提供响应式网格系统，在一个容器中分为 12 列。

is-2
is-3
is-4
is-5
is-6
is-7
is-8
is-9
is-10
is-11
is-12

以下示例显示了上述 12 个列类的用法 −

注意 − 调整编码地面输出窗口的大小，以查看根据窗口大小发生的变化。

<!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">
               12 Columns System
            </span><br><br>
            <div class = "columns">
               <div class = "column is-2">
                  <p class = "has-text-black has-background-info has-text-centered">is-2</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 10 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-3 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-3</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 9 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-4 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-4</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 8 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-5 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-5</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 7 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-6 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-6</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 6 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-7 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-7</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 5 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-8 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-8</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 4 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-9 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-9</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 3 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-10 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-10</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered">Remaining 2 columns</p>
               </div>
            </div>
            
            <div class = "columns">
               <div class = "column is-11 ">
                  <p class = "has-text-black has-background-info has-text-centered">is-11</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info has-text-centered"> Remaining 1 column</p>
               </div>
            </div>
         </div>
      </section>
   </body>
</html>

它显示的输出如下所示 −

偏移和窄列

Bulma 提供偏移类，用于在响应式网格系统中间隔元素。您可以将偏移用作 .is-offet-x，其中 x 是列类的名称，并使用窄列通过 is-narrow 修饰符在容器中占用所需的空间。

让我们通过使用偏移(使用 is-offset 类)和窄(使用 is-narrow 类)列来创建一个简单的示例 −

<!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">
               Offset
            </span><br><br>
            <div class = "columns is-mobile">
               <div class = "column is-half is-offset-one-quarter">
                  <p class = "has-text-black has-background-info has-text-centered">is-half is-offset-one-quarter</p>
               </div>
            </div>
            <div class = "columns is-mobile">
               <div class = "column is-three-fifths is-offset-one-fifth">
                  <p class = "has-text-black has-background-info has-text-centered">is-three-fifths is-offset-one-fifth</p>
               </div>
            </div>
            <div class = "columns is-mobile">
               <div class = "column is-4 is-offset-8">
                  <p class = "has-text-black has-background-info has-text-centered">is-4 is-offset-8</p>
               </div>
            </div>
            <div class = "columns is-mobile">
               <div class = "column is-11 is-offset-1">
                  <p class = "has-text-black has-background-info has-text-centered">is-11 is-offset-1</p>
               </div>
            </div>
            <br>
            
            <span class = "title">
               Narrow Column
            </span>
            <div class = "columns">
               <div class = "column is-narrow">
                  <div class = "box has-background-info" style="width: 200px;">
                     <p class = "title is-5">Narrow column</p>
                     <p class = "subtitle">Column has 200px width</p>
                  </div>
               </div>
               <div class = "column">
                  <div class = "box has-background-info">
                     <p class = "title is-5">Flexible column</p>
                     <p class = "subtitle">Column takes remaining available space</p>
                  </div>
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>

它显示如下所示的输出 −

bulma_columns.html

Bulma 教程

Bulma 有用资源

Bulma - 列布局和大小

描述

列大小

12 列系统

偏移和窄列

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！