柵格系統與后臺布局 * * * * * 如你所愿，在 layui 2.0 的版本中，我們加入了強勁的柵格系統和后臺布局方案，這意味著你終于可以著手采用 layui 排版你的響應式網站和后臺系統了。layui 的柵格系統采用業界比較常見的 12 等分規則，內置移動設備、平板、桌面中等和大型屏幕的多終端適配處理，最低能支持到ie8。而你應當更欣喜的是，layui 終于開放了它經典的后臺布局方案，快速搭建一個屬于你的后臺系統將變得十分輕松自如。 柵格系統 為了豐富網頁布局，簡化 HTML/CSS 代碼的耦合，并提升多終端的適配能力，layui 在 2.0 的版本中引進了自己的一套具備響應式能力的柵格系統。我們將容器進行了 12 等分，預設了 4*12 種 CSS 排列類，它們在移動設備、平板、桌面中/大尺寸四種不同的屏幕下發揮著各自的作用。 一、柵格布局規則： 1. 采用 layui-row 來定義行，如：<div class="layui-row"></div> 2. 采用類似 layui-col-md* 這樣的預設類來定義一組列（column），且放在行（row）內。其中： 變量md 代表的是不同屏幕下的標記（可選值見下文） 變量* 代表的是該列所占用的12等分數（如6/12），可選值為 1 - 12 如果多個列的“等分數值”總和等于12，則剛好滿行排列。如果大于12，多余的列將自動另起一行。 3. 列可以同時出現最多四種不同的組合，分別是：xs（超小屏幕，如手機）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈現更加動態靈活的布局。 4. 可對列追加類似 layui-col-space5、 layui-col-md-offset3 這樣的預設類來定義列的間距和偏移。 5. 最后，在列（column）元素中放入你自己的任意元素填充內容，完成布局！ 示例（這里只是大致列舉兩個，更多實例請前往 示例-柵格 查看） 你的內容 9/12 你的內容 3/12 50% | 33.33% | 33.33% 50% | 66.67% | 33.33% 33.33% | 100% | 33.33% 33.33% | 50% | 66.67% 33.33% | 50% | 33.33% 示例layui.code <div class="layui-container"> 常規布局（以中型屏幕桌面為例）： <div class="layui-row"> <div class="layui-col-md9"> 你的內容 9/12 </div> <div class="layui-col-md3"> 你的內容 3/12 </div> </div> 移動設備、平板、桌面端的不同表現： <div class="layui-row"> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移動：6/12 | 平板：6/12 | 桌面：4/12 </div> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移動：6/12 | 平板：6/12 | 桌面：4/12 </div> <div class="layui-col-xs4 layui-col-sm12 layui-col-md4"> 移動：4/12 | 平板：12/12 | 桌面：4/12 </div> <div class="layui-col-xs4 layui-col-sm7 layui-col-md8"> 移動：4/12 | 平板：7/12 | 桌面：8/12 </div> <div class="layui-col-xs4 layui-col-sm5 layui-col-md4"> 移動：4/12 | 平板：5/12 | 桌面：4/12 </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 響應行為 始終按設定的比例水平排列 在當前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列 三、響應式公共類： 類名（class） 說明 layui-show-*-block 定義不同設備下的 display: block; * 可選值有：xs、sm、md、lg layui-show-*-inline 定義不同設備下的 display: inline; * 可選值同上 layui-show-*-inline-block 定義不同設備下的 display: inline-block; * 可選值同上 layui-hide-* 定義不同設備下的隱藏類，即： display: none; * 可選值同上 四、布局容器： 將柵格放入一個帶有 class="layui-container" 的特定的容器中，以便在小屏幕以上的設備中固定寬度，讓列可控。 codelayui.code <div class="layui-container"> <div class="layui-row"> …… </div> </div> 當然，你還可以不固定容器寬度。將柵格或其它元素放入一個帶有 class="layui-fluid" 的容器中，那么寬度將不會固定，而是 100% 適應 codelayui.code <div class="layui-fluid"> …… </div> 五、列間距： 通過“列間距”的預設類，來設定列之間的間距。且一行中最左的列不會出現左邊距，最右的列不會出現右邊距。列間距在保證排版美觀的同時，還可以進一步保證分列的寬度精細程度。我們結合網頁常用的邊距，預設了 12 種不同尺寸的邊距，分別是： layui-col-space1 列之間間隔 1px layui-col-space3 列之間間隔 3px layui-col-space5 列之間間隔 5px layui-col-space8 列之間間隔 8px layui-col-space10 列之間間隔 10px layui-col-space12 列之間間隔 12px layui-col-space15 列之間間隔 15px layui-col-space18 列之間間隔 18px layui-col-space20 列之間間隔 20px layui-col-space22 列之間間隔 22px layui-col-space28 列之間間隔 28px layui-col-space30 列之間間隔 30px 下面是一個簡單的例子，列間距為10px： 1/3 1/3 1/3 codelayui.code <div class="layui-row layui-col-space10"> <div class="layui-col-md4"> 1/3 </div> <div class="layui-col-md4"> 1/3 </div> <div class="layui-col-md4"> 1/3 </div> </div> 如果需要的間距高于30px（一般不常見），請采用偏移，下文繼續講解 六、列偏移： 對列追加 類似 layui-col-md-offset* 的預設類，從而讓列向右偏移。其中 * 號代表的是偏移占據的列數，可選中為 1 - 12。 如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，讓該列向右偏移3個列寬度 下面是一個采用“列偏移”機制讓兩個列左右對齊的實例 4/12 偏移4列，從而在最右 codelayui.code <div class="layui-row"> <div class="layui-col-md4"> 4/12 </div> <div class="layui-col-md4 layui-col-md-offset4"> 偏移4列，從而在最右 </div> </div> 請注意，列偏移可針對不同屏幕的標準進行設定，比如上述的例子，只會在桌面屏幕下有效，當低于桌面屏幕的規定的臨界值，就會堆疊排列。 七、柵格嵌套： 理論上，你可以對柵格進行無窮層次的嵌套，這更加增強了柵格的表現能力。而嵌套的使用非常簡單。在列元素（layui-col-md*）中插入一個行元素（layui-row），即可完成嵌套。下面是一個簡單的例子： 內部列 內部列 內部列 內部列 內部列 內部列 codelayui.code <div class="layui-row layui-col-space5"> <div class="layui-col-md5"> <div class="layui-row grid-demo"> <div class="layui-col-md3"> 內部列 </div> <div class="layui-col-md9"> 內部列 </div> <div class="layui-col-md12"> 內部列 </div> </div> </div> <div class="layui-col-md7"> <div class="layui-row grid-demo grid-demo-bg1"> <div class="layui-col-md12"> 內部列 </div> <div class="layui-col-md9"> 內部列 </div> <div class="layui-col-md3"> 內部列 </div> </div> </div> </div> 八、讓IE8/9兼容柵格： 事實上IE8和IE9并不支持媒體查詢（Media Queries），但你可以使用下面的補丁完美兼容！該補丁來自于開源社區： codelayui.code <!-- 讓IE8/9支持媒體查詢，從而兼容柵格 --> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> 將上述代碼放入你頁面 <body> 標簽內的任意位置 后臺布局 layui 之所以贏得如此多人的青睞，更多是在于它前后臺系統通吃的能力。既可編織出絢麗的前臺頁面，又可滿足繁雜的后臺功能需求。layui 致力于讓每一位開發者都能輕松搭建自己的后臺。下面是 layui 提供的一個現場的方案，你可以前往示例頁面，預覽后臺布局效果 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"> </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> <script> //JavaScript代碼區域 layui.use('element', function(){ var element = layui.element; }); </script> </body> </html> ~~~