一、柵格布局規則：
採用 layui-row 來定義行，如：
採用類似 layui-col-md* 這樣的預設類來定義一組列（column），且放在行（row）內。其中：
變數md 代表的是不同螢幕下的標記（可選值見下文）
變數* 代表的是該列所占用的12等分數（如6/12），可選值為 1 - 12
如果多個列的「等分數值」總和等於12，則剛好滿行排列。如果大於12，多餘的列將自動另起一行。
列可以同時出現最多四種不同的組合，分別是：xs（超小螢幕，如手機）、sm（小螢幕，如平板）、md（桌面中等螢幕）、lg（桌面大型螢幕），以呈現更加動態靈活的布局。
可對列追加類似 layui-col-space5、 layui-col-md-offset3 這樣的預設類來定義列的間距和偏移。
最後，在列（column）元素中放入你自己的任意元素填充內容，完成布局！
例子1
//這是行
//這是列，佔12份中的9份
你的內容 9/12
你的內容 3/12
你的內容 6/12
你的內容 3/12
移動裝置、平板、桌面端的不同表現：
移動：6/12 | 平板：6/12 | 桌面：4/12
移動：6/12 | 平板：6/12 | 桌面：4/12
移動：4/12 | 平板：12/12 | 桌面：4/12
移動：4/12 | 平板：7/12 | 桌面：8/12
移動：4/12 | 平板：5/12 | 桌面：4/12
柵格的響應式能力，得益於css3**查詢（media queries）的強力支援，從而針對四類不同尺寸的螢幕，進行相應的適配處理
三、響應式公共類：
類名（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」 的特定的容器中，以便在小螢幕以上的裝置中固定寬度，讓列可控。
……
……
六、列偏移
對列追加 類似 layui-col-md-offset* 的預設類，從而讓列向右偏移。其中 * 號代表的是偏移佔據的列數，可選中為 1 - 12。
如：layui-col-md-offset3，即代表在「中型桌面螢幕」下，讓該列向右偏移3個列寬度
下面是乙個採用「列偏移」機制讓兩個列左右對齊的例項
layui.code
4/12
偏移4列，從而在最右
七、柵格巢狀
理論上，你可以對柵格進行無窮層次的巢狀，這更加增強了柵格的表現能力。而巢狀的使用非常簡單。在列元素（layui-col-md*）中插入乙個行元素（layui-row），即可完成巢狀。下面是乙個簡單的例子：
內部列
內部列
內部列
內部列內部列
內部列
layui 之所以贏得如此多人的青睞，更多是在於它前後臺系統通吃的能力。既可編織出絢麗的前台頁面，又可滿足繁雜的後台功能需求。layui 致力於讓每一位開發者都能輕鬆搭建自己的後台。下面是 layui 提供的乙個現場的方案
layui 後台布局
內容主體區域
學習第一天
知識是學會的,不是教會的 程式設計 驗證性或體驗性 創造性 學程式設計的4個階段 1.能看懂別人的 除錯別人的 2.能修改別人的 3.能拷貝別人的 做自己的事 4.能自己設計編寫 方法 多讀 做記錄 執行 修改 執行 練習,光說不練假把式 刷oj總結 寫部落格或許是個不錯的選擇 學生和已經工作的程式...
php學習第一天
第一章 安裝 php語言的核心特性是強大的字串和資料處理工具，還提供物件導向的支援。可以用c寫自己的php擴充套件模組。php能做什麼？伺服器指令碼，命令列指令碼，客戶端gui應用，安裝php環境 www.php.net，www.apache.org 2解壓後放在同一目錄下 3對apache和php...
第一天MySQL學習
資料庫的管理 顯示所有資料庫show databases 使用資料庫use databasename 資料庫建立create database dbname 資料庫刪除drop database dbname 表的管理 顯示所有表show tables 建立表create table 顯示表定義原始...