layui镜像网站（Layui框架：layui的格栅布局规则）

本文目录

• Layui框架：layui的格栅布局规则
• layui怎么引用
• web前端工程师都喜欢去哪些学习网站逛
• layui和elementui哪个好
• bootstrap与layui的不同之处有哪些
• 前端ui框架有哪些
• Layui 镜像网站
• layui组件有哪些

Layui框架：layui的格栅布局规则

在layui框架中，任何行上方不允许存在浮动元素。

先使用 class="layui-container" 在网页上划分出一个区域，该区域专门使用layui的布局模块。
Layui框架中采用 class="layui-row" 去在layui的布局模块中新建一个行，然后使用 layui-col 这样的预设类来定义一组列(column)，并且放在行内。
layui-col 的后面还需要跟上两组参数，具体格式如下：

大于等于992px时

元素的宽度，列数，显示类型等变化都是基于响应式网站设计理念而来，之所以UI框架加入这一特性，目的是为了能够使UI框架的适用范围更大。

格式：
layui-col-space$ $为数字，代表每一列内容的间距，从本质上讲：这个间距是加在了每一个layui-col的左右内边距上的像素。

格式：
ayui-col-屏幕类型-offset$ $为数字，代表该列内容距离左边内容的偏移的列数
如果列宽+列偏移 》 12，那么自动换行，换到下一行的列如果具备偏移的性质，那么该偏移会依旧生效。

layui怎么引用

layui 怎么引用
在下载layui后如何快速将其引入至项目中，layui是一款经典模块化前端ui，它的模块是基于 layui.js 内部实现的异步模块加载方式 ，与日常所熟知的AMD 规范有所区别，有一套完全属于layui定义的模块加载规范，通过预加载方式，这也是layui官方所推荐的方式，将下载到的源码引入项目只需要引入layui.css和layui.js两个文件，通过layui.use()方法完成需要使用的模块加载。
如下示例所示：加载layui内置的jquery稳定版本和layer组件
【当我们在初次接触layui时，如果还没有耐心读完layui官方文档，我们可以先记住使用格式和使用规范，能正常用了再深入，不要纠结于细节而停步不前，我遇到过一些交流layui使用的用户，他还没看过文档就直接去读layui源码的，结果还是云里雾里，误以为直奔源码是最佳方式，一叶障目而不见泰山，两耳塞豆而不闻雷霆；
个人观点：如果作为学习时又觉得撇开文档直接去读源码的方式适合自己 暂不做评论，但若是用于工作此种方式个人认为是最为笨拙的，因此官方文档对初学者是必读的，而不是直接上来就去看源码，本系列文档可作为larryms产品使用的前提基础，若是初次接触推荐阅读，若有瑕疵可在评论中给予斧正】
code
《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》Document《/title》
《link rel="stylesheet" href="layui/css/layui.css"》
《!-- your css link --》
《/head》
《body》
《!-- you html code --》
《script type="text/javascript" src="layui/layui.js"》《/script》
《script》
layui.use(,function(){

var $ = layui.$,
layer = layui.layer;
#your js coding
});
《/script》
《/body》
《/html》备注：
预加载的方式无论从代码可维护度、阅读便利以及代码优雅美观方面是要强于按需加载避免随从可见的layui.use()造成混乱，曾遇到过对网站性能的极致苛求用户使用按需加载方式【不推荐使用按需加载方式】，按需加载如果对变量的作用域等关系处理不当也容易出现错误且不便于后期维护，当然在某些特定的情况下 可以配合layui.cache.xx全局变量使用按需加载也是相对较好的方式；
但同时也不建议直接引入 layui.all.js一次性全加载（全加载方式似乎失去了layui模块化的意义）； layui的模块组件通过预加载方式在larryms的产品中是比较常见的。
更多Layui相关技术文章，请访问Layui框架教程栏目进行学习！

web前端工程师都喜欢去哪些学习网站逛

1.w3school 在线教程:相信知道前端的同学都知道这个网站，这也算是一个前端只是比较全的网站了，里面主要是一些web相关的基础知识。
2.w3cplus_引领web前沿，打造前端精品教程：看到这个名字就很神奇了，居然是w3c的plus版本，这个网站主要分享一些技术文章和一些教程，很不错的。
3.慕课网-程序员的梦工厂：这个网站相信很多人都会用到的，一个程序员在线学习网站，里面有丰富的教程，资源等等。

layui和elementui哪个好

ElementUI和LayUI都有各自的特点，不能简单地说哪个更好。以下是它们的一些比较：
1. 技术实现：LayUI是基于jQuery的，而ElementUI是在Vue.js的基础框架上成型的。因此，在技术上，ElementUI更先进一些。
2. 适用场景：LayUI适用于搭建比较基础的展示型网站，而ElementUI适合搭建交互复杂的网站。
3. 界面美观度：LayUI的界面漂亮，组件齐全，使用起来简单方便，但图标较少。ElementUI则界面美观，组件齐全，代码简洁，图标量相对较大。
4. 功能组件：ElementUI在组件的功能性上整体占优势，大多数组件提供的功能都较多。
5. 按需加载：ElementUI和LayUI都支持按需加载。
综上所述，无法简单地说哪个更好，因为它们各有优点。选择哪个取决于具体的需求和技术偏好。

bootstrap与layui的不同之处有哪些

bootstrap与layui的不同之处有适用范围不同，前者适合开发网站，后者适合做后端框架；大小不同，前者因为成熟所以存在代码冗余，后者是属于轻量级的
bootstrap与layui都是前端开发框架，但是它们之间还存在一些不同之处，接下来在文章中将为大家详细介绍
【推荐课程：bootstrap教程】
bootstrap与layui的含义：
Bootstrap
是由美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 语言开发的简洁、直观、强悍的前端开发框架，它的出现使得 Web 开发更加快捷
layui
是一款采用自身模块规范编写的前端 UI 框架，遵循原生的HTML/CSS/JS代码书写的组织形式。它体积轻盈，组件丰盈，从核心代码到API 的每一处细节都经过精心雕琢，非常适合界面的快速开发
bootstrap与layui之间的对比
适用范围：
bootstrap在前端响应式方面做得很好，由于它在PC端和移动端表现都不错，所以适合用其开发网站
尤其是类似官网而且需要同时满足pc端和移动端的效果，bootstrap的表现更好
layui 框架更偏向与后端开发人员使用，在服务端页面上有非常好的效果，适合做后台框架
layui是提供给后端开发人员最好的ui框架，基于DOM驱动，在实现前端交互上比较麻烦，页面的增删改查都需要查询DOM元素。所以在不需要交互的时候，用layui还是不错的。
大小：
layui框架是属于轻量级
bootsrap框架由于比layui框架成熟，所以使用方便，但是同时也显得有些冗余
总结：

前端ui框架有哪些

前端ui框架有哪些？前端ui框架有：适合移动端的UI框架（Mint UI、SUI Mobile、Weui等），适合PC 端的UI框架（iView、Element UI、SUI、H-ui等），适合混合开发的UI框架（ionic、Framework7等），以下是具体的内容介绍。
适合移动端的UI框架
Mint UI（饿了么团队）
***隐藏网址***
描述：基于vue的移动端UI框架
基于vue
组件库：
***隐藏网址***
预览地址：
***隐藏网址***
基础引入：
CDN:
《!-- 引入样式 --》
***隐藏网址***
《!-- 引入组件库 --》
***隐藏网址***
***隐藏网址***
描述：一套基于 Framework7 开发的UI库。基于IOS风格。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，
并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。
基于zepto，IOS风格
预览：
***隐藏网址***
组件库：
***隐藏网址***
基础引入：
CDN:
《!-- 引入样式 --》
《link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"》
《!-- 引入组件库 --》
《script type=’text/javascript’ src=’//g.alicdn.com/sj/lib/zepto/zepto.min.js’ charset=’utf-8’》《/script》
《script type=’text/javascript’ src=’//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js’ charset=’utf-8’》《/script》Weui（微信官方设计团队）
描述：WeUI 为微信 Web 服务量身设计,是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。
包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
***隐藏网址***
预览：
***隐藏网址***
***隐藏网址***
基础引入：
CDN：
《!-- 引入样式 --》
***隐藏网址***
《!-- 引入组件库 --》
***隐藏网址***
***隐藏网址***
描述：一只注重审美，且性能高效的移动端&微信UI。基于jQuery
兼容性：兼容绝大多数移动端设备（兼容Android4.0+、IOS6.0+）；
采用 flexbox 布局，因低版本安卓及部分特殊浏览器不兼容flex-basis、flex-wrap、inline-flex属性，YDUI 将采取其他解决方案；
基础引入：（需要下载）
引入YDUI样式：ydui.css
引入YDUI自适应解决方案类库：ydui.flexible.js
引入jQuery2.0+
引入YDUI脚本：ydui.js
组件库：
预览：
***隐藏网址***
***隐藏网址***
个人观点：自定义keyBoard插件为亮点
GMU（百度GMU小组开发）
描述：基于zepto的轻量级mobile UI组件库，符合jquery ui使用规范，提供webapp、pad端简单易用的UI组件。
兼容iOS3+ / android2.1+，支持国内主流移动端浏览器，如safari, chrome, UC, qq等。
***隐藏网址***
star:1106,fork:461
latest commit 2017.4.18 2pm
8 contributors
基础引入：
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
FrozenUI（QQVIP FD团队? Alloyteam团队）
***隐藏网址***
描述：简单易用，轻量快捷，为移动端服务的前端框架。基于手Q样式规范。应用在腾讯手Q增值业务。兼容android 2.3 +，ios 4.0 + 。
***隐藏网址***
个人观点：JS组件库相对简洁，移动优先
Foundation
***隐藏网址***
描述：Foundation是国外最流行的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
***隐藏网址***
基础引入：
CDN:
《!-- 引入样式 --》
***隐藏网址***
《!-- 引入组件库 --》
***隐藏网址***
Amaze UI
***隐藏网址***
描述：中国首个开源 HTML5 跨屏前端框架。Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果。基于jQuery
***隐藏网址***
组件库：
基础引入：
CDN:
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
Pure
***隐藏网址***
描述：纯CSS，美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。
***隐藏网址***
基础引入：
CDN:
***隐藏网址***
iView
***隐藏网址***
描述：一套基于 Vue.js 的高质量 UI 组件库。iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。
***隐藏网址***
组件库：
基础引入：
CDN：
《!-- import Vue.js --》
《script src="//vuejs.org/js/vue.min.js"》《/script》
《!-- import stylesheet --》
《link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"》
《!-- import iView --》
《script src="//unpkg.com/iview/dist/iview.min.js"》《/script》Element UI（饿了么团队）
***隐藏网址***
描述：基于 Vue 2.0 的桌面端组件库
***隐藏网址***
组件库：
基础引入：
CDN:
***隐藏网址***
***隐藏网址***
***隐藏网址***
描述：一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。基于jquery
组件库：
***隐藏网址***
基础引入：
CDN:
***隐藏网址***
***隐藏网址***
***隐藏网址***
H-ui
***隐藏网址***
描述：轻量级前端框架，简单免费，兼容性好，服务中国网站。
基于jQuery
***隐藏网址***
组件库：
观点：无亮点,借鉴第三方插件完成
layui
***隐藏网址***
描述：经典模块化前端框架，更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。
组件库：
***隐藏网址***
基础引入：
layui.css、layui.js
uiKit（YOOtheme 团队）
***隐藏网址***
描述：一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。依赖jQuery
UIkit 兼容 IE9 以上现代浏览器。在 IE8 及其以下版本中，所有JavaScript 都会失效。
组件库：
***隐藏网址***
基础引入：
CDN:
《link rel="stylesheet" href="//cdn.bootcss.com/uikit/2.25.0/css/uikit.css" /》
《script src="//cdn.bootcss.com/uikit/2.25.0/js/uikit.js"》《/script》Bootstrap
***隐藏网址***
描述：简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
组件库：
***隐藏网址***
基础引入：
CDN：
《!-- 最新版本的 Bootstrap 核心 CSS 文件 --》
***隐藏网址***
《!-- 可选的 Bootstrap 主题文件（一般不用引入） --》
***隐藏网址***
《!-- 最新的 Bootstrap 核心 JavaScript 文件 --》
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
jQuery UI
***隐藏网址***
组件库：
其他基于jQuery衍生出来的模板：
***隐藏网址***
***隐藏网址***
描述：使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
***隐藏网址***
适合混合开发的UI框架
ionic
***隐藏网址***
描述：ionic是一个强大的 HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)。基于angular
ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。
Framework7
***隐藏网址***
描述：Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。
也可以用来作为原型开发工具，可以迅速创建一个应用的原型。
它只专注于为 iOS 和 Google Material 设计提供最好的体验。
***隐藏网址***
OnsenUI
***隐藏网址***
描述：用来构建混合移动端APP的 HTML5 UI 框架
***隐藏网址***
总结：

Layui 镜像网站

***隐藏网址***
***隐藏网址***

***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***

layui组件有哪些

尽管layui中包含了这些组件，但因为它们受众群体广泛或应用广泛，特从layui中抽取出来个副本，可独立引用。我们也会对它们进行同步维护。
layui有三大独立组件。
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被9417618人次关注）。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。
layer 采用 MIT 开源许可证，将会永久性提供无偿服务。因着数年的坚持维护，截至到2017年9月13日，已运用在超过 30万 家 Web 平台，其中不乏众多知名大型网站。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案，并且她仍在与 Layui 一并高速发展。
layDate组件在 layui 2.0 的版本中迎来一次重生。无论曾经它给你带来过多么糟糕的体验，从今往后，所有的旧坑都将弥合。全面重写的 layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。内置强劲的自定义日期格式解析和合法校正机制，含中文版和国际版，主题简约却又不失灵活多样。由于内部采用的是零依赖的原生 JavaScript 编写，因此又可作为独立组件使用。
在WebIM似乎已被打入冷宫的今天，LayIM正试图重新为网页带来一些社交想象。作为一款Web即时通讯前端解决方案（服务端需自写），LayIM提供了全方位的前端接口支撑，不仅能让您更高效地接入到自己的通讯服务中，更能让你轻松地与 环信、融云、野狗 等第三方通讯服务平台对接。LayIM始终坚持极简的体验，致力于拉近你的用户在web间的距离。
LayIM基于layui模块体系，因此你获得的其实是一个包含LayIM的layui框架，不同的是，开源版的layui并不包含LayIM。
更多Layui相关技术文章，请访问Layui教程栏目进行学习！