layui 已定义的 颜色 和 图标
这个比较好处理就是一个:class先引入CSS
<link rel="stylesheet" href="/layui/css/layui.css">
然后就可以直接用了。
象要红色就是:
图标:
<i class="layui-icon layui-icon-face-smile"></i>
或者:
<i class="layui-icon"></i>
都可以实现图标。
内置图标(140个)
下面是应用列表
----------------------
半星

layui-icon-rate-half
星星-空心

layui-icon-rate
星星-实心

layui-icon-rate-solid
手机

layui-icon-cellphone
验证码

layui-icon-vercode
微信

layui-icon-login-wechat
QQ

layui-icon-login-qq
微博

layui-icon-login-weibo
密码

layui-icon-password
用户名

layui-icon-username
刷新-粗

layui-icon-refresh-3
授权

layui-icon-auz
左向右伸缩菜单

layui-icon-spread-left
右向左伸缩菜单

layui-icon-shrink-right
雪花

layui-icon-snowflake
提示说明

layui-icon-tips
便签

layui-icon-note
主页

layui-icon-home
高级

layui-icon-senior
刷新

layui-icon-refresh
刷新

layui-icon-refresh-1
旗帜

layui-icon-flag
主题

layui-icon-theme
消息-通知

layui-icon-notice
网站

layui-icon-website
控制台

layui-icon-console
表情-惊讶

layui-icon-face-surprised
设置-空心

layui-icon-set
模板

layui-icon-template-1
应用

layui-icon-app
模板

layui-icon-template
赞

layui-icon-praise
踩

layui-icon-tread
男

layui-icon-male
女

layui-icon-female
相机-空心

layui-icon-camera
相机-实心

layui-icon-camera-fill
菜单-水平

layui-icon-more
菜单-垂直

layui-icon-more-vertical
金额-人民币

layui-icon-rmb
金额-美元

layui-icon-dollar
钻石-等级

layui-icon-diamond
火

layui-icon-fire
返回

layui-icon-return
位置-地图

layui-icon-location
办公-阅读

layui-icon-read
调查

layui-icon-survey
表情-微笑

layui-icon-face-smile
表情-哭泣

layui-icon-face-cry
购物车

layui-icon-cart-simple
购物车

layui-icon-cart
下一页

layui-icon-next
上一页

layui-icon-prev
上传-空心-拖拽

layui-icon-upload-drag
上传-实心

layui-icon-upload
下载-圆圈

layui-icon-download-circle
组件

layui-icon-component
文件-粗

layui-icon-file-b
用户

layui-icon-user
发现-实心

layui-icon-find-fill
loading

layui-icon-loading
loading

layui-icon-loading-1
添加

layui-icon-add-1
播放

layui-icon-play
暂停

layui-icon-pause
音频-耳机

layui-icon-headset
视频

layui-icon-video
语音-声音

layui-icon-voice
消息-通知-喇叭

layui-icon-speaker
删除线

layui-icon-fonts-del
代码

layui-icon-fonts-code
HTML

layui-icon-fonts-html
字体加粗

layui-icon-fonts-strong
删除链接

layui-icon-unlink
图片

layui-icon-picture
链接

layui-icon-link
表情-笑-粗

layui-icon-face-smile-b
左对齐

layui-icon-align-left
右对齐

layui-icon-align-right
居中对齐

layui-icon-align-center
字体-下划线

layui-icon-fonts-u
字体-斜体

layui-icon-fonts-i
Tabs 选项卡

layui-icon-tabs
单选框-选中

layui-icon-radio
单选框-候选

layui-icon-circle
编辑

layui-icon-edit
分享

layui-icon-share
删除

layui-icon-delete
表单

layui-icon-form
手机-细体

layui-icon-cellphone-fine
聊天 对话 沟通

layui-icon-dialogue
文字格式化

layui-icon-fonts-clear
窗口

layui-icon-layer
日期

layui-icon-date
水 下雨

layui-icon-water
代码-圆圈

layui-icon-code-circle
轮播组图

layui-icon-carousel
翻页

layui-icon-prev-circle
布局

layui-icon-layouts
工具

layui-icon-util
选择模板

layui-icon-templeate-1
上传-圆圈

layui-icon-upload-circle
树

layui-icon-tree
表格

layui-icon-table
图表

layui-icon-chart
图标 报表 屏幕

layui-icon-chart-screen
引擎

layui-icon-engine
下三角

layui-icon-triangle-d
右三角

layui-icon-triangle-r
文件

layui-icon-file
设置-小型

layui-icon-set-sm
添加-圆圈

layui-icon-add-circle
404

layui-icon-404
关于

layui-icon-about
箭头 向上

layui-icon-up
箭头 向下

layui-icon-down
箭头 向左

layui-icon-left
箭头 向右

layui-icon-right
圆点

layui-icon-circle-dot
搜索

layui-icon-search
设置-实心

layui-icon-set-fill
群组

layui-icon-group
好友

layui-icon-friends
回复 评论 实心

layui-icon-reply-fill
菜单 隐身 实心

layui-icon-menu-fill
记录

layui-icon-log
图片-细体

layui-icon-picture-fine
表情-笑-细体

layui-icon-face-smile-fine
列表

layui-icon-list
发布 纸飞机

layui-icon-release
对 OK

layui-icon-ok
帮助

layui-icon-help
客服

layui-icon-chat
top 置顶

layui-icon-top
收藏-空心

layui-icon-star
收藏-实心

layui-icon-star-fill
关闭-实心
ဇ
layui-icon-close-fill
关闭-空心
ဆ
layui-icon-close
正确
စ
layui-icon-ok-circle
添加-圆圈-细体

layui-icon-add-circle-fine
收起阅读 »
<link rel="stylesheet" href="/layui/css/layui.css">
然后就可以直接用了。
象要红色就是:
<div class="layui-bg-red">
背景为红色的DIV
</div>
图标:
<i class="layui-icon layui-icon-face-smile"></i>
或者:
<i class="layui-icon"></i>
都可以实现图标。
内置图标(140个)
下面是应用列表
----------------------
半星

layui-icon-rate-half
星星-空心

layui-icon-rate
星星-实心

layui-icon-rate-solid
手机

layui-icon-cellphone
验证码

layui-icon-vercode
微信

layui-icon-login-wechat

layui-icon-login-qq
微博

layui-icon-login-weibo
密码

layui-icon-password
用户名

layui-icon-username
刷新-粗

layui-icon-refresh-3
授权

layui-icon-auz
左向右伸缩菜单

layui-icon-spread-left
右向左伸缩菜单

layui-icon-shrink-right
雪花

layui-icon-snowflake
提示说明

layui-icon-tips
便签

layui-icon-note
主页

layui-icon-home
高级

layui-icon-senior
刷新

layui-icon-refresh
刷新

layui-icon-refresh-1
旗帜

layui-icon-flag
主题

layui-icon-theme
消息-通知

layui-icon-notice
网站

layui-icon-website
控制台

layui-icon-console
表情-惊讶

layui-icon-face-surprised
设置-空心

layui-icon-set
模板

layui-icon-template-1
应用

layui-icon-app
模板

layui-icon-template
赞

layui-icon-praise
踩

layui-icon-tread
男

layui-icon-male
女

layui-icon-female
相机-空心

layui-icon-camera
相机-实心

layui-icon-camera-fill
菜单-水平

layui-icon-more
菜单-垂直

layui-icon-more-vertical
金额-人民币

layui-icon-rmb
金额-美元

layui-icon-dollar
钻石-等级

layui-icon-diamond
火

layui-icon-fire
返回

layui-icon-return
位置-地图

layui-icon-location
办公-阅读

layui-icon-read
调查

layui-icon-survey
表情-微笑

layui-icon-face-smile
表情-哭泣

layui-icon-face-cry
购物车

layui-icon-cart-simple
购物车

layui-icon-cart
下一页

layui-icon-next
上一页

layui-icon-prev
上传-空心-拖拽

layui-icon-upload-drag
上传-实心

layui-icon-upload
下载-圆圈

layui-icon-download-circle
组件

layui-icon-component
文件-粗

layui-icon-file-b
用户

layui-icon-user
发现-实心

layui-icon-find-fill
loading

layui-icon-loading
loading

layui-icon-loading-1
添加

layui-icon-add-1
播放

layui-icon-play
暂停

layui-icon-pause
音频-耳机

layui-icon-headset
视频

layui-icon-video
语音-声音

layui-icon-voice
消息-通知-喇叭

layui-icon-speaker
删除线

layui-icon-fonts-del
代码

layui-icon-fonts-code
HTML

layui-icon-fonts-html
字体加粗

layui-icon-fonts-strong
删除链接

layui-icon-unlink
图片

layui-icon-picture
链接

layui-icon-link
表情-笑-粗

layui-icon-face-smile-b
左对齐

layui-icon-align-left
右对齐

layui-icon-align-right
居中对齐

layui-icon-align-center
字体-下划线

layui-icon-fonts-u
字体-斜体

layui-icon-fonts-i
Tabs 选项卡

layui-icon-tabs
单选框-选中

layui-icon-radio
单选框-候选

layui-icon-circle
编辑

layui-icon-edit
分享

layui-icon-share
删除

layui-icon-delete
表单

layui-icon-form
手机-细体

layui-icon-cellphone-fine
聊天 对话 沟通

layui-icon-dialogue
文字格式化

layui-icon-fonts-clear
窗口

layui-icon-layer
日期

layui-icon-date
水 下雨

layui-icon-water
代码-圆圈

layui-icon-code-circle
轮播组图

layui-icon-carousel
翻页

layui-icon-prev-circle
布局

layui-icon-layouts
工具

layui-icon-util
选择模板

layui-icon-templeate-1
上传-圆圈

layui-icon-upload-circle
树

layui-icon-tree
表格

layui-icon-table
图表

layui-icon-chart
图标 报表 屏幕

layui-icon-chart-screen
引擎

layui-icon-engine
下三角

layui-icon-triangle-d
右三角

layui-icon-triangle-r
文件

layui-icon-file
设置-小型

layui-icon-set-sm
添加-圆圈

layui-icon-add-circle
404

layui-icon-404
关于

layui-icon-about
箭头 向上

layui-icon-up
箭头 向下

layui-icon-down
箭头 向左

layui-icon-left
箭头 向右

layui-icon-right
圆点

layui-icon-circle-dot
搜索

layui-icon-search
设置-实心

layui-icon-set-fill
群组

layui-icon-group
好友

layui-icon-friends
回复 评论 实心

layui-icon-reply-fill
菜单 隐身 实心

layui-icon-menu-fill
记录

layui-icon-log
图片-细体

layui-icon-picture-fine
表情-笑-细体

layui-icon-face-smile-fine
列表

layui-icon-list
发布 纸飞机

layui-icon-release
对 OK

layui-icon-ok
帮助

layui-icon-help
客服

layui-icon-chat
top 置顶

layui-icon-top
收藏-空心

layui-icon-star
收藏-实心

layui-icon-star-fill
关闭-实心
ဇ
layui-icon-close-fill
关闭-空心
ဆ
layui-icon-close
正确
စ
layui-icon-ok-circle
添加-圆圈-细体

layui-icon-add-circle-fine
收起阅读 »
layui 栅格系统与后台布局 响应式设计
学习过bootstrap的都了解栅格系统。layui只是换下个标识,和bootstrap的功能一样。
现在很多网站。都说:响应式设计,而响应式设计。栅格系统实现比较易。只要加入CSS会自动的适应窗口的大小。
判断是不是响应式设计。只要把:浏览器的窗口任意调整大小。看网页的变化就可以了。响应式设计,会自动适应你拉大,或者拉小的窗口。象我们的:orcode.com 响应式设计。
浏览器窗口大于1200PX时。
而当浏览器窗口放小时:
可以看到变化。
自动变化的。现在有些网站建设公司,做了手机判断然后跳转。也说是:响应式设计骗不会的人。
而这些变化用了:栅格系统就很易实现。
栅格系统是以:%来定义的。到一定的宽度时(浏览器窗口)。重新定义这个:%
把窗口等分成: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
layui-col-sm5 就是:100%/12*5=41.6666666%宽度
要想这二个宽度在行就用了:float: 。而一用:float: 就会出现:下面的内容要: clear: both.才不错位。
而自带的就有:layui-row。那上面的代码可以写成:
当页面:变小时。会:变成:二行二格。一行占一格。
灵活的用。那可以多个一起用。象:大屏时:一行三格。变小时。变成:一行二格。那就连用来实现:
bootstrap就有
.visible-xs-*
visible-sm-*
.visible-md-*
.visible-lg-*
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
来实现更多响应式设计。
layui响应式方面。还要改进。可能是:文档中没有写出来。
收起阅读 »
现在很多网站。都说:响应式设计,而响应式设计。栅格系统实现比较易。只要加入CSS会自动的适应窗口的大小。
判断是不是响应式设计。只要把:浏览器的窗口任意调整大小。看网页的变化就可以了。响应式设计,会自动适应你拉大,或者拉小的窗口。象我们的:orcode.com 响应式设计。
浏览器窗口大于1200PX时。
而当浏览器窗口放小时:
可以看到变化。
自动变化的。现在有些网站建设公司,做了手机判断然后跳转。也说是:响应式设计骗不会的人。
而这些变化用了:栅格系统就很易实现。
栅格系统是以:%来定义的。到一定的宽度时(浏览器窗口)。重新定义这个:%
把窗口等分成: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>layui-col-sm7 就是:100%/12*7=58.3333333%宽度
<div class="layui-col-sm7"></div>
<div class="layui-col-sm5"></div>
</div>
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
目录说明
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
因为:layui自带了jquery.自动判断没有加载时自动加载.所以不用添加:jquery.js
完整测试代码:
收起阅读 »
目录说明
├─css //css目录如果是放在网站根目录.引入CSS 和JS
│ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.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>
收起阅读 »