Layui布局总结：容器和栅格系统

最新推荐文章于 2023-04-16 10:42:08 发布
最新推荐文章于 2023-04-16 10:42:08 发布
阅读量824 收藏 3
点赞数
分类专栏： 3.Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YZSS17/article/details/113474921
版权

Layui 响应式布局 栅格系统 移动设备 桌面端
关键词由CSDN通过智能技术生成

总览

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/layui.css"  media="all">
</head>
<body>
    
          
<div class="layui-container">
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>始终等比例水平排列</legend>
  </fieldset>
   
  <div class="layui-row">
    <div class="layui-col-xs6">
      <div class="grid-demo grid-demo-bg1">6/12</div>
    </div>
    <div class="layui-col-xs6">
      <div class="grid-demo">6/12</div>
    </div>
  </div>
  <div class="layui-row">
    <div class="layui-col-xs3">
      <div class="grid-demo grid-demo-bg1">3/12</div>
    </div>
    <div class="layui-col-xs3">
      <div class="grid-demo">3/12</div>
    </div>
    <div class="layui-col-xs3">
      <div class="grid-demo grid-demo-bg1">3/12</div>
    </div>
    <div class="layui-col-xs3">
      <div class="grid-demo">3/12</div>
    </div>
  </div>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>移动设备、桌面端的组合响应式展现</legend>
  </fieldset>
   
  <div class="layui-row">
    <div class="layui-col-xs12 layui-col-md8">
      <div class="grid-demo grid-demo-bg1">移动：12/12、桌面：8/12</div>
    </div>
    <div class="layui-col-xs6 layui-col-md4">
      <div class="grid-demo">移动：6/12、桌面：4/12</div>
    </div>
    <div class="layui-col-xs6 layui-col-md12">
      <div class="grid-demo grid-demo-bg2">移动：6/12、桌面：12/12</div>
    </div>
  </div>
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>移动设备、平板、桌面端的复杂组合响应式展现</legend>
  </fieldset>
   
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      <div class="grid-demo grid-demo-bg1">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      <div class="grid-demo layui-bg-red">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      <div class="grid-demo layui-bg-blue">移动：4/12 | 平板：12/12 | 桌面：4/12</div>
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      <div class="grid-demo layui-bg-green">移动：4/12 | 平板：7/12 | 桌面：8/12</div>
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      <div class="grid-demo layui-bg-black">移动：4/12 | 平板：5/12 | 桌面：4/12</div>
    </div>
  </div>
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>常规布局：从小屏幕堆叠到桌面水平排列</legend>
  </fieldset>
   
  <div class="layui-row">
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo grid-demo-bg1">1/12</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">1/12</div>
    </div>
  </div>
   
  <div class="layui-row">
    <div class="layui-col-md9">
      <div class="grid-demo grid-demo-bg1">75%</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo">25%</div>
    </div>
  </div>
   
  <div class="layui-row">
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">33.33%</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo">33.33%</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">33.33%</div>
    </div>
  </div>
   
  <div class="layui-row">
    <div class="layui-col-md6">
      <div class="grid-demo grid-demo-bg1">50%</div>
    </div>
    <div class="layui-col-md6">
      <div class="grid-demo">50%</div>
    </div>
  </div>
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>列间隔</legend>
  </fieldset>
   
  <div class="layui-row layui-col-space1">
    <div class="layui-col-md3">
      <div class="grid-demo grid-demo-bg1">1/4</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo">1/4</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo grid-demo-bg1">1/4</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo">1/4</div>
    </div>
  </div>
   
  <div class="layui-row layui-col-space5">
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">1/3</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo">1/3</div>
    </div>
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">1/3</div>
    </div>
  </div>
   
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md9">
      <div class="grid-demo grid-demo-bg1">9/12</div>
    </div>
    <div class="layui-col-md3">
      <div class="grid-demo">3/12</div>
    </div>
  </div>
   
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md7">
      <div class="grid-demo grid-demo-bg1">7/12</div>
    </div>
    <div class="layui-col-md5">
      <div class="grid-demo">5/12</div>
    </div>
  </div>
   
  <div class="layui-row layui-col-space30">
    <div class="layui-col-md7">
      <div class="grid-demo grid-demo-bg1">7/12</div>
    </div>
    <div class="layui-col-md5">
      <div class="grid-demo">5/12</div>
    </div>
  </div>
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>列偏移</legend>
  </fieldset> 
   
  <div class="layui-row">
    <div class="layui-col-md4">
      <div class="grid-demo grid-demo-bg1">4/12</div>
    </div>
    <div class="layui-col-md4 layui-col-md-offset4">
      <div class="grid-demo">偏移4列</div>
    </div>
    <div class="layui-col-md1 layui-col-md-offset5">
      <div class="grid-demo grid-demo-bg1">偏移5列</div>
    </div>
    <div class="layui-col-md1">
      <div class="grid-demo">不偏移</div>
    </div>
  </div>
   
  <div class="layui-row">
    <div class="layui-col-md3 layui-col-md-offset3">
      <div class="grid-demo grid-demo-bg1">偏移3列</div>
    </div>
    <div class="layui-col-md3 layui-col-md-offset1">
      <div class="grid-demo">偏移1列</div>
    </div>
  </div>
   
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>栅格嵌套</legend>
  </fieldset> 
   
  <div class="layui-row">
    <div class="layui-col-md5">
      <div class="layui-row grid-demo">
        <div class="layui-col-md3">
          <div class="grid-demo grid-demo-bg1">内部列</div>
        </div>
        <div class="layui-col-md9">
          <div class="grid-demo grid-demo-bg2">内部列</div>
        </div>
        <div class="layui-col-md12">
          <div class="grid-demo grid-demo-bg3">内部列</div>
        </div>
      </div>
    </div>
    <div class="layui-col-md7">
      <div class="layui-row grid-demo grid-demo-bg1">
        <div class="layui-col-md12">
          <div class="grid-demo">内部列</div>
        </div>
        <div class="layui-col-md9">
          <div class="grid-demo grid-demo-bg2">内部列</div>
        </div>
        <div class="layui-col-md3">
          <div class="grid-demo grid-demo-bg3">内部列</div>
        </div>
      </div>
    </div>
  </div>
  
</div>
 
<div class="layui-fluid">
  <fieldset class="layui-elem-field layui-field-title">
    <legend>流体容器（宽度自适应，不固定）</legend>
  </fieldset>
  <div class="layui-row">
    <div class="layui-col-sm3">
      <div class="grid-demo grid-demo-bg1">25%</div>
    </div>
    <div class="layui-col-sm3">
      <div class="grid-demo">25%</div>
    </div>
    <div class="layui-col-sm3">
      <div class="grid-demo grid-demo-bg1">25%</div>
    </div>
    <div class="layui-col-sm3">
      <div class="grid-demo">25%</div>
    </div>
  </div>
</div>
 
          
<script src="layui.js" charset="utf-8"></script>

<script>
 
</script>

</body>
</html>
叶子桑桑
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui01
无区新手的博客
06-07 413
雷哥整理 概述 下载：https://www.layui.com/ 下载文件说明 css 样式 font:字体 image:图片 lay: |--models layui.all.js 包含了所有模块的js layui.js 框架 如果要使用必须使用layui.use(["table","layer","laydate","form"],function(){}) 学习的内容 图标 按钮 导航菜单 选项卡 进度条 面板+布局 徽章 时间...
layui布局
zhouzhou_98的博客
10-02 1337
布局 相关样式 layui-row |-- layui-col-xs6移动设备占比 |-- layui-col-sm6平板设备占比 |-- layui-col-md6桌面设置占比 详细代码： <%-- Created by IntelliJ IDEA. User: Lenovo Date:...
Layui 字段集区块、面板和Tab选项卡
Charge8的博客
07-15 1334
一、字段集区块 两种：字段集区块 - 横线风格 和 字段集区块 - 默认风格 <fieldset class="layui-elem-field layui-field-title"> <legend>字段集区块 - 横线风格</legend> <div class="layui-field-box"&g...
LayUI栅格布局
马农莎的博客
08-24 1908
栅格系统 为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。 一、栅格布局规则： 采用 layui-row 来定义行，如： 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中： 变量md 代表的是不同屏幕下的标记（
基于grid布局实现的响应式栅格系统
09-10
响应式栅格系统是网页设计中的一...总结来说，通过CSS Grid布局和SCSS，我们可以创建出强大且灵活的响应式栅格系统，适应不同设备和屏幕尺寸。理解并熟练运用这些概念和技术，将有助于构建出优雅、适应性强的Web界面。
Bootstrap布局之栅格系统学习笔记
08-30
Bootstrap布局之栅格系统学习笔记 Bootstrap 是一个流行的前端框架，它提供了一个响应式的栅格系统，用于快速创建响应式的网页布局。栅格系统是Bootstrap布局的核心组件之一，今天我们将详细介绍栅格系统的学习笔记...
Bootstrap布局之栅格系统详解
09-02
Bootstrap栅格系统是网页设计和开发中的一个强大工具，它是一种用于创建响应式布局的方法，旨在简化跨设备的网页设计工作。Bootstrap栅格系统基于12列的网格布局，允许开发者灵活地分配页面内容的空间，根据不同的...
bootstrap栅格系统响应式布局
02-05
Bootstrap栅格系统是Web开发中的一个关键工具，它允许开发者创建具有高度响应性和自适应性的网页布局。这个系统是Bootstrap框架的核心组成部分，旨在简化多设备显示的复杂性，确保网页在PC、平板和手机等不同屏幕...
浅谈CSS 栅格系统布局原理分析
09-27
【CSS 栅格系统布局原理分析】 在网页设计中，CSS 栅格系统是一种常见的布局方式，它使得页面设计能够适应各种屏幕尺寸，提供了一种响应式的解决方案。本文将深入探讨CSS栅格系统的基本原理，并以Bootstrap、...
layui-选项卡
OpenSource_的博客
08-08 1342
layui-选项卡 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title&...
layui.laypage
yifanSJ的博客
02-06 862
layui 开门见山 ： 默认分页 自定义主题 ： 赤橙黄绿青蓝紫 神马的，随便设:-O 自定义文本 ： 上一页、下一页、首页、末页统统被替换 不显示首页、末页 开启 URL hash 切换分页后看地址栏的变化（#后面的fenye名字可以随便定义），
layui
persistence_PSH的博客
03-28 571
layui （谐音：类ui）是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，属于轻量级框架，适用于开发后端模式，在服务器端页面上有良好的效果，是提供给后端开发人员的ui框架。 1、 下载及其目录 官网：https://www.layui.com/ 在我们的下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下 下载完成后解压，创建一个新项目，将解压后的文件直接拷贝过来，其中除了layui以外都可以删除
layui栅格系统
taiyangwojiu的博客
12-10 2924
栅格系统 栅格系统 layui栅格系统将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。 栅格布局规则 响应式规则 响应式公共类 布局容器 列间距 列偏移 栅格嵌套 一、栅格布局规则 1. 采用 layui-row 来定义行，如：<div class="layui-row">...
fieldset标签及相关设置
shixihaoma的专栏
08-07 5310
在HTML中
Layui的布局 —— 栅格系统
Nidhogg_com的博客
08-26 5772
Layui插件： 今天要说的是在Visual Studio 2015开发中会用到的一个很重要插件 – Layui插件。 Layui插件中有很多功能，今天就介绍最常用的几个，让大家认识Layui。 Layui的布局 —— 栅格系统： 栅格布局规则： 采用 layui-row 来定义行，如： 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中： 1.变量md 代表的是不同屏幕下的标记（可选值见下文） 2.变量* 代表的是该列所占用的12等分数（如6/12
Layui布局和栅格系统
最新发布
qq_34820433的博客
04-16 968
本节课我们来开始了解 Layui 响应式布局的栅格系统。
layui的栅格响应式布局
qq_44658941的博客
01-30 75
常用类 一.布局容器 　　1.将栅格放入一个带有class="layui-container"的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。 　　2.将栅格或其它元素放入一个带有class="layui-fluid"的容器中，那么宽度将不会固定，而是 100% 适应 <div class="layui-container">常规布局</div> &...
前端那些事之layui篇---实现栅格功能
weixin_33795806的博客
02-18 1128
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap响应式布局指南：快速上手与栅格系统应用
4. **布局容器和栅格系统**： Bootstrap 的栅格系统是其响应式设计的核心。`.container` 容器用于组织内容，其内部包含12列的栅格系统。通过 `.row` 来创建行，然后使用 `.col-md-XX`（其中XX代表列数，范围是1-12...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值