柵格系統與后臺布局

                    如你所愿,在 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-space5layui-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%
                    <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" 的特定的容器中,以便在小屏幕以上的設備中固定寬度,讓列可控。

                    <div class="layui-container">
                      <div class="layui-row">
                        ……
                      </div>
                    </div>      
                          

                    當然,你還可以不固定容器寬度。將柵格或其它元素放入一個帶有 class="layui-fluid" 的容器中,那么寬度將不會固定,而是 100% 適應

                    <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
                    <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列,從而在最右
                    <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),即可完成嵌套。下面是一個簡單的例子:

                    內部列
                    內部列
                    內部列
                    內部列
                    內部列
                    內部列
                    <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),但你可以使用下面的補丁完美兼容!該補丁來自于開源社區:

                    <!-- 讓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 提供的一個現場的方案,你可以前往示例頁面,預覽后臺布局效果

                    <!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>
                          

                    結語

                    layui - 用心與你溝通

                    亚洲图色