android ui菜鸟教程,layui菜鸟教程--乐字节前端
主要內容
LayUI 的介紹
?layui(諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。
?由國人開發，16年出廠的框架，其主要提供了很多好看、方便的樣式，并且基本拿來即用，和Bootstrap有些相似，但該框架有個極大的好處就是定義了很多前后端交互的樣式接口，如分頁表格，只需在前端配置好接口，后端則按照定義好的接口規則返回數據，即可完成頁面的展示，極大減少了后端人員的開發成本。
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
復制代碼基本的入門頁面
開始使用layui// 一般直接寫在一個js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
復制代碼還需要聲明需要使用的 模塊 和 回調函數。參照官方文檔，選擇自己想要的效果就行。
比如：
layui.use('element', function(){
var element = layui.element;
//…
});
復制代碼
頁面元素
布局
布局容器
固定寬度
將柵格放入一個帶有 class="layui-container" 的特定的容器中，以便在小屏幕以上的設備中固定寬度，讓列可控。
……
復制代碼
完整寬度
可以不固定容器寬度。將柵格或其它元素放入一個帶有 class="layui-fluid" 的容器中，那么寬度將不會固定，而是 100% 適應
……
復制代碼
柵格系統
?為了豐富網頁布局，簡化 HTML/CSS 代碼的耦合，并提升多終端的適配能力，layui 引進了一套具備響應式能力的柵格系統。將容器進行了 12 等分，預設了 4*12 種 CSS 排列類，它們在移動設備、平板、桌面中/大尺寸四種不同的屏幕下發揮著各自的作用。
柵格布局規則
采用 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)元素中放入你自己的任意元素填充內容
示例：
常規布局(以中型屏幕桌面為例)：
你的內容 9/12
你的內容 3/12
復制代碼
響應式規則
?柵格的響應式能力，得益于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
響應行為
始終按設定的比例水平排列
在當前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列
在當前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列
在當前屏幕下水平排列，如果屏幕大小低于臨界值則堆疊排列
平板、桌面端的不同表現：
style="background-color: thistle">
平板≥768px：6/12 | 桌面端≥992px：4/12
style="background-color: mediumaquamarine;">
平板≥768px：4/12 | 桌面端≥992px：6/12
style="background-color: coral">
平板≥768px：12/12 | 桌面端≥992px：8/12
復制代碼
列邊距
?通過“列間距”的預設類，來設定列之間的間距。且一行中最左的列不會出現左邊距，最右的列不會出現右邊距。列間距在保證排版美觀的同時，還可以進一步保證分列的寬度精細程度。我們結合網頁常用的邊距，預設了 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
復制代碼
示例：
列間距
1/3
1/3
1/3
復制代碼
注：
layui-col-space：設置后不起作用主要是因為設置的是padding,也就是說是向內縮，所以設置背景色padding也是會添上顏色，看起來好像沒有間距一樣?？梢栽诶锩嬖诩右粋€div，來達到目的。
間距一般不高于30px，如果超過30，建議使用列偏移。
列偏移
?對列追加 類似 layui-col-md-offset* 的預設類，從而讓列向右偏移。其中 * 號代表的是偏移占據的列數，可選中為 1 - 12。
?如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，讓該列向右偏移 3 個列寬度
列偏移
4/12
style="background-color: cornflowerblue;">
偏移4列，從而在最右
復制代碼
?注：列偏移可針對不同屏幕的標準進行設定，在當前設定的屏幕下有效，當低于桌面屏幕的規定的臨界值，就會堆疊排列。
列嵌套
?可以對柵格進行無窮層次的嵌套。在列元素(layui-col-md*)中插入行元素(layui-row)，即可完成嵌套。
列嵌套
內部列
內部列
內部列
復制代碼
總結
以上是生活随笔為你收集整理的android ui菜鸟教程,layui菜鸟教程--乐字节前端的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win7系统中文显示乱码解决方法
- 下一篇： 2017年html5行业报告,云适配发布