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

渊婉

已于 2023-09-07 08:46:47 修改

阅读量1.9k

点赞数

分类专栏： Layui 文章标签： layui 前端 javascript

于 2023-09-06 16:27:45 首次发布

本文链接：https://blog.csdn.net/qq_61313896/article/details/132717527

版权

本文详细介绍了Layui的栅格系统，包括基本概念、布局规则、响应式规则以及各种场景下的应用，如列间距、列偏移、嵌套和流体容器。还提供了移动设备、桌面端的响应式布局案例，并给出了IE8/9的兼容方案。

摘要由CSDN通过智能技术生成

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

一：栅格布局的基本概念

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

二：栅格布局规则

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!-- 栅格布局-->
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.8.0/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <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），针对不同尺寸的屏幕进行相应的适配处理

超小屏幕 (手机<768px)	小屏幕 (平板≥768px)	中等屏幕 (桌面≥992px)	大型屏幕 (桌面≥1200px)	超大屏幕 (桌面≥1400px)
layui-container	auto	750px	970px	1170px	1330px
标记	xs	sm	md	lg	xl 2.8+
列对应类	layui-col-xs*	layui-col-sm*	layui-col-md*	layui-col-lg*	layui-col-xl*
总列数	12
响应行为	始终按比例水平排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列

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

<div class="layui-row">
  <div class="layui-col-xs12 layui-col-md8">
    <div class="grid-demo grid-demo-bg1">xs:12/12 | md:8/12</div>
  </div>
  <div class="layui-col-xs6 layui-col-md4">
    <div class="grid-demo">xs:6/12 | md:4/12