Layui快速入门之第三节栅格布局

迷南。 2024-03-08 08:28 141阅读 0赞

**目录**

一：栅格布局的基本概念

二：栅格布局规则

三：始终等比例水平排列案例

四：响应式规则

五：移动设备、桌面端的组合响应式展现案例

六：移动设备、平板、桌面端的复杂组合响应式展现案例

七：响应式公共类

八：列间距

九：列偏移

十：案例演示

1.列间隔

2.列偏移

3.常规布局：从小屏幕堆叠到桌面水平排列

4.栅格嵌套

5.流体容器（宽度自适应，不固定）

十一：IE8/9 兼容方案

--------------------

### 一：栅格布局的基本概念 ###

Layui 栅格系统是一套具备响应式能力的布局方案，采用业界比较常用的容器横向 `12` 等分规则，预设了 `5*12` 种 CSS 排列类，内置多种大小尺寸的多终端适配，能很好地实现响应式局，这意味着一套系统，能同时适配于电脑的不同大小屏幕和手机、平板等移动屏幕，使得网页布局变得更加灵活，同时也极大地降低了 `HTML/CSS` 代码的耦合。

###  ###

### 二：栅格布局规则 ###

<table> 
 <tbody> 
  <tr> 
   <td>1.</td> 
   <td>采用&nbsp;<em>layui-row</em>&nbsp;来定义行，如：<em>&lt;div class="layui-row"&gt;&lt;/div&gt;</em></td> 
  </tr> 
  <tr> 
   <td>2.</td> 
   <td>采用类似&nbsp;<em>layui-col-md*</em>&nbsp;这样的预设类来定义一组列（column），且放在行（row）内。其中： 
    <ul> 
     <li>变量<em>md</em>&nbsp;代表的是不同屏幕下的标记（可选值见下文）</li> 
     <li>变量<em>*</em>&nbsp;代表的是该列所占用的 12 等分数（如 6/12），可选值为 1 - 12</li> 
     <li>如果多个列的“等分数值”总和等于 12，则刚好满行排列。如果大于12，多余的列将自动另起一行。</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>3.</td> 
   <td>列可以同时出现最多 5 种不同的组合，分别是：xs / sm / md / lg / xl&nbsp;2.8+，以在不同尺寸屏幕下进行自动适配。</td> 
  </tr> 
  <tr> 
   <td>4.</td> 
   <td>可对列追加类似&nbsp;<em>layui-col-space5</em>、&nbsp;<em>layui-col-md-offset3</em>&nbsp;这样的预设类来定义列的间距和偏移。</td> 
  </tr> 
  <tr> 
   <td>5.</td> 
   <td>最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！</td> 
  </tr> 
 </tbody> 
</table>

###  ###

### 三：始终等比例水平排列案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>布局容器</title>
        
        
        <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
        
        <script src="//unpkg.com/layui@2.8.0/dist/layui.js"></script>
    </head>
    <body>
       
      <div class="layui-container">
          
          <div class="layui-row" >
            
              <div class="layui-col-md5" style="background-color: yellow">
                  内容5/12
              </div>
              <div class="layui-col-md7" style="background-color: #00f7de">
                  内容7/12
              </div>
          </div>
          
          <div class="layui-row" >
              
              <div class="layui-col-md5" style="background-color:rebeccapurple">
                  内容4/12
              </div>
              <div class="layui-col-md7" style="background-color: red">
                  内容4/12
              </div>
          </div>
      </div>
    
    </body>
    </html>

### 四：响应式规则 ###

栅格的响应式能力，得益于 `CSS3` 媒体查询（`Media Queries`），针对不同尺寸的屏幕进行相应的适配处理

<table> 
 <thead> 
  <tr> 
   <th>超小屏幕<br> (手机&lt;768px)</th> 
   <th>小屏幕<br> (平板≥768px)</th> 
   <th>中等屏幕<br> (桌面≥992px)</th> 
   <th>大型屏幕<br> (桌面≥1200px)</th> 
   <th>超大屏幕<br> (桌面≥1400px)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><em>layui-container</em></td> 
   <td>auto</td> 
   <td>750px</td> 
   <td>970px</td> 
   <td>1170px</td> 
   <td>1330px</td> 
  </tr> 
  <tr> 
   <td>标记</td> 
   <td>xs</td> 
   <td>sm</td> 
   <td>md</td> 
   <td>lg</td> 
   <td>xl&nbsp;2.8+</td> 
  </tr> 
  <tr> 
   <td>列对应类</td> 
   <td>layui-col-xs*</td> 
   <td>layui-col-sm*</td> 
   <td>layui-col-md*</td> 
   <td>layui-col-lg*</td> 
   <td>layui-col-xl*</td> 
  </tr> 
  <tr> 
   <td>总列数</td> 
   <td colspan="5">12</td> 
  </tr> 
  <tr> 
   <td>响应行为</td> 
   <td>始终按比例水平排列</td> 
   <td colspan="4">在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列</td> 
  </tr> 
 </tbody> 
</table>

###  ###

### 五：移动设备、桌面端的组合响应式展现案例 ###

测试效果：

![f0b2c041627b4c45b7eb815d3c63b5e5.jpeg][]

###  ###

### 六：移动设备、平板、桌面端的复杂组合响应式展现案例 ###

测试效果：

![ed026b9dc78c470bb1274ae76d039af9.jpeg][]

###  ###

### 七：响应式公共类 ###

<table> 
 <thead> 
  <tr> 
   <th>类名（class）</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>layui-show-*-block</td> 
   <td>定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg、xl</td> 
  </tr> 
  <tr> 
   <td>layui-show-*-inline</td> 
   <td>定义不同设备下的 display: inline; * 可选值同上</td> 
  </tr> 
  <tr> 
   <td>layui-show-*-inline-block</td> 
   <td>定义不同设备下的 display: inline-block; * 可选值同上</td> 
  </tr> 
  <tr> 
   <td>layui-hide-*</td> 
   <td>定义不同设备下的隐藏类，即： display: none; * 可选值同上</td> 
  </tr> 
 </tbody> 
</table>

### 八：列间距 ###

通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：

layui-col-space1
    layui-col-space2
    layui-col-space4
    layui-col-space5
    layui-col-space6
    layui-col-space8
    layui-col-space10
    layui-col-space12
    layui-col-space14
    layui-col-space15
    layui-col-space16
    layui-col-space18
    layui-col-space20
    layui-col-space22
    layui-col-space24
    layui-col-space25
    layui-col-space26
    layui-col-space28
    layui-col-space30
    layui-col-space32
    <p>即：支持列之间为 1px-32px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔</p>

下面是一个简单的例子，列间距为 `16px`：

### 九：列偏移 ###

对列追加类似 `layui-col-md-offset*` 的预设类，从而让列向右偏移。如：`layui-col-md-offset3`，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度。下面是一个采用「列偏移」机制让两个列左右对齐的实例

div class="layui-row">
      <div class="layui-col-md4">
        4/12
      </div>
      <div class="layui-col-md4 layui-col-md-offset4">
        偏移4列，从而在最右
      </div>
    </div>

请注意，列偏移可针对不同屏幕的标准进行设定，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列

###  ###

### 十：案例演示 ###

##### 1.列间隔 #####

效果：

![58c62f149b6e4e41ae259c67d869c7af.jpeg][]

##### 2.列偏移 #####

效果：

![7d0091a59d0f48838954844f4c014e4f.jpeg][]

##### 3.常规布局：从小屏幕堆叠到桌面水平排列 #####

效果：

![3a7c4003ac084878940fc21815d04da6.jpeg][]

##### 4.栅格嵌套 #####

理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力

效果：

![85d2c3188eeb47bab044329d7bc0e3f6.jpeg][]

##### 5.流体容器（宽度自适应，不固定） #####

效果：

![3f2bab2db4e647958736f568a08909bb.jpeg][]

### 十一：IE8/9 兼容方案 ###

事实上 `IE8/IE9` 并不支持 `Media Queries`，但你可以使用下面的补丁进行兼容（补丁来自于开源社区）：

将上述代码放入你页面 `<body>` 标签内的任意位置即可

[f0b2c041627b4c45b7eb815d3c63b5e5.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/cef35f193539419097f9d26231a2dbc3.png
[ed026b9dc78c470bb1274ae76d039af9.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/a5bfe234a03640469f7a325471b64f77.png
[58c62f149b6e4e41ae259c67d869c7af.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/1dbd175fc254415f8d7c66e7045e8d20.png
[7d0091a59d0f48838954844f4c014e4f.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/1b288d7a181641699ef1931c78d0d9d5.png
[3a7c4003ac084878940fc21815d04da6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/b187436b56384a3ca40ce85052d4afb5.png
[85d2c3188eeb47bab044329d7bc0e3f6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/b9f140487d094b57a7b43229facbeadd.png
[3f2bab2db4e647958736f568a08909bb.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/a5519d93b50d42599b2230cc3a0bfcfd.png