master

分支 (1)

标签 (1)

管理

管理

master

v2.0

layui-official-website-static
/
layout.html



<!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">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <script>
  ;!function(){self!==parent&&(location.href="https://www.baidu.com/")}();
  </script>
  <link rel="stylesheet" href="layui.css"   media="all">
  <link rel="stylesheet" href="global.css"  media="all">
</head>
<body>
  <style>
    .site-dir{
      z-index: 19891015;
        position: fixed;
        top: 513px;
        left: 88%;
        margin-left: -15px;
      display: block;
      box-shadow: none;
    border: 1px solid #d2d2d2;
    padding: 0.5%;
    }
    </style>

<div class="layui-header header header-doc">
  <div class="layui-container">
    <a class="logo" href="#" tppabs="https://www.layui.com/">
      <img src="logo.png" tppabs="https://res.layui.com/static/images/layui/logo.png" alt="layui">
    </a>
    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
    <div class="layui-hide-xs site-notice"></div>

    <ul class="layui-nav" id="LAY_NAV_TOP">
      <li class="layui-nav-item layui-this">
        <a href="index.html" tppabs="https://www.layui.com/doc/">文档</a>
      </li>
      <li class="layui-nav-item ">
        <a href="demo/index.htm" >示例</a>
      </li>


    </ul>
  </div>
</div>

<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<ul class="site-dir">
    <div class="layui-layer-title" style="cursor: move;">目录</div>
  <li><a href="#grid"><cite>栅格系统</cite></a></li>
  <ul style="margin-left: 15px;">
    <li><a href="#grid-rule">栅格布局规则</a></li>
    <li><a href="#grid-resp">响应式规则</a></li>
    <li><a href="#grid-class">响应式公共类</a></li>
    <li><a href="#grid-container">布局容器</a></li>
    <li><a href="#grid-space">列间距 <span class="layui-badge-dot"></span></a></li>
    <li><a href="#grid-offset">列偏移</a></li>
    <li><a href="#grid-nesting">栅格嵌套</a></li>
    <li><a href="#grid-iepatch">IE8/9兼容方案</a></li>
  </ul>

  <li><a href="#admin"><cite>管理界面布局</cite></a></li>
</ul>
<div class="layui-container layui-row">

<div class="layui-col-md3">
  <div class="layui-panel site-menu">
    <ul class="layui-menu layui-menu-lg">
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          基础说明
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="index.html" tppabs="https://www.layui.com/doc/">
                <span>开始使用 </span>
                <span class="layui-font-12 layui-font-gray">Getting Started</span>
              </a>

            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="infrastructure.html" tppabs="https://www.layui.com/doc/base/infrastructure.html">
                <span>底层方法 </span>
                <span class="layui-font-12 layui-font-gray">基础支撑</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="element.html" tppabs="https://www.layui.com/doc/base/element.html">
                <span>页面元素 </span>
                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="modules.html" tppabs="https://www.layui.com/doc/base/modules.html">
                <span>模块规范 </span>
                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="faq.html" tppabs="https://www.layui.com/doc/base/faq.html">
                <span>常见问题 </span>
                <span class="layui-font-12 layui-font-gray">FAQ</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="changelog.html" tppabs="https://www.layui.com/doc/base/changelog.html">
                <span>更新日志 </span>
                <span class="layui-font-12 layui-font-gray">changelog</span>

                  <span class="layui-badge-dot"></span>

              </a>
            </div>
          </li>
        </ul>
      </li>

      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          页面元素
        </div>
        <hr>
        <ul>
          <li class="layui-menu-item-checked2">
            <div class="layui-menu-body-title">
              <a href="layout.html" tppabs="https://www.layui.com/doc/element/layout.html">
                <span>布局 </span>
                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="color.html" tppabs="https://www.layui.com/doc/element/color.html">
                <span>颜色 </span>
                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="icon.html" tppabs="https://www.layui.com/doc/element/icon.html">
                <span>图标 </span>
                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="anim.html" tppabs="https://www.layui.com/doc/element/anim.html">
                <span>动画 </span>
                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="button.html" tppabs="https://www.layui.com/doc/element/button.html">
                <span>按钮 </span>
                <span class="layui-font-12 layui-font-gray">button</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="form.html" tppabs="https://www.layui.com/doc/element/form.html">
                <span>表单 </span>
                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="nav.html" tppabs="https://www.layui.com/doc/element/nav.html">
                <span>导航 </span>
                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="menu.html" tppabs="https://www.layui.com/doc/element/menu.html">
                <span>菜单 </span>
                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>

                  <span class="layui-badge-dot"></span>

              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="tab.html" tppabs="https://www.layui.com/doc/element/tab.html">
                <span>选项卡 </span>
                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="progress.html" tppabs="https://www.layui.com/doc/element/progress.html">
                <span>进度条 </span>
                <span class="layui-font-12 layui-font-gray">progress</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="panel.html" tppabs="https://www.layui.com/doc/element/panel.html">
                <span>面板 </span>
                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="table.html" tppabs="https://www.layui.com/doc/element/table.html">
                <span>表格 </span>
                <span class="layui-font-12 layui-font-gray">静态 table</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="badge.html" tppabs="https://www.layui.com/doc/element/badge.html">
                <span>徽章 </span>
                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="timeline.html" tppabs="https://www.layui.com/doc/element/timeline.html">
                <span>时间线 </span>
                <span class="layui-font-12 layui-font-gray">timeline</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="auxiliar.html" tppabs="https://www.layui.com/doc/element/auxiliar.html">
                <span>辅助 </span>
                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
              </a>
            </div>
          </li>
        </ul>
      </li>

      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          内置模块
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="layer.html" tppabs="https://www.layui.com/doc/modules/layer.html">
                <span>弹出层 </span>
                <span class="layui-font-12 layui-font-gray">layer</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laydate.html" tppabs="https://www.layui.com/doc/modules/laydate.html">
                <span>日期与时间选择 </span>
                <span class="layui-font-12 layui-font-gray">laydate</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laypage.html" tppabs="https://www.layui.com/doc/modules/laypage.html">
                <span>分页 </span>
                <span class="layui-font-12 layui-font-gray">laypage</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laytpl.html" tppabs="https://www.layui.com/doc/modules/laytpl.html">
                <span>模板引擎 </span>
                <span class="layui-font-12 layui-font-gray">laytpl</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="table-1.html" tppabs="https://www.layui.com/doc/modules/table.html">
                <span>数据表格 </span>
                <span class="layui-font-12 layui-font-gray">table</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="form-1.html" tppabs="https://www.layui.com/doc/modules/form.html">
                <span>表单 </span>
                <span class="layui-font-12 layui-font-gray">form</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="upload.html" tppabs="https://www.layui.com/doc/modules/upload.html">
                <span>文件上传 </span>
                <span class="layui-font-12 layui-font-gray">upload</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="dropdown.html" tppabs="https://www.layui.com/doc/modules/dropdown.html">
                <span>下拉菜单 </span>
                <span class="layui-font-12 layui-font-gray">dropdown</span>

                  <span class="layui-badge-dot"></span>

              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="transfer.html" tppabs="https://www.layui.com/doc/modules/transfer.html">
                <span>穿梭框 </span>
                <span class="layui-font-12 layui-font-gray">transfer</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="tree.html" tppabs="https://www.layui.com/doc/modules/tree.html">
                <span>树形组件 </span>
                <span class="layui-font-12 layui-font-gray">tree</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="colorpicker.html" tppabs="https://www.layui.com/doc/modules/colorpicker.html">
                <span>颜色选择器 </span>
                <span class="layui-font-12 layui-font-gray">colorpicker</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="element-1.html" tppabs="https://www.layui.com/doc/modules/element.html">
                <span>常用元素操作 </span>
                <span class="layui-font-12 layui-font-gray">element</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="slider.html" tppabs="https://www.layui.com/doc/modules/slider.html">
                <span>滑块 </span>
                <span class="layui-font-12 layui-font-gray">slider</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="rate.html" tppabs="https://www.layui.com/doc/modules/rate.html">
                <span>评分 </span>
                <span class="layui-font-12 layui-font-gray">rate</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="carousel.html" tppabs="https://www.layui.com/doc/modules/carousel.html">
                <span>轮播 </span>
                <span class="layui-font-12 layui-font-gray">carousel</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="flow.html" tppabs="https://www.layui.com/doc/modules/flow.html">
                <span>流加载 </span>
                <span class="layui-font-12 layui-font-gray">flow</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="util.html" tppabs="https://www.layui.com/doc/modules/util.html">
                <span>工具组件 </span>
                <span class="layui-font-12 layui-font-gray">util</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="code.html" tppabs="https://www.layui.com/doc/modules/code.html">
                <span>代码高亮显示 </span>
                <span class="layui-font-12 layui-font-gray">code</span>
              </a>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="layui-hide-v"> - </div>
</div>


  <div class="layui-col-md9 site-content">
    <h1 class="site-h1">栅格系统与后台布局</h1>
    <blockquote class="layui-elem-quote">
      如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和常见的管理系统布局方案，这意味着你可以采用 layui 排版你的响应式网站和后台管理系统的界面了。layui 的栅格采用业界比较常见的 12 等分规则，内置手机、平板、PC 桌面中大型屏幕的多终端适配处理，最低能支持到 ie8。而你应当更欣喜的是，layui 终于开放了它经典的管理系统布局方案，快速搭建一个属于你的管理系统将变得十分轻松自如。
    </blockquote>


    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="grid">栅格系统</a></legend>
    </fieldset>
    <div class="site-text">
      <p>为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。</p>

      <a name="grid-rule"></a>
      <p>一、栅格布局规则：</p>
      <hr>
      <table class="layui-table">
        <colgroup>
          <col width="50">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <td>1.</td>
            <td>采用 <em>layui-row</em> 来定义行，如：<em>&lt;div class="layui-row">&lt;/div></em> </td>
          </tr>
          <tr>
            <td>2.</td>
            <td>
              采用类似 <em>layui-col-md*</em> 这样的预设类来定义一组列（column），且放在行（row）内。其中：
              <div class="layui-text">
                <ul>
                  <li>变量<em>md</em> 代表的是不同屏幕下的标记（可选值见下文）</li>
                  <li>变量<em>*</em> 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12</li>
                  <li>如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。</li>
                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td>3.</td>
            <td>列可以同时出现最多四种不同的组合，分别是：<em>xs</em>（超小屏幕，如手机）、<em>sm</em>（小屏幕，如平板）、<em>md</em>（桌面中等屏幕）、<em>lg</em>（桌面大型屏幕），以呈现更加动态灵活的布局。</td>
          </tr>
          <tr>
            <td>4.</td>
            <td>可对列追加类似 <em>layui-col-space5</em>、 <em>layui-col-md-offset3</em> 这样的预设类来定义列的间距和偏移。</td>
          </tr>
          <tr>
            <td>5.</td>
            <td>最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！</td>
          </tr>
        </tbody>
      </table>

      <p>示例（这里只是大致列举两个，更多实例请前往 <a href="javascript:if(confirm('https://www.layui.com/demo/grid.html  \n\n���ļ��޷��� Teleport Ultra ����, ��Ϊ ����һ�����·���ⲿ������Ϊ������ʼ��ַ�ĵ�ַ��  \n\n�����ڷ������ϴ���?'))window.location='https://www.layui.com/demo/grid.html'" tppabs="https://www.layui.com/demo/grid.html" target="_blank">示例-栅格</a> 查看）</p>

      <div class="layui-row">
        <div class="layui-col-md9">
          <div class="grid-demo">你的内容 9/12</div>
        </div>
        <div class="layui-col-md3">
          <div class="grid-demo grid-demo-bg1">你的内容 3/12</div>
        </div>
      </div>

      <br>

      <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
          <div class="grid-demo grid-demo-bg1">50% | 33.33% | 33.33%</div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
          <div class="grid-demo">50% | 66.67% | 33.33%</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
          <div class="grid-demo grid-demo-bg1">33.33% | 100% | 33.33%</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
          <div class="grid-demo grid-demo-bg2">33.33% | 50% | 66.67%</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
          <div class="grid-demo">33.33% | 50% | 33.33%</div>
        </div>
      </div>

      <pre class="layui-code" lay-title="示例">
&lt;div class="layui-container"&gt;
  常规布局（以中型屏幕桌面为例）：
  &lt;div class=&quot;layui-row&quot;&gt;
    &lt;div class=&quot;layui-col-md9&quot;&gt;
      你的内容 9/12
    &lt;/div&gt;
    &lt;div class=&quot;layui-col-md3&quot;&gt;
      你的内容 3/12
    &lt;/div&gt;
  &lt;/div&gt;

  移动设备、平板、桌面端的不同表现：
  &lt;div class=&quot;layui-row&quot;&gt;
    &lt;div class=&quot;layui-col-xs6 layui-col-sm6 layui-col-md4&quot;&gt;
      移动：6/12 | 平板：6/12 | 桌面：4/12
    &lt;/div&gt;
    &lt;div class=&quot;layui-col-xs6 layui-col-sm6 layui-col-md4&quot;&gt;
      移动：6/12 | 平板：6/12 | 桌面：4/12
    &lt;/div&gt;
    &lt;div class=&quot;layui-col-xs4 layui-col-sm12 layui-col-md4&quot;&gt;
      移动：4/12 | 平板：12/12 | 桌面：4/12
    &lt;/div&gt;
    &lt;div class=&quot;layui-col-xs4 layui-col-sm7 layui-col-md8&quot;&gt;
      移动：4/12 | 平板：7/12 | 桌面：8/12
    &lt;/div&gt;
    &lt;div class=&quot;layui-col-xs4 layui-col-sm5 layui-col-md4&quot;&gt;
      移动：4/12 | 平板：5/12 | 桌面：4/12
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
      </pre>

      <a name="grid-resp"></a>
      <br>
      <p>二、响应式规则：</p>
      <hr>
      <p>栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理</p>
      <table class="layui-table">
        <colgroup>
          <col width="160">
        </colgroup>
        <thead>
          <th></th>
          <th>超小屏幕<br>(手机<768px)</th>
          <th>小屏幕<br>(平板≥768px)</th>
          <th>中等屏幕<br>(桌面≥992px)</th>
          <th>大型屏幕<br>(桌面≥1200px)</th>
        </thead>
        <tbody>
          <tr>
            <td><em>.layui-container</em>的值</td>
            <td>auto</td>
            <td>750px</td>
            <td>970px</td>
            <td>1170px</td>
          </tr>
          <tr>
            <td>标记</td>
            <td>xs</td>
            <td>sm</td>
            <td>md</td>
            <td>lg</td>
          </tr>
          <tr>
            <td>列对应类<br>* 为1-12的等分数值</td>
            <td>layui-col-xs*</td>
            <td>layui-col-sm*</td>
            <td>layui-col-md*</td>
            <td>layui-col-lg*</td>
          </tr>
          <tr>
            <td>总列数</td>
            <td colspan="4">12</td>
          </tr>
          <tr>
            <td>响应行为</td>
            <td>始终按设定的比例水平排列</td>
            <td colspan="3">在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列</td>
          </tr>
        </tbody>
      </table>

      <a name="grid-class"></a>
      <br>
      <p>三、响应式公共类：</p>
      <hr>
       <table class="layui-table">
        <colgroup>
          <col width="150">
          <col>
        </colgroup>
        <thead>
          <tr>
            <th>类名（class）</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>layui-show-*-block</td>
            <td class="layui-text">定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg</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>

      <a name="grid-container"></a>
      <br>
      <p>四、布局容器：</p>
      <hr>
      <p>将栅格放入一个带有 <em>class="layui-container"</em> 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。</p>
      <pre class="layui-code">
&lt;div class=&quot;layui-container&quot;&gt;
  &lt;div class=&quot;layui-row&quot;&gt;
    ……
  &lt;/div&gt;
&lt;/div&gt;
      </pre>
      <p>当然，你还可以不固定容器宽度。将栅格或其它元素放入一个带有 <em>class="layui-fluid"</em> 的容器中，那么宽度将不会固定，而是 100% 适应</p>
      <pre class="layui-code">
&lt;div class=&quot;layui-fluid&quot;&gt;
  ……
&lt;/div&gt;
      </pre>

      <a name="grid-space"></a>
      <br>
      <p>五、列间距：</p>
      <hr>
      <table class="layui-table">
        <colgroup>
          <col width="200">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <td colspan="2">通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：</td>
          </tr>
          <tr>
            <td>
              layui-col-space1
              <br>layui-col-space2
              <br>layui-col-space4
              <br>layui-col-space5
              <br>layui-col-space6
              <br>layui-col-space8
              <br>layui-col-space10
              <br>layui-col-space12
              <br>layui-col-space14
              <br>layui-col-space15
              <br>layui-col-space16
              <br>layui-col-space18
              <br>layui-col-space20
              <br>layui-col-space22
              <br>layui-col-space24
              <br>layui-col-space25
              <br>layui-col-space26
              <br>layui-col-space28
              <br>layui-col-space30
            </td>
            <td>支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔</td>
          </tr>
        </tbody>
      </table>
      <p>下面是一个简单的例子，列间距为10px：</p>
      <div class="layui-row layui-col-space10">
        <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>
      <pre class="layui-code">
&lt;div class=&quot;layui-row layui-col-space10&quot;&gt;
  &lt;div class=&quot;layui-col-md4&quot;&gt;
    1/3
  &lt;/div&gt;
  &lt;div class=&quot;layui-col-md4&quot;&gt;
    1/3
  &lt;/div&gt;
  &lt;div class=&quot;layui-col-md4&quot;&gt;
    1/3
  &lt;/div&gt;
&lt;/div&gt;
      </pre>
      <p>如果需要的间距高于30px（一般不常见），请采用偏移，下文继续讲解</p>

      <a name="grid-offset"></a>
      <br>
      <p>六、列偏移：</p>
      <hr>
      <p>
        对列追加 类似 <em>layui-col-md-offset*</em> 的预设类，从而让列向右偏移。其中 <em>*</em> 号代表的是偏移占据的列数，可选中为 1 - 12。
        <br>如：<em>layui-col-md-offset3</em>，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度
      </p>
      <p>下面是一个采用「列偏移」机制让两个列左右对齐的实例</p>
      <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>
      <pre class="layui-code">
&lt;div class=&quot;layui-row&quot;&gt;
  &lt;div class=&quot;layui-col-md4&quot;&gt;
    4/12
  &lt;/div&gt;
  &lt;div class=&quot;layui-col-md4 layui-col-md-offset4&quot;&gt;
    偏移4列，从而在最右
  &lt;/div&gt;
&lt;/div&gt;
      </pre>
      <p>请注意，列偏移可针对不同屏幕的标准进行设定，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。</p>

      <a name="grid-nesting"></a>
      <br>
      <p>七、栅格嵌套：</p>
      <hr>
      <p>理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（<em>layui-col-md*</em>）中插入一个行元素（<em>layui-row</em>），即可完成嵌套。下面是一个简单的例子：</p>
      <div class="layui-row layui-col-space5">
        <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>
      <pre class="layui-code">
&lt;div class=&quot;layui-row layui-col-space5&quot;&gt;
  &lt;div class=&quot;layui-col-md5&quot;&gt;
    &lt;div class=&quot;layui-row grid-demo&quot;&gt;
      &lt;div class=&quot;layui-col-md3&quot;&gt;
        内部列
      &lt;/div&gt;
      &lt;div class=&quot;layui-col-md9&quot;&gt;
        内部列
      &lt;/div&gt;
      &lt;div class=&quot;layui-col-md12&quot;&gt;
        内部列
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;layui-col-md7&quot;&gt;
    &lt;div class=&quot;layui-row grid-demo grid-demo-bg1&quot;&gt;
      &lt;div class=&quot;layui-col-md12&quot;&gt;
        内部列
      &lt;/div&gt;
      &lt;div class=&quot;layui-col-md9&quot;&gt;
        内部列
      &lt;/div&gt;
      &lt;div class=&quot;layui-col-md3&quot;&gt;
        内部列
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
      </pre>
      <a name="grid-iepatch"></a>
      <br>
      <p>八、让IE8/9兼容栅格：</p>
      <hr>
      <p>事实上IE8和IE9并不支持媒体查询（Media Queries），但你可以使用下面的补丁完美兼容！该补丁来自于开源社区：</p>
      <pre class="layui-code">
&lt;!-- 让IE8/9支持媒体查询，从而兼容栅格 --&gt;
&lt;!--[if lt IE 9]&gt;
  &lt;script src=&quot;https://cdn.staticfile.org/html5shiv/r29/html5.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;
&lt;![endif]--&gt;
      </pre>
      <p>将上述代码放入你页面 <em>&lt;body&gt;</em> 标签内的任意位置</p>
    </div>


    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="admin">管理系统界面布局</a></legend>
    </fieldset>
    <div class="site-text">
      <p>layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码，你可以前往示例页面：<a href="javascript:if(confirm('https://www.layui.com/demo/layout-admin.html  \n\n���ļ��޷��� Teleport Ultra ����, ��Ϊ ����һ�����·���ⲿ������Ϊ������ʼ��ַ�ĵ�ַ��  \n\n�����ڷ������ϴ���?'))window.location='https://www.layui.com/demo/layout-admin.html'" tppabs="https://www.layui.com/demo/layout-admin.html" target="_blank">预览布局效果</a></p>
      <pre class="layui-code" lay-height="330px" lay-lang="HTML">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;&gt;
  &lt;title&gt;layout 管理系统大布局 - Layui&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;./layui/css/layui.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;layui-layout layui-layout-admin&quot;&gt;
  &lt;div class=&quot;layui-header&quot;&gt;
    &lt;div class=&quot;layui-logo layui-hide-xs layui-bg-black&quot;&gt;layout demo&lt;/div&gt;
    &lt;!-- 头部区域（可配合layui 已有的水平导航） --&gt;
    &lt;ul class=&quot;layui-nav layui-layout-left&quot;&gt;
      &lt;!-- 移动端显示 --&gt;
      &lt;li class=&quot;layui-nav-item layui-show-xs-inline-block layui-hide-sm&quot; lay-header-event=&quot;menuLeft&quot;&gt;
        &lt;i class=&quot;layui-icon layui-icon-spread-left&quot;&gt;&lt;/i&gt;
      &lt;/li&gt;

      &lt;li class=&quot;layui-nav-item layui-hide-xs&quot;&gt;&lt;a href=&quot;&quot;&gt;nav 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;layui-nav-item layui-hide-xs&quot;&gt;&lt;a href=&quot;&quot;&gt;nav 2&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;layui-nav-item layui-hide-xs&quot;&gt;&lt;a href=&quot;&quot;&gt;nav 3&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;layui-nav-item&quot;&gt;
        &lt;a href=&quot;javascript:;&quot;&gt;nav groups&lt;/a&gt;
        &lt;dl class=&quot;layui-nav-child&quot;&gt;
          &lt;dd&gt;&lt;a href=&quot;&quot;&gt;menu 11&lt;/a&gt;&lt;/dd&gt;
          &lt;dd&gt;&lt;a href=&quot;&quot;&gt;menu 22&lt;/a&gt;&lt;/dd&gt;
          &lt;dd&gt;&lt;a href=&quot;&quot;&gt;menu 33&lt;/a&gt;&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class=&quot;layui-nav layui-layout-right&quot;&gt;
      &lt;li class=&quot;layui-nav-item layui-hide layui-show-md-inline-block&quot;&gt;
        &lt;a href=&quot;javascript:;&quot;&gt;
          &lt;img src=&quot;//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg&quot; class=&quot;layui-nav-img&quot;&gt;
          tester
        &lt;/a&gt;
        &lt;dl class=&quot;layui-nav-child&quot;&gt;
          &lt;dd&gt;&lt;a href=&quot;&quot;&gt;Your Profile&lt;/a&gt;&lt;/dd&gt;
          &lt;dd&gt;&lt;a href=&quot;&quot;&gt;Settings&lt;/a&gt;&lt;/dd&gt;
          &lt;dd&gt;&lt;a href=&quot;&quot;&gt;Sign out&lt;/a&gt;&lt;/dd&gt;
        &lt;/dl&gt;
      &lt;/li&gt;
      &lt;li class=&quot;layui-nav-item&quot; lay-header-event=&quot;menuRight&quot; lay-unselect&gt;
        &lt;a href=&quot;javascript:;&quot;&gt;
          &lt;i class=&quot;layui-icon layui-icon-more-vertical&quot;&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

  &lt;div class=&quot;layui-side layui-bg-black&quot;&gt;
    &lt;div class=&quot;layui-side-scroll&quot;&gt;
      &lt;!-- 左侧导航区域（可配合layui已有的垂直导航） --&gt;
      &lt;ul class=&quot;layui-nav layui-nav-tree&quot; lay-filter=&quot;test&quot;&gt;
        &lt;li class=&quot;layui-nav-item layui-nav-itemed&quot;&gt;
          &lt;a class=&quot;&quot; href=&quot;javascript:;&quot;&gt;menu group 1&lt;/a&gt;
          &lt;dl class=&quot;layui-nav-child&quot;&gt;
            &lt;dd&gt;&lt;a href=&quot;javascript:;&quot;&gt;menu 1&lt;/a&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;a href=&quot;javascript:;&quot;&gt;menu 2&lt;/a&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;a href=&quot;javascript:;&quot;&gt;menu 3&lt;/a&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;a href=&quot;&quot;&gt;the links&lt;/a&gt;&lt;/dd&gt;
          &lt;/dl&gt;
        &lt;/li&gt;
        &lt;li class=&quot;layui-nav-item&quot;&gt;
          &lt;a href=&quot;javascript:;&quot;&gt;menu group 2&lt;/a&gt;
          &lt;dl class=&quot;layui-nav-child&quot;&gt;
            &lt;dd&gt;&lt;a href=&quot;javascript:;&quot;&gt;list 1&lt;/a&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;a href=&quot;javascript:;&quot;&gt;list 2&lt;/a&gt;&lt;/dd&gt;
            &lt;dd&gt;&lt;a href=&quot;&quot;&gt;超链接&lt;/a&gt;&lt;/dd&gt;
          &lt;/dl&gt;
        &lt;/li&gt;
        &lt;li class=&quot;layui-nav-item&quot;&gt;&lt;a href=&quot;javascript:;&quot;&gt;click menu item&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;layui-nav-item&quot;&gt;&lt;a href=&quot;&quot;&gt;the links&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;layui-body&quot;&gt;
    &lt;!-- 内容主体区域 --&gt;
    &lt;div style=&quot;padding: 15px;&quot;&gt;内容主体区域。记得修改 layui.css 和 js 的路径&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class=&quot;layui-footer&quot;&gt;
    &lt;!-- 底部固定区域 --&gt;
    底部固定区域
  &lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;./layui/layui.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
//JS
layui.use([&#x27;element&#x27;, &#x27;layer&#x27;, &#x27;util&#x27;], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;

  //头部事件
  util.event(&#x27;lay-header-event&#x27;, {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg(&#x27;展开左侧菜单的操作&#x27;, {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: &#x27;&lt;div style=&quot;padding: 15px;&quot;&gt;处理右侧面板的操作&lt;/div&gt;&#x27;
        ,area: [&#x27;260px&#x27;, &#x27;100%&#x27;]
        ,offset: &#x27;rt&#x27; //右上角
        ,anim: 5
        ,shadeClose: true
      });
    }
  });

});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
      </pre>
      <p></p>
    </div>


    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="docend">结语</a></legend>
    </fieldset>
    <div class="site-text">
      <p></p>
    </div>

    <div class="layui-elem-quote">
  <p>layui - 在每一个细节中，用心与你沟通</p>
</div>

  </div>
</div>


<div class="layui-footer footer footer-doc">
    <p>致敬layui</p>


</div>
<script>
window.global = {
  pageType: 'doc'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
</script>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
<div class="site-mobile-shade"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script>


</body>
</html>