android ui菜鸟教程,layui菜鸟教程--乐字节前端
主要內(nèi)容
LayUI 的介紹
?layui(諧音:類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來(lái)即用。
?由國(guó)人開發(fā),16年出廠的框架,其主要提供了很多好看、方便的樣式,并且基本拿來(lái)即用,和Bootstrap有些相似,但該框架有個(gè)極大的好處就是定義了很多前后端交互的樣式接口,如分頁(yè)表格,只需在前端配置好接口,后端則按照定義好的接口規(guī)則返回?cái)?shù)據(jù),即可完成頁(yè)面的展示,極大減少了后端人員的開發(fā)成本。
LayUI 的特點(diǎn)
(1)layui屬于輕量級(jí)框架,簡(jiǎn)單美觀。適用于開發(fā)后端模式,它在服務(wù)端頁(yè)面上有非常好的效果。
(2)layui是提供給后端開發(fā)人員的ui框架,基于DOM驅(qū)動(dòng)。
下載與使用
在 官網(wǎng)首頁(yè) 下載到 layui 的最新版。目錄結(jié)構(gòu)如下:
├─css // css目錄
│ │─modules // 模塊css目錄(一般如果模塊相對(duì)較大,我們會(huì)單獨(dú)提取,比如下面三個(gè):)
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css // 核心樣式文件
├─font // 字體圖標(biāo)目錄
├─images // 圖片資源目錄(目前只有l(wèi)ayim和編輯器用到的GIF表情)
│─lay // 模塊核心目錄
│ └─modules // 各模塊組件
│─layui.js // 基礎(chǔ)核心庫(kù)
└─layui.all.js // 包含layui.js和所有模塊的合并文件
復(fù)制代碼
獲得 layui 后,將其完整地部署(拷貝到項(xiàng)目中)到你的項(xiàng)目目錄,你只需要引入下述兩個(gè)文件:
./layui/css/layui.css
./layui/layui.js // 提示:如果是采用非模塊化方式,此處可換成:./layui/layui.all.js
復(fù)制代碼基本的入門頁(yè)面
開始使用layui// 一般直接寫在一個(gè)js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
復(fù)制代碼還需要聲明需要使用的 模塊 和 回調(diào)函數(shù)。參照官方文檔,選擇自己想要的效果就行。
比如:
layui.use('element', function(){
var element = layui.element;
//…
});
復(fù)制代碼
頁(yè)面元素
布局
布局容器
固定寬度
將柵格放入一個(gè)帶有 class="layui-container" 的特定的容器中,以便在小屏幕以上的設(shè)備中固定寬度,讓列可控。
……
復(fù)制代碼
完整寬度
可以不固定容器寬度。將柵格或其它元素放入一個(gè)帶有 class="layui-fluid" 的容器中,那么寬度將不會(huì)固定,而是 100% 適應(yīng)
……
復(fù)制代碼
柵格系統(tǒng)
?為了豐富網(wǎng)頁(yè)布局,簡(jiǎn)化 HTML/CSS 代碼的耦合,并提升多終端的適配能力,layui 引進(jìn)了一套具備響應(yīng)式能力的柵格系統(tǒng)。將容器進(jìn)行了 12 等分,預(yù)設(shè)了 4*12 種 CSS 排列類,它們?cè)谝苿?dòng)設(shè)備、平板、桌面中/大尺寸四種不同的屏幕下發(fā)揮著各自的作用。
柵格布局規(guī)則
采用 layui-row 來(lái)定義行,如:
復(fù)制代碼
采用類似 layui-col-md* 這樣的預(yù)設(shè)類來(lái)定義一組列(column),且放在行(row)內(nèi)。其中:
變量 md 代表的是不同屏幕下的標(biāo)記
變量 ***** 代表的是該列所占用的12等分?jǐn)?shù)(如6/12),可選值為 1 - 12
如果多個(gè)列的“等分?jǐn)?shù)值”總和等于12,則剛好滿行排列。如果大于12,多余的列將自動(dòng)另起一行。
列可以同時(shí)出現(xiàn)最多四種不同的組合,分別是:xs(超小屏幕,如手機(jī))、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕)。
可對(duì)列追加類似 layui-col-space5、 layui-col-md-offset3 這樣的預(yù)設(shè)類來(lái)定義列的間距和偏移。
可以在列(column)元素中放入你自己的任意元素填充內(nèi)容
示例:
常規(guī)布局(以中型屏幕桌面為例):
你的內(nèi)容 9/12
你的內(nèi)容 3/12
復(fù)制代碼
響應(yīng)式規(guī)則
?柵格的響應(yīng)式能力,得益于CSS3媒體查詢(Media Queries)的強(qiáng)力支持,從而針對(duì)四類不同尺寸的屏幕,進(jìn)行相應(yīng)的適配處理。
超小屏幕 (手機(jī)<768px)
小屏幕 (平板≥768px)
中等屏幕 (桌面≥992px)
大型屏幕(桌面≥1200px)
.layui-container的值
auto
750px
970px
1170px
標(biāo)記
xs
sm
md
lg
列對(duì)應(yīng)類 * 為1-12的等分?jǐn)?shù)值
layui-col-xs*
layui-col-sm*
layui-col-md*
layui-col-lg*
總列數(shù)
12
12
12
12
響應(yīng)行為
始終按設(shè)定的比例水平排列
在當(dāng)前屏幕下水平排列,如果屏幕大小低于臨界值則堆疊排列
在當(dāng)前屏幕下水平排列,如果屏幕大小低于臨界值則堆疊排列
在當(dāng)前屏幕下水平排列,如果屏幕大小低于臨界值則堆疊排列
平板、桌面端的不同表現(xiàn):
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
復(fù)制代碼
列邊距
?通過(guò)“列間距”的預(yù)設(shè)類,來(lái)設(shè)定列之間的間距。且一行中最左的列不會(huì)出現(xiàn)左邊距,最右的列不會(huì)出現(xiàn)右邊距。列間距在保證排版美觀的同時(shí),還可以進(jìn)一步保證分列的寬度精細(xì)程度。我們結(jié)合網(wǎng)頁(yè)常用的邊距,預(yù)設(shè)了 12 種不同尺寸的邊距,分別是:
/* 支持列之間為 1px-30px 區(qū)間的所有雙數(shù)間隔,以及 1px、5px、15px、25px 的單數(shù)間隔 */
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
復(fù)制代碼
示例:
列間距
1/3
1/3
1/3
復(fù)制代碼
注:
layui-col-space:設(shè)置后不起作用主要是因?yàn)樵O(shè)置的是padding,也就是說(shuō)是向內(nèi)縮,所以設(shè)置背景色padding也是會(huì)添上顏色,看起來(lái)好像沒有間距一樣。可以在里面在加一個(gè)div,來(lái)達(dá)到目的。
間距一般不高于30px,如果超過(guò)30,建議使用列偏移。
列偏移
?對(duì)列追加 類似 layui-col-md-offset* 的預(yù)設(shè)類,從而讓列向右偏移。其中 * 號(hào)代表的是偏移占據(jù)的列數(shù),可選中為 1 - 12。
?如:layui-col-md-offset3,即代表在“中型桌面屏幕”下,讓該列向右偏移 3 個(gè)列寬度
列偏移
4/12
style="background-color: cornflowerblue;">
偏移4列,從而在最右
復(fù)制代碼
?注:列偏移可針對(duì)不同屏幕的標(biāo)準(zhǔn)進(jìn)行設(shè)定,在當(dāng)前設(shè)定的屏幕下有效,當(dāng)?shù)陀谧烂嫫聊坏囊?guī)定的臨界值,就會(huì)堆疊排列。
列嵌套
?可以對(duì)柵格進(jìn)行無(wú)窮層次的嵌套。在列元素(layui-col-md*)中插入行元素(layui-row),即可完成嵌套。
列嵌套
內(nèi)部列
內(nèi)部列
內(nèi)部列
復(fù)制代碼
總結(jié)
以上是生活随笔為你收集整理的android ui菜鸟教程,layui菜鸟教程--乐字节前端的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: win7系统中文显示乱码解决方法
- 下一篇: html音视频app制作,怎么实现HTM