Layui-经典模块化前端框架

最新推荐文章于 2024-06-04 17:34:22 发布

喝汤一样

最新推荐文章于 2024-06-04 17:34:22 发布

阅读量1.4k

点赞数 1

分类专栏： layui

本文链接：https://blog.csdn.net/x1206945132/article/details/111597484

版权

Layui

1. Layui简介

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

1.1 下载

官网：https://www.layui.com/

下载后的目录结构如下：

  ├─css //css目录
  │  │─modules //模块css目录
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

1.2 入门

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-demo</title>
    <!-- 引入layui的样式 -->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

<!-- 使用layUI的按钮样式-->
<button type="button" class="layui-btn">一个标准的按钮</button>

<script src="layui/layui.js"></script>
<script>
	/* 使用layUI的弹出层模块  */
	layui.use(['layer'], function(){
   
	  var layer = layui.layer; 
	  /* 弹出hello world提示 */
	  layer.msg('Hello World');
	});
	
</script> 

</body>
</html>

2. 栅格布局

如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和后台布局方案，这意味着你终于可以着手采用 layui 排版你的响应式网站和后台系统了。layui 的栅格系统采用业界比较常见的 12 等分规则，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8。而你应当更欣喜的是，layui 终于开放了它经典的后台布局方案，快速搭建一个属于你的后台系统将变得十分轻松自如。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-demo</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- <div class="layui-fluid"> : 铺满   -->
<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9 layui-col-lg6 layui-bg-blue">
      你的内容 9/12
    </div>
    <div class="layui-col-md3 layui-col-lg6 layui-bg-red">
      你的内容 3/12
    </div>
  </div>
 </div>
</body>
</html>

采用 layui-row 来定义行，如：<div class="layui-row"></div>
列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。

3. 图标

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，譬如：

<i class="layui-icon layui-icon-face-smile" ></i>

或者

<i class="layui-icon">&#xe69c;</i>

4. 按钮

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.bailiban.com" class="layui-btn">一个可跳转的按钮</a>

4.1 主题

 <button type="button" class="layui-btn  layui-btn-primary">原始按钮</button>
 <button type="button" class="layui-btn  ">默认按钮</button>
 <button type="button" class="layui-btn  layui-btn-normal">百搭按钮</button>
 <button type="button" class="layui-btn  layui-btn-warm">暖色按钮</button>
 <button type="button" class="layui-btn  layui-btn-danger">警告按钮</button>
 <button type="button" class="layui-btn  layui-btn-disabled">禁用按钮</button>

4.2 尺寸

 <button type="button" class="layui-btn  layui-btn-lg">大型按钮</button>
 <button type="button" class="layui-btn  ">默认按钮</button>
 <button type="button" class="layui-btn  layui-btn-sm">小型按钮</button>
 <button type="button" class="layui-btn  layui-btn-xs">迷你按钮</button>
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

4.3 圆角

<button type="button" class="layui-btn  layui-btn-radius layui-btn-primary">原始按钮</button>
 <button type="button" class="layui-btn  layui-btn-radius ">默认按钮</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-normal">百搭按钮</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-warm">暖色按钮</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-danger">警告按钮</button>
 <button type="button" class="layui-btn  layui-btn-radius layui-btn-disabled">禁用按钮</button>

4.4 图标按钮

<button type="button" class="layui-btn">
  <i class="layui-icon">&#xe608;</i> 添加
</button>
 
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon">&#xe605;</i>
</button>

图标字体参考图标列表。

4.5 按钮组

<div class="layui-btn-group">
  <button type="button" class="layui-btn">增加</button>
  <button type="button" class="layui-btn">编辑</button>
  <button type="button" class="layui-btn">删除</button>
</div>
      
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-sm">
    <i class="layui-icon">&#xe602;</i>
  </button>
</div>
 
<div class="layui-btn-group">
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe654;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe642;</i>
  </button>
  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
    <i class="layui-icon">&#xe640;</i>
  </button>
</div>

5. 后台布局

layui 之所以赢得如此多人的青睐，更多是在于它前后台系统通吃的能力。既可编织出绚丽的前台页面，又可满足繁杂的后台功能需求。layui 致力于让每一位开发者都能轻松搭建自己的后台。下面是 layui 提供的一个现场的方案。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-demo</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layo

最低0.47元/天解锁文章

喝汤一样

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
Layui-经典模块化前端框架

LayUI1. LayUI简介layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。1.1 下载官网：https://www.layui.com/下载后的目录结构如下： ├─css //css目录 │ │─modules //模块css目录 │ │ ├─layd
复制链接

扫一扫