當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Layui框架基本使用

發(fā)布時(shí)間：2024/3/12 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 Layui框架基本使用小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

一、前言
二、引入模板
- 1、去gitub倉(cāng)庫(kù)下載layui開發(fā)包
- 2、引入模板
- 3、驗(yàn)證
三、布局
- 1、布局容器
- 2、柵欄系統(tǒng)
四、顏色
五、圖標(biāo)
六、動(dòng)畫
七、按鈕
八、表單框
九、導(dǎo)航
- 1、普通導(dǎo)航
- 2、面包屑
十、選項(xiàng)卡
十一、表格
十二、徽章
十三、時(shí)間線
十四、分頁(yè)插件
十五、輪播圖

一、前言

為后端量身定做的前端框架。
很遺憾在你下線之后才去了解你

二、引入模板

1、去gitub倉(cāng)庫(kù)下載layui開發(fā)包

下載地址

2、引入模板

3、驗(yàn)證

網(wǎng)頁(yè)中心出現(xiàn)內(nèi)容時(shí)，說(shuō)明引入成功

三、布局

布局與bootstrap十分相似，就是類名前加上了layui（不多贅述）
可以參考：bootstrap學(xué)習(xí)筆記

1、布局容器

頁(yè)面的所有內(nèi)容都放在此容器中

layui-container:固定寬度并支持響應(yīng)式布局的容器 (兩側(cè)會(huì)有留白)

layui-container-fluid:100%寬度

2、柵欄系統(tǒng)

四、顏色

layui 內(nèi)置了七種背景色，以便你用于各種元素中，如：徽章、分割線、導(dǎo)航等等

赤色：class="layui-bg-red"
橙色：class="layui-bg-orange"
墨綠：class="layui-bg-green"
藏青：class="layui-bg-cyan"
藍(lán)色：class="layui-bg-blue"
雅黑：class="layui-bg-black"
銀灰：class="layui-bg-gray"

<!DOCTYPE html> <html lang="en"> <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"><title>layui</title> </head> <div class="layui-container" style="background-color: #00F7DE;height:400px"><div class="layui-bg-black">雅黑</div><div class="layui-bg-orange">橙色</div><div class="layui-bg-red">赤色</div><div class="layui-bg-green">墨綠</div><div class="layui-bg-cyan">藏青</div><div class="layui-bg-blue">雅黑</div> </div> <body> <script src="./layui/layui.js"></script> <script>layui.use(['layer', 'form'], function () {var layer = layui.layer, form = layui.form;layer.msg('Hello World');}); </script> </body> </html>

效果：

五、圖標(biāo)

layui有許多好看且實(shí)用的小圖標(biāo)
例：
實(shí)心愛(ài)心：layui-icon-heart-fill
空心愛(ài)心：layui-icon-heart
笑臉表情：layui-icon-face-smile
贊：layui-icon-praise

利用jq實(shí)現(xiàn)簡(jiǎn)單的關(guān)注效果

代碼如下：

<!DOCTYPE html> <html lang="en"> <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"><script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script> </head> <div class="layui-container" style="height:400px"><div><i class="layui-icon layui-icon-face-smile" style="font-size: 20px;color: red"></i></div><div><button class="layui-icon layui-icon-heart" style="font-size: 20px;color: red" id="guanzhu">點(diǎn)擊關(guān)注</button><button class="layui-icon layui-icon-heart-fill" style="font-size: 20px;color: red" id="guanzhu0" hidden="hidden">關(guān)注成功</button></div> </div> <body> <script src="./layui/layui.js"></script> <script>layui.use(['layer', 'form'], function () {var layer = layui.layer, form = layui.form;layer.msg('Hello World');});$("#guanzhu").click(function () {$("#guanzhu").hide();$("#guanzhu0").show();}) </script> </body> </html>

六、動(dòng)畫

類型：
頂部往下滑入：layui-anim-down
微微往下滑入：layui-anim-downbit
底部往上滑入：layui-anim-up
微微往上滑入：layui-anim-upbit
平滑放大：layui-anim-scale
彈簧式放大：layui-anim-scaleSpring
平滑放小：layui-anim-scalesmall
彈簧式放小:layui-anim-scalesmall-spring
漸現(xiàn)：layui-anim-fadein
漸隱：layui-anim-fadeout
360度旋轉(zhuǎn)：layui-anim-rotate
循環(huán)動(dòng)畫：追加：layui-anim-loop

七、按鈕

標(biāo)準(zhǔn)按鈕：layui-btn
主題按鈕：
原始： class="layui-btn layui-btn-primary"
默認(rèn) class="layui-btn"
百搭 class="layui-btn layui-btn-normal"
暖色 class="layui-btn layui-btn-warm"
警告 class="layui-btn layui-btn-danger"
禁用 :class="layui-btn layui-btn-disabled"
尺寸:
大型 class="layui-btn layui-btn-lg"
默認(rèn) class="layui-btn"
小型 class="layui-btn layui-btn-sm"
迷你 class="layui-btn layui-btn-xs"
圓角按鈕：layui-btn-radius

<div class="layui-container" style="height:400px"><button type="button" class="layui-btn layui-btn-lg">大標(biāo)準(zhǔn)按鈕</button><button type="button" class="layui-btn-warm">暖色鈕</button><button type="button" class="layui-btn-disabled">禁用按鈕</button><button type="button" class="layui-btn-warning layui-btn-radius">警告按鈕且圓角</button> </div>

按鈕組：

八、表單框

注意：依賴加載模塊 form

layui.use(['layer', 'form'], function () {var layer = layui.layer, form = layui.form;

九、導(dǎo)航

1、普通導(dǎo)航

依賴加載模塊：element

layui-this：默認(rèn)選中
layui-nav-child：二級(jí)菜單

<ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="">C++</a></li><li class="layui-nav-item layui-this"><a href="">PHP</a></li><li class="layui-nav-item"><a href="">Python</a></li><li class="layui-nav-item"><a href="javascript:;">Java</a><dl class="layui-nav-child"> <dd><a href="">SE</a></dd><dd><a href="">EE</a></dd><dd><a href="">ME</a></dd></dl></li><li class="layui-nav-item"><a href="">C#</a></li></ul>

水平垂直側(cè)邊導(dǎo)航欄：
垂直導(dǎo)航需要追加 class：layui-nav-tree
側(cè)邊導(dǎo)航需要追加 class：layui-nav-tree layui-nav-side

2、面包屑

十、選項(xiàng)卡

依賴模塊：element

添加lay-allowClose="true 即允許刪除

十一、表格

layui-table：基礎(chǔ)表格
lay-even：用于開啟隔行背景，可與其它屬性一起使用

lay-skin="屬性值" line （行邊框風(fēng)格）row （列邊框風(fēng)格）nob （無(wú)邊框風(fēng)格）若使用默認(rèn)風(fēng)格不設(shè)置該屬性即可 lay-size="屬性值" sm （小尺寸）lg （大尺寸）若使用默認(rèn)尺寸不設(shè)置該屬性即可

十二、徽章

十三、時(shí)間線

<ul class="layui-timeline"><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">2022/1/12</h3><p>學(xué)習(xí)layui<br>好玩<br>好用 <i class="layui-icon"></i></p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">2022/1/13</h3><p>使用layui<em>完成項(xiàng)目</em></p><ul><li>****</li><li>***</li></ul></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">2022/1/14</h3><p>項(xiàng)目發(fā)布<br>感謝<br>再次感謝<br>啦啦啦</p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i><div class="layui-timeline-content layui-text"><div class="layui-timeline-title">過(guò)去</div></div></li></ul>

十四、分頁(yè)插件

依賴：laypage模塊

<div class="layui-container" style="height:400px"><div id="test1"></div> </div> <body> <script src="./layui/layui.js"></script> <script>layui.use(['layer', 'form','element','laypage'], function () {var layer = layui.layer, form = layui.form, element =layui.element,laypage=layui.laypage;//執(zhí)行一個(gè)laypage實(shí)例laypage.render({elem: 'test1' //注意，這里的 test1 是 ID，不用加 # 號(hào),count: 50 //數(shù)據(jù)總數(shù)，從服務(wù)端得到});}); </script>

十五、輪播圖

依賴模塊：carousel

<div class="layui-container" style="height:400px"><div class="layui-carousel" id="test1"><div carousel-item><div>條目1</div><div>條目2</div><div>條目3</div><div>條目4</div><div>條目5</div></div></div> </div> <body> <script src="./layui/layui.js"></script> <script>layui.use(['layer', 'form','element','laypage','carousel'], function () {var layer = layui.layer, form = layui.form, element =layui.element,laypage=layui.laypage,carousel=layui.carousel;//執(zhí)行一個(gè)carousel實(shí)例carousel.render({elem: '#test1',width: '100%' //設(shè)置容器寬度,arrow: 'always' //始終顯示箭頭//,anim: 'updown' //切換動(dòng)畫方式});}); </script>

總結(jié)

以上是生活随笔為你收集整理的Layui框架基本使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

框架
layui

上一篇：夜你太美
下一篇： UVa Online Judge 西班牙