layui的栅格响应式布局

常用类

一.布局容器

　　1.将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。

　　2.将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应

<div class="layui-container">常规布局</div>
<div class="layui-fluid">宽度100%布局</div>

　　基础知识

1. 采用 layui-row 来定义行，如：<div class="layui-row"></div>
2. 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：
  • 变量md 代表的是不同屏幕下的标记（可选值见下文）
  • 变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
  • 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
  • layui-col-md4    表示 4/12列
3.

列可以同时出现最多四种不同的组合，分别是：xs（移动端  超小屏幕，如手机）、sm（小屏幕，如平板）、md（电脑  桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

layui-col-xs4     #定义移动端的四列

layui-col-sm4      #定义平板的4列

layui-col-md4      #定义电脑桌面的4列

layui-col-lg4   　　#定义桌面大型屏幕的4列
4.

可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

layui-col-space10　　　　#控制列间距    10px 单位px

layui-col-md-offset*  　　#控制列向右偏移几列
5. 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

eg:以中型桌面为例

<div class="layui-container">   <--定义常规主屏幕 -->
	<div class="layui-row layui-col-space10">   <-- 定义一行 共有12列  列间距为10px-->
		<div class="layui-col-md4" style="background-color: red;">   <-- 定义4列 -->
			daf
		</div>
			<div class="layui-col-md4 layui-col-md-offset4" style="background-color: red;">  <-- 定义4列 并使这四列向右偏移至屏幕最右边-->
			daf
		</div>
	</div>
</div>

二、响应式规则：

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

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

三.基本的后台布局

codelayui.code
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">   <-- 定义移动端的视口 -->
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="../src/css/layui.css">   <-- 改成自己的layui文件路径 -->
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">所有商品</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">内容主体区域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script src="../src/layui.js"></script>  <-- 改成自己的layui文件路径 -->
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>
</body>
</html>

　　

 

codelayui.code

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <title>layout 后台大布局 - Layui</title>
  7. <link rel="stylesheet" href="../src/css/layui.css">
  8. </head>
  9. <body class="layui-layout-body">
  10. <div class="layui-layout layui-layout-admin">
  11. <div class="layui-header">
  12. <div class="layui-logo">layui 后台布局</div>
  13. <!-- 头部区域（可配合layui已有的水平导航） -->
  14. <ul class="layui-nav layui-layout-left">
  15. <li class="layui-nav-item"><a href="">控制台</a></li>
  16. <li class="layui-nav-item"><a href="">商品管理</a></li>
  17. <li class="layui-nav-item"><a href="">用户</a></li>
  18. <li class="layui-nav-item">
  19. <a href="javascript:;">其它系统</a>
  20. <dl class="layui-nav-child">
  21. <dd><a href="">邮件管理</a></dd>
  22. <dd><a href="">消息管理</a></dd>
  23. <dd><a href="">授权管理</a></dd>
  24. </dl>
  25. </li>
  26. </ul>
  27. <ul class="layui-nav layui-layout-right">
  28. <li class="layui-nav-item">
  29. <a href="javascript:;">
  30. <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
  31. 贤心
  32. </a>
  33. <dl class="layui-nav-child">
  34. <dd><a href="">基本资料</a></dd>
  35. <dd><a href="">安全设置</a></dd>
  36. </dl>
  37. </li>
  38. <li class="layui-nav-item"><a href="">退了</a></li>
  39. </ul>
  40. </div>
  42. <div class="layui-side layui-bg-black">
  43. <div class="layui-side-scroll">
  44. <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
  45. <ul class="layui-nav layui-nav-tree" lay-filter="test">
  46. <li class="layui-nav-item layui-nav-itemed">
  47. <a class="" href="javascript:;">所有商品</a>
  48. <dl class="layui-nav-child">
  49. <dd><a href="javascript:;">列表一</a></dd>
  50. <dd><a href="javascript:;">列表二</a></dd>
  51. <dd><a href="javascript:;">列表三</a></dd>
  52. <dd><a href="">超链接</a></dd>
  53. </dl>
  54. </li>
  55. <li class="layui-nav-item">
  56. <a href="javascript:;">解决方案</a>
  57. <dl class="layui-nav-child">
  58. <dd><a href="javascript:;">列表一</a></dd>
  59. <dd><a href="javascript:;">列表二</a></dd>
  60. <dd><a href="">超链接</a></dd>
  61. </dl>
  62. </li>
  63. <li class="layui-nav-item"><a href="">云市场</a></li>
  64. <li class="layui-nav-item"><a href="">发布商品</a></li>
  65. </ul>
  66. </div>
  67. </div>
  69. <div class="layui-body">
  70. <!-- 内容主体区域 -->
  71. <div style="padding: 15px;">内容主体区域</div>
  72. </div>
  74. <div class="layui-footer">
  75. <!-- 底部固定区域 -->
  76. © layui.com - 底部固定区域
  77. </div>
  78. </div>
  79. <script src="../src/layui.js"></script>
  80. <script>
  81. //JavaScript代码区域
  82. layui.use('element', function(){
  83. var element = layui.element;
  85. });
  86. </script>
  87. </body>
  88. </html>
posted @ 2021-01-30 20:43  nanfengnan  阅读(4517)  评论(0)    收藏  举报