碼上歡樂
相關內容    簡體    繁體

layui的柵格響應式布局

本文轉載自   查看原文   2021-01-30 20:43   963    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>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Bootstrap4響應式布局之柵格系統 響應式布局---3. Bootstrap柵格系統 響應式布局（一）——bootstrap柵格系統 Bootstrap柵格系統詳解,響應式布局 響應式網格（柵格化）布局 layui柵格布局問題 【響應式】foundation柵格布局的“嘗鮮”與“填坑” 巧用 BootStrap -- 柵格系統（布局）輕松搞定網頁響應式布局！ 使用柵格系統和flex布局開發響應式頁面源碼 柵格布局xs sm md lg xl，簡單的響應式示例代碼
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM