<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 柵格系統與后臺布局

      如你所愿,在 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 - 用心與你溝通

      亚洲图色