柵格系統(tǒng)

為了豐富網(wǎng)頁布局簡(jiǎn)化HTML/CSS代碼的耦合剥槐，并提升多終端的適配能力唱歧，layui在2.0版本中引進(jìn)了自己的一套具備響應(yīng)式能力的柵格系統(tǒng)粒竖。我們將容器進(jìn)行了12等分，預(yù)設(shè)了4*12種CSS排列類蕊苗，它們?cè)谝苿?dòng)設(shè)備、平板朽砰、電腦中/>大尺寸四種不同的屏幕下發(fā)揮著各自的作用。

一锅移、柵格布局規(guī)則:

1. 采用 layui-row 來定義行熔掺，如：<div class="layui-row"></div>
2. 采用類似 layui-col-md* 這樣的預(yù)設(shè)類來定義一組列（column）非剃，且放在行（row）內(nèi)推沸。其中：
   變量md 代表的是不同屏幕下的標(biāo)記（可選值見下文）
   變量* 代表的是該列所占用的12等分?jǐn)?shù)（如6/12）备绽，可選值為 1 - 12
   如果多個(gè)列的“等分?jǐn)?shù)值”總和等于12鬓催，則剛好滿行排列。如果大于12宇驾，多余的列將自動(dòng)另起一行。
3. 列可以同時(shí)出現(xiàn)最多四種不同的組合课舍，分別是：xs（超小屏幕他挎，如手機(jī)）捡需、sm（小屏幕，如平板）站辉、md（桌面中等屏幕）、lg（桌面大型屏幕）饰剥，以呈現(xiàn)更加動(dòng)態(tài)靈活的布局。
4. 可對(duì)列追加類似 layui-col-space5捐川、 layui-col-md-offset3 這樣的預(yù)設(shè)類來定義列的間距和偏移。
5. 最后古沥，在列（column）元素中放入你自己的任意元素填充內(nèi)容，完成布局岩齿！

示例（這里只是大致列舉兩個(gè)，更多實(shí)例請(qǐng)前往 示例-柵格 查看）

示例layui.code

1.  <div class="layui-container">  
2.  常規(guī)布局（以中型屏幕桌面為例）：
3.  <div class="layui-row">
4.  <div class="layui-col-md9">
5.  你的內(nèi)容 9/12
6.  </div>
7.  <div class="layui-col-md3">
8.  你的內(nèi)容 3/12
9.  </div>
10.  </div>

12.  移動(dòng)設(shè)備龄章、平板、桌面端的不同表現(xiàn)：
13.  <div class="layui-row">
14.  <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
15.  移動(dòng)：6/12 | 平板：6/12 | 桌面：4/12
16.  </div>
17.  <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
18.  移動(dòng)：6/12 | 平板：6/12 | 桌面：4/12
19.  </div>
20.  <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
21.  移動(dòng)：4/12 | 平板：12/12 | 桌面：4/12
22.  </div>
23.  <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
24.  移動(dòng)：4/12 | 平板：7/12 | 桌面：8/12
25.  </div>
26.  <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
27.  移動(dòng)：4/12 | 平板：5/12 | 桌面：4/12
28.  </div>
29.  </div>
30.  </div>

二做裙、響應(yīng)式規(guī)則：

三、響應(yīng)式公共類：

類名（class） 說明
layui-show--block 定義不同設(shè)備下的 display: block; * 可選值有：xs吧碾、sm、md倦春、lg
layui-show--inline 定義不同設(shè)備下的 display: inline; * 可選值同上
layui-show--inline-block 定義不同設(shè)備下的 display: inline-block; * 可選值同上
layui-hide- 定義不同設(shè)備下的隱藏類，即： display: none; * 可選值同上

四睁本、布局容器：

將柵格放入一個(gè)帶有 class="layui-container" 的特定的容器中山叮，以便在小屏幕以上的設(shè)備中固定寬度添履，讓列可控。

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

當(dāng)然暮胧，你還可以不固定容器寬度。將柵格或其它元素放入一個(gè)帶有 class="layui-fluid" 的容器中往衷，那么寬度將不會(huì)固定，而是 100% 適應(yīng)

<div class="layui-fluid">
  ……
</div>  

五布轿、列間距：

通過“列間距”的預(yù)設(shè)類，來設(shè)定列之間的間距汰扭。且一行中最左的列不會(huì)出現(xiàn)左邊距，最右的列不會(huì)出現(xiàn)右邊距萝毛。列間距在保證排版美觀的同時(shí)，還可以進(jìn)一步保證分列的寬度精細(xì)程度笆包。我們結(jié)合網(wǎng)頁常用的邊距略荡，預(yù)設(shè)了 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

下面是一個(gè)簡(jiǎn)單的例子汛兜，列間距為10px：

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

六、列偏移：

對(duì)列追加 類似 layui-col-md-offset* 的預(yù)設(shè)類序无，從而讓列向右偏移衡创。其中 * 號(hào)代表的是偏移占據(jù)的列數(shù)，可選中為 1 - 12璃氢。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，讓該列向右偏移3個(gè)列寬度

<div class="layui-row">
  <div class="layui-col-md4">
    4/12
  </div>
  <div class="layui-col-md4 layui-col-md-offset4">
    偏移4列喉脖，從而在最右
  </div>
</div>

七抑月、柵格嵌套：

<div class="layui-row layui-col-space5">
  <div class="layui-col-md5">
    <div class="layui-row grid-demo">
      <div class="layui-col-md3">
        內(nèi)部列
      </div>
      <div class="layui-col-md9">
        內(nèi)部列
      </div>
      <div class="layui-col-md12">
        內(nèi)部列
      </div>
    </div>
  </div>
  <div class="layui-col-md7">
    <div class="layui-row grid-demo grid-demo-bg1">
      <div class="layui-col-md12">
        內(nèi)部列
      </div>
      <div class="layui-col-md9">
        內(nèi)部列
      </div>
      <div class="layui-col-md3">
        內(nèi)部列
      </div>
    </div>
  </div>
</div>

后臺(tái)布局

layui 之所以贏得如此多人的青睞，更多是在于它前后臺(tái)系統(tǒng)通吃的能力怎棱。既可編織出絢麗的前臺(tái)頁面，又可滿足繁雜的后臺(tái)功能需求蹄殃。layui 致力于讓每一位開發(fā)者都能輕松搭建自己的后臺(tái)。下面是 layui 提供的一個(gè)現(xiàn)場(chǎng)的方案诅岩，你可以前往示例頁面带膜，預(yù)覽后臺(tái)布局效果

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后臺(tái)大布局 - 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 后臺(tái)布局</div>
    <!-- 頭部區(qū)域（可配合layui已有的水平導(dǎo)航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制臺(tái)</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:;">其它系統(tǒng)</a>
        <dl class="layui-nav-child">
          <dd><a href="">郵件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授權(quán)管理</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="">安全設(shè)置</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">
      <!-- 左側(cè)導(dǎo)航區(qū)域（可配合layui已有的垂直導(dǎo)航） -->
      <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="">云市場(chǎng)</a></li>
        <li class="layui-nav-item"><a href="">發(fā)布商品</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 內(nèi)容主體區(qū)域 -->
    <div style="padding: 15px;">內(nèi)容主體區(qū)域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定區(qū)域 -->
    ? layui.com - 底部固定區(qū)域
  </div>
</div>
<script src="../src/layui.js"></script>
<script>
//JavaScript代碼區(qū)域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>
</body>
</html>

友情鏈接：極客大全 http://www.jikedaquan.com/