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-offset-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.htm

打印页面