默认分类

默认分类

默认分类描述

layui 已定义的 颜色 和 图标

这个比较好处理就是一个:class先引入CSS <link rel="stylesheet" href="/layui/css/layui.css"> 然后就可以直接用了。   象要红色就是
继续阅读 »
这个比较好处理就是一个:class先引入CSS
<link rel="stylesheet" href="/layui/css/layui.css">
然后就可以直接用了。

1.jpg

 
象要红色就是:
<div class="layui-bg-red">
背景为红色的DIV
</div>

图标:
<i class="layui-icon layui-icon-face-smile"></i>  
或者:
<i class="layui-icon">&#xe60c;</i>  
都可以实现图标。
内置图标(140个)
 
下面是应用列表
----------------------
半星
&#xe6c9;
layui-icon-rate-half
 
星星-空心
&#xe67b;
layui-icon-rate
 
星星-实心
&#xe67a;
layui-icon-rate-solid
 
手机
&#xe678;
layui-icon-cellphone
 
验证码
&#xe679;
layui-icon-vercode
 
微信
&#xe677;
layui-icon-login-wechat
 
QQ
&#xe676;
layui-icon-login-qq
微博
&#xe675;
layui-icon-login-weibo
 
密码
&#xe673;
layui-icon-password
 
用户名
&#xe66f;
layui-icon-username
 
刷新-粗
&#xe9aa;
layui-icon-refresh-3
 
授权
&#xe672;
layui-icon-auz
 
左向右伸缩菜单
&#xe66b;
layui-icon-spread-left
 
右向左伸缩菜单
&#xe668;
layui-icon-shrink-right
雪花
&#xe6b1;
layui-icon-snowflake
 
提示说明
&#xe702;
layui-icon-tips
 
便签
&#xe66e;
layui-icon-note
 
主页
&#xe68e;
layui-icon-home
 
高级
&#xe674;
layui-icon-senior
 
刷新
&#xe669;
layui-icon-refresh
 
刷新
&#xe666;
layui-icon-refresh-1
旗帜
&#xe66c;
layui-icon-flag
 
主题
&#xe66a;
layui-icon-theme
 
消息-通知
&#xe667;
layui-icon-notice
 
网站
&#xe7ae;
layui-icon-website
 
控制台
&#xe665;
layui-icon-console
 
表情-惊讶
&#xe664;
layui-icon-face-surprised
 
设置-空心
&#xe716;
layui-icon-set
模板
&#xe656;
layui-icon-template-1
 
应用
&#xe653;
layui-icon-app
 
模板
&#xe663;
layui-icon-template
 

&#xe6c6;
layui-icon-praise
 

&#xe6c5;
layui-icon-tread
 

&#xe662;
layui-icon-male
 

&#xe661;
layui-icon-female
相机-空心
&#xe660;
layui-icon-camera
 
相机-实心
&#xe65d;
layui-icon-camera-fill
 
菜单-水平
&#xe65f;
layui-icon-more
 
菜单-垂直
&#xe671;
layui-icon-more-vertical
 
金额-人民币
&#xe65e;
layui-icon-rmb
 
金额-美元
&#xe659;
layui-icon-dollar
 
钻石-等级
&#xe735;
layui-icon-diamond

&#xe756;
layui-icon-fire
 
返回
&#xe65c;
layui-icon-return
 
位置-地图
&#xe715;
layui-icon-location
 
办公-阅读
&#xe705;
layui-icon-read
 
调查
&#xe6b2;
layui-icon-survey
 
表情-微笑
&#xe6af;
layui-icon-face-smile
 
表情-哭泣
&#xe69c;
layui-icon-face-cry
购物车
&#xe698;
layui-icon-cart-simple
 
购物车
&#xe657;
layui-icon-cart
 
下一页
&#xe65b;
layui-icon-next
 
上一页
&#xe65a;
layui-icon-prev
 
上传-空心-拖拽
&#xe681;
layui-icon-upload-drag
 
上传-实心
&#xe67c;
layui-icon-upload
 
下载-圆圈
&#xe601;
layui-icon-download-circle
组件
&#xe857;
layui-icon-component
 
文件-粗
&#xe655;
layui-icon-file-b
 
用户
&#xe770;
layui-icon-user
 
发现-实心
&#xe670;
layui-icon-find-fill
 
loading
&#xe63d;
layui-icon-loading
 
loading
&#xe63e;
layui-icon-loading-1
 
添加
&#xe654;
layui-icon-add-1
播放
&#xe652;
layui-icon-play
 
暂停
&#xe651;
layui-icon-pause
 
音频-耳机
&#xe6fc;
layui-icon-headset
 
视频
&#xe6ed;
layui-icon-video
 
语音-声音
&#xe688;
layui-icon-voice
 
消息-通知-喇叭
&#xe645;
layui-icon-speaker
 
删除线
&#xe64f;
layui-icon-fonts-del
代码
&#xe64e;
layui-icon-fonts-code
 
HTML
&#xe64b;
layui-icon-fonts-html
 
字体加粗
&#xe62b;
layui-icon-fonts-strong
 
删除链接
&#xe64d;
layui-icon-unlink
 
图片
&#xe64a;
layui-icon-picture
 
链接
&#xe64c;
layui-icon-link
 
表情-笑-粗
&#xe650;
layui-icon-face-smile-b
左对齐
&#xe649;
layui-icon-align-left
 
右对齐
&#xe648;
layui-icon-align-right
 
居中对齐
&#xe647;
layui-icon-align-center
 
字体-下划线
&#xe646;
layui-icon-fonts-u
 
字体-斜体
&#xe644;
layui-icon-fonts-i
 
Tabs 选项卡
&#xe62a;
layui-icon-tabs
 
单选框-选中
&#xe643;
layui-icon-radio
单选框-候选
&#xe63f;
layui-icon-circle
 
编辑
&#xe642;
layui-icon-edit
 
分享
&#xe641;
layui-icon-share
 
删除
&#xe640;
layui-icon-delete
 
表单
&#xe63c;
layui-icon-form
 
手机-细体
&#xe63b;
layui-icon-cellphone-fine
 
聊天 对话 沟通
&#xe63a;
layui-icon-dialogue
文字格式化
&#xe639;
layui-icon-fonts-clear
 
窗口
&#xe638;
layui-icon-layer
 
日期
&#xe637;
layui-icon-date
 
水 下雨
&#xe636;
layui-icon-water
 
代码-圆圈
&#xe635;
layui-icon-code-circle
 
轮播组图
&#xe634;
layui-icon-carousel
 
翻页
&#xe633;
layui-icon-prev-circle
布局
&#xe632;
layui-icon-layouts
 
工具
&#xe631;
layui-icon-util
 
选择模板
&#xe630;
layui-icon-templeate-1
 
上传-圆圈
&#xe62f;
layui-icon-upload-circle
 

&#xe62e;
layui-icon-tree
 
表格
&#xe62d;
layui-icon-table
 
图表
&#xe62c;
layui-icon-chart
图标 报表 屏幕
&#xe629;
layui-icon-chart-screen
 
引擎
&#xe628;
layui-icon-engine
 
下三角
&#xe625;
layui-icon-triangle-d
 
右三角
&#xe623;
layui-icon-triangle-r
 
文件
&#xe621;
layui-icon-file
 
设置-小型
&#xe620;
layui-icon-set-sm
 
添加-圆圈
&#xe61f;
layui-icon-add-circle
404
&#xe61c;
layui-icon-404
 
关于
&#xe60b;
layui-icon-about
 
箭头 向上
&#xe619;
layui-icon-up
 
箭头 向下
&#xe61a;
layui-icon-down
 
箭头 向左
&#xe603;
layui-icon-left
 
箭头 向右
&#xe602;
layui-icon-right
 
圆点
&#xe617;
layui-icon-circle-dot
搜索
&#xe615;
layui-icon-search
 
设置-实心
&#xe614;
layui-icon-set-fill
 
群组
&#xe613;
layui-icon-group
 
好友
&#xe612;
layui-icon-friends
 
回复 评论 实心
&#xe611;
layui-icon-reply-fill
 
菜单 隐身 实心
&#xe60f;
layui-icon-menu-fill
 
记录
&#xe60e;
layui-icon-log
图片-细体
&#xe60d;
layui-icon-picture-fine
 
表情-笑-细体
&#xe60c;
layui-icon-face-smile-fine
 
列表
&#xe60a;
layui-icon-list
 
发布 纸飞机
&#xe609;
layui-icon-release
 
对 OK
&#xe605;
layui-icon-ok
 
帮助
&#xe607;
layui-icon-help
 
客服
&#xe606;
layui-icon-chat
top 置顶
&#xe604;
layui-icon-top
 
收藏-空心
&#xe600;
layui-icon-star
 
收藏-实心
&#xe658;
layui-icon-star-fill
 
关闭-实心
&#x1007;
layui-icon-close-fill
 
关闭-空心
&#x1006;
layui-icon-close
 
正确
&#x1005;
layui-icon-ok-circle
 
添加-圆圈-细体
&#xe608;
layui-icon-add-circle-fine
  收起阅读 »

layui 栅格系统与后台布局 响应式设计

学习过bootstrap的都了解栅格系统。layui只是换下个标识,和bootstrap的功能一样。 现在很多网站。都说:响应式设计,而响应式设计。栅格系统实现比较易。只要加入CSS会自动的适应窗口的大小。 判断是不是响应式设计。只要把:浏览器的窗口任意调整大
继续阅读 »
学习过bootstrap的都了解栅格系统。layui只是换下个标识,和bootstrap的功能一样。
现在很多网站。都说:响应式设计,而响应式设计。栅格系统实现比较易。只要加入CSS会自动的适应窗口的大小。
判断是不是响应式设计。只要把:浏览器的窗口任意调整大小。看网页的变化就可以了。响应式设计,会自动适应你拉大,或者拉小的窗口。象我们的:orcode.com 响应式设计。
浏览器窗口大于1200PX时。

1.jpg

而当浏览器窗口放小时:

2.jpg

可以看到变化。
 
自动变化的。现在有些网站建设公司,做了手机判断然后跳转。也说是:响应式设计骗不会的人。
 
而这些变化用了:栅格系统就很易实现。
 
栅格系统是以:%来定义的。到一定的宽度时(浏览器窗口)。重新定义这个:%
把窗口等分成:12份。分别有:
layui-col-xs*  (手机<768px) xs等于是:固定的宽度%,不会变化:100%。
layui-col-sm* (平板≥768px) ,当条件不合时。就是:小于:768时。会变化为:100%;
layui-col-dm* (桌面≥992px) ,当条件不合时。就是:小于:992时。会变化为:100%;
layui-col-lg* (桌面≥1200x) ,当条件不合时。就是:小于:1200时。会变化为:100%;
 
*号是:1到12。反正就是:加起来是:12,象:
layui-col-sm7,layui-col-sm5   =就是一行:12
<div>
<div class="layui-col-sm7"></div>
<div class="layui-col-sm5"></div>
</div>
layui-col-sm7 就是:100%/12*7=58.3333333%宽度
layui-col-sm5 就是:100%/12*5=41.6666666%宽度
要想这二个宽度在行就用了:float: 。而一用:float: 就会出现:下面的内容要: clear: both.才不错位。
而自带的就有:layui-row。那上面的代码可以写成:
<div class="layui-row">
<div class="layui-col-sm7"></div>
<div class="layui-col-sm5"></div>
</div>
这样子就是:一行。二格。每格宽度。上面有计算。
当页面:变小时。会:变成:二行二格。一行占一格。
灵活的用。那可以多个一起用。象:大屏时:一行三格。变小时。变成:一行二格。那就连用来实现:
<div class="layui-row">
<div class="layui-col-sm4 layui-col-xs6"></div>
<div class="layui-col-sm4 layui-col-xs6"></div>
<div class="layui-col-sm4 layui-col-xs6"></div>
</div>
layui-col-xs6起到变小后的效果
而这些可以大部份要求。有些特别要求的。象:小于多少变不显示。大于多少就显示。在:layui的介绍中没有发现这些功能。有不足之入。而:bootstrap就有:
 
 
bootstrap就有
.visible-xs-*
visible-sm-*
.visible-md-*
.visible-lg-*
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
来实现更多响应式设计。
layui响应式方面。还要改进。可能是:文档中没有写出来。
  收起阅读 »

01 下载layui放到任意目录引入CSS与JS

点击附件下载 layui 当前版本:2.5.4 目录说明 ├─css //css目录 │ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:) │ │ ├─laydate │ │ ├─layer
继续阅读 »
点击附件下载 layui 当前版本:2.5.4
目录说明
 ├─css //css目录
│ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件
如果是放在网站根目录.引入CSS 和JS

<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>

因为:layui自带了jquery.自动判断没有加载时自动加载.所以不用添加:jquery.js
完整测试代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="layui/css/layui.css">
<title>无标题文档</title>
</head>

<body>
test

</body>

<script src="layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer'], function(){
var layer = layui.layer;

layer.msg('Hello World');
});
</script>


</html>




360截图162204258981119.jpg
收起阅读 »