LayUI

主要內容

LayUI 的安裝及使用

LayUI 的介紹

layui（諧音：類UI) 是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。css

由國人開發，16年出廠的框架，其主要提供了不少好看、方便的樣式，而且基本拿來即用，和Bootstrap有些類似，但該框架有個極大的好處就是定義了不少先後端交互的樣式接口，如分頁表格，只需在前端配置好接口，後端則按照定義好的接口規則返回數據，便可完成頁面的展現，極大減小了後端人員的開發成本。html

官網：https://www.layui.com前端

官方文檔：https://www.layui.com/doc/後端

LayUI 的特色

（1）layui屬於輕量級框架，簡單美觀。適用於開發後端模式，它在服務端頁面上有很是好的效果。框架

（2）layui是提供給後端開發人員的ui框架，基於DOM驅動。編輯器

下載與使用

在官網首頁下載到 layui 的最新版。目錄結構以下：模塊化

├─css // css目錄
  │  │─modules // 模塊css目錄（通常若是模塊相對較大，咱們會單獨提取，好比下面三個：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css // 核心樣式文件
  ├─font  // 字體圖標目錄
  ├─images // 圖片資源目錄（目前只有layim和編輯器用到的GIF表情）
  │─lay // 模塊核心目錄
  │  └─modules // 各模塊組件
  │─layui.js // 基礎核心庫
  └─layui.all.js // 包含layui.js和全部模塊的合併文件

得到 layui 後，將其完整地部署（拷貝到項目中）到你的項目目錄，你只須要引入下述兩個文件：函數

./layui/css/layui.css
./layui/layui.js // 提示：若是是採用非模塊化方式，此處可換成：./layui/layui.all.js

基本的入門頁面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>開始使用layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代碼 -->
 
<script src="layui/layui.js"></script>
<script> // 模塊和回調函數 // 通常直接寫在一個js文件中 layui.use(['layer', 'form'], function(){  var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }); </script> 
</body>
</html>

還須要聲明須要使用的模塊和 回調函數。參照官方文檔，選擇本身想要的效果就行。佈局

好比：字體

<script> // 注意：導航 依賴 element 模塊，不然沒法進行功能性操做 layui.use('element', function(){  var element = layui.element; //… }); </script>

頁面元素

佈局

佈局容器

固定寬度

將柵格放入一個帶有 class=「layui-container」 的特定的容器中，以便在小屏幕以上的設備中固定寬度，讓列可控。

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

完整寬度

能夠不固定容器寬度。將柵格或其它元素放入一個帶有 class=「layui-fluid」 的容器中，那麼寬度將不會固定，而是 100% 適應

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

柵格系統

爲了豐富網頁佈局，簡化 HTML/CSS 代碼的耦合，並提高多終端的適配能力，layui 引進了一套具有響應式能力的柵格系統。將容器進行了 12 等分，預設了 4*12 種 CSS 排列類，它們在移動設備、平板、桌面中/大尺寸四種不一樣的屏幕下發揮着各自的做用。

柵格佈局規則

採用 layui-row 來定義行，如：
```
<div class="layui-row"></div>
```
採用相似 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）元素中放入你本身的任意元素填充內容

示例：

<h3>常規佈局（以中型屏幕桌面爲例）：</h3>
<div class="layui-row">
	<div class="layui-col-md9" style="background-color: #00F7DE;">
	  你的內容 9/12
	</div>
	<div class="layui-col-md3" style="background-color: rosybrown;">
	  你的內容 3/12
	</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	12	12	12
響應行爲	始終按設定的比例水平排列	在當前屏幕下水平排列，若是屏幕大小低於臨界值則堆疊排列	在當前屏幕下水平排列，若是屏幕大小低於臨界值則堆疊排列	在當前屏幕下水平排列，若是屏幕大小低於臨界值則堆疊排列

<h3>平板、桌面端的不一樣表現：</h3>
<div class="layui-row">
    <div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
        平板≥768px：6/12 | 桌面端≥992px：4/12
    </div>
</div>

<div class="layui-row">	    
    <div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;">
        平板≥768px：4/12 | 桌面端≥992px：6/12
    </div>
</div>

<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
        平板≥768px：12/12 | 桌面端≥992px：8/12
    </div>
</div>

列邊距

經過「列間距」的預設類，來設定列之間的間距。且一行中最左的列不會出現左邊距，最右的列不會出現右邊距。列間距在保證排版美觀的同時，還能夠進一步保證分列的寬度精細程度。咱們結合網頁經常使用的邊距，預設了 12 種不一樣尺寸的邊距，分別是：

/* 支持列之間爲 1px-30px 區間的全部雙數間隔，以及 1px、5px、15px、25px 的單數間隔 */
layui-col-space1 
layui-col-space2 
layui-col-space4 
layui-col-space5 
layui-col-space6 
layui-col-space8 
layui-col-space10 
layui-col-space12 
layui-col-space14 
layui-col-space15 
layui-col-space16 
layui-col-space18 
layui-col-space20 
layui-col-space22 
layui-col-space24 
layui-col-space25 
layui-col-space26 
layui-col-space28 
layui-col-space30

示例：

<h3>列間距</h3>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md4" >
        <!-- 須要在layui-col-md4裏面再加一層div -->
        <div style="background-color: #009688;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: burlywood;">
            1/3
        </div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: silver;">
            1/3
        </div>
    </div>
</div>

注：

1. layui-col-space：設置後不起做用主要是由於**設置的是padding**,也就是說是**向內縮**，因此設置背景色padding也是會添上顏色，看起來好像沒有間距同樣。能夠在裏面在加一個div，來達到目的。
            	2. 間距通常不高於30px，若是超過30，建議使用列偏移。

列偏移

對列追加相似 layui-col-md-offset* 的預設類，從而讓列向右偏移。其中 * 號表明的是偏移佔據的列數，可選中爲 1 - 12。
如：layui-col-md-offset3，即表明在「中型桌面屏幕」下，讓該列向右偏移 3 個列寬度

<h3>列偏移</h3>
<div class="layui-row">
    <div class="layui-col-md4" style="background-color: rosybrown;">
        4/12
    </div>
    <div class="layui-col-md4 layui-col-md-offset4" style="background-color: cornflowerblue;">
        偏移4列，從而在最右
    </div>
</div>

注：列偏移可針對不一樣屏幕的標準進行設定，在當前設定的屏幕下有效，當低於桌面屏幕的規定的臨界值，就會堆疊排列。

列嵌套

能夠對柵格進行無窮層次的嵌套。在列元素（layui-col-md*）中插入行元素（layui-row），便可完成嵌套。

<h3>列嵌套</h3>
<div class="layui-row layui-col-space5">
    <div class="layui-col-md5" style="background-color: thistle;">
        <div class="layui-row">
            <div class="layui-col-md3" style="background-color: burlywood;" >
                內部列
            </div>
            <div class="layui-col-md5" style="background-color: indianred;">
                內部列
            </div>
            <div class="layui-col-md4" style="background-color: mediumaquamarine;">
                內部列
            </div>
        </div>
    </div>
</div>