BootStrap与LayUI学习重点

最新推荐文章于 2024-04-26 16:15:29 发布
最新推荐文章于 2024-04-26 16:15:29 发布
阅读量1k 收藏 7
点赞数
文章标签： bootstrap layui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43517448/article/details/109705837
版权

BootStrap与LayUI学习：

BootStrap：

image01

BootStrap特点：

  1. 简洁、直观、强悍的前端开发框架，html、css、javascript ⼯具集，让 web 开发更速、简单。

  2. 基于html5、css3的bootstrap，具有⼤量的诱⼈特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格⽹，样式向导⽂档。

  3. ⾃定义 JQuery 插件，完整的类库，bootstrap3 基于Less，bootstrap4 基于 Sass 的 CSS 预处理

  4. Bootstrap 响应式布局设计,让⼀个⽹站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计，给⽤户提供更好的视觉使⽤体验。

  5. 丰富的组件

参考API

http://v3.bootcss.com/css/

布局容器和栅格网格系统：

<!--导入资源-->
<link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.7/dist/css/bootstrap.css"/>
布局容器：

1、.container 类⽤于固定宽度并⽀持响应式布局的容器。

<div class="container">
 ...
</div>

2、.container-flfluid类⽤于100% 宽度，占据全部视⼝（viewport）的容器。

<div class="container-fluid">
 ...
</div>
栅格网格系统：

​ Bootstrap 提供了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多12列。栅格系统⽤于通过⼀系列的⾏（row）与列（column）的组合来创建⻚⾯布局，你的内容就可以放⼊这些创建好的布局中。

栅格参数：

在这里插入图片描述

列组合：

​ 列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，⼤于12,则该整列⾃动换到下⼀⾏。），有点类似于表格的colspan属性。

<div class="container">
 <div class="row">
 <div class="col-md-4">4列</div>
 <div class="col-md-8">8列</div>
 </div>
 <div class="row">
 <div class="col-md-2">2列</div>
 <div class="col-md-10">10列</div>
 </div>
</div>
列偏移：

​ 如果我们不希望相邻的两个列紧靠在⼀起，但⼜不想使⽤margin或者其他的技术⼿段来。这个时候就可以使⽤列偏移（offffset）功能来实现。使⽤列偏移也⾮常简单，只需要在列元素上添加类名"col-md-offffset-*"(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加"col-md-offffset-8"，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断⾏|换⾏显示)。

<div class="container">
    <div class="row">
       <div class="col-md-1">1列</div>
       <div class="col-md-1">2列</div>
       <div class="col-md-1 col-md-offset-8">11列</div>
       <div class="col-md-1">12列</div>
    </div>
</div>
列排序：

​ 列排序其实就是改变列的⽅向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的⽹格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)。往前pull，往后push。

<div class="container">
 <div class="row">
 <div class="col-md-1 col-md-push-10">1列</div>//第11位
 <div class="col-md-1 col-md-pull-1">2列</div> //第一位
 </div>
</div>
列嵌套：

​ Bootstrap框架的⽹格系统还⽀持列的嵌套。你可以在⼀个列中添加⼀个或者多个⾏（row）容器，然后在这个⾏容器中插⼊列.

<div class="container">
 <div class="row">
 <div class="col-md-2">
 我的⾥⾯嵌套了⼀个⽹格
 <div class="row">
 <div class="col-md-9">9</div>
 <div class="col-md-3">3</div>
 </div>
 </div>
 <div class="col-md-10">我的⾥⾯嵌套了⼀个⽹格
 <div class="row">
 <div class="col-md-10">10</div>
 <div class="col-md-2">2</div>
 </div>
 </div> 
 </div>
</div>

常用样式：

标题：

​ Bootstrap和普通的HTML⻚⾯⼀样，定义标题都是使⽤标签。

<h1>h1. Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>
段落：

​ 段落是排版中另⼀个重要元素之⼀。通过.lead 来突出强调内容(其作⽤就是增⼤⽂本字号，加粗⽂本，⽽且对⾏⾼和margin也做相应的处理。可以使⽤以下标签给⽂本做突出样式处理：

:⼩号字

**😗*加粗

**😗*斜体

<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努⼒</em>的<strong>你</strong>
</p>
强调：

定义了⼀套类名，这⾥称其为强调类名，这些强调类都是通过颜⾊来表示强调，具本说明如下：

.text-muted：提示，使⽤浅灰⾊（#999）

.text-primary：主要，使⽤蓝⾊（#428bca）

.text-success：成功，使⽤浅绿⾊**(#3c763d)**

.text-info：通知信息，使⽤浅蓝⾊（#31708f）

.text-warning：警告，使⽤⻩⾊（#8a6d3b）

.text-danger：危险，使⽤褐⾊（#a94442）

<div class="text-muted">提示效果</div> 
<div class="text-primary">主要效果</div> 
<div class="text-success">成功效果</div> 
<div class="text-info">信息效果</div> 
<div class="text-warning">警告效果</div> 
<div class="text-danger">危险效果</div>
对齐效果：

​ 在CSS中常常使⽤text-align来实现⽂本的对⻬⻛格的设置。

   其中主要有四种⻛格：

			左对⻬，取值**left ;**

​ 居中对⻬，取值center;

			右对⻬，取值**right ;**

			两端对⻬，取值**justify**。

为了简化操作，⽅便使⽤，Bootstrap通过定义四个类名来控制⽂本的对⻬风格：.text-left：左对⻬ .text-center：居中对⻬ .text-right：右对⻬ .text-justify：两端对⻬。

<p class="text-left">我居左</p> 
<p class="text-center">我居中</p> 
<p class="text-right">我居右</p> 
<p class="text-justify">⽹格系统的实现原理⾮常简单，仅仅是通过定义容器⼤⼩，平分12份(也有平分成24份或32份，
但12份是最常⻅的)，再调整内外边距，最后结合媒体查询，就制作出了强⼤的响应式⽹格系统。Bootstrap框架中的⽹格系统
就是将容器平分成12份</p>
列表：

​ 去点列表：

<ul class="list-unstyled">
 <li>⽆序项⽬列表⼀</li>
 <li>⽆序项⽬列表⼆</li>
</ul>

​ 内联列表：

​ class=“list-inline”，把垂直列表换成⽔平列表，⽽且去掉项⽬符号（编号），保持⽔平显示。也可以说内联列表就是为制作⽔平导航⽽⽣。

<ul class="list-inline">
 <li>⾸⻚</li>
 <li>java学院</li>
 <li>在线课堂</li>
</ul>

​ 定义列表：

​ 在原有的基础加⼊了⼀些样式，使⽤样式 class=“dl-horizontal” 制作⽔平定义列表 : 当标题宽度超过160px时，将会显示三个省略号。

<dl>
 <dt>HTML</dt>
 <dd>超⽂本标记语⾔</dd>
 <dt>CSS</dt>
 <dd>层叠样式表是⼀种样式表语⾔</dd>
</dl> <dl class="dl-horizontal">
 <dt>HTML 超⽂本标记语⾔</dt>
 <dd>HTML称为超⽂本标记语⾔，是⼀种标识性的语⾔。</dd> 
 <dt>测试标题不能超过160px的宽度,否则3个点</dt>
 <dd>我在写⼀个⽔平定义列表的效果，我在写⼀个⽔平定义列表的效果。</dd>
</dl>
代码：
<code></code>

快捷键效果

<p>使用<kbd>ctrl+s</kbd>保存</p>

多行代码

<pre></pre>

表格：

表格样式：

​ Bootstrap为表格提供了1种基础样式和4种附加样式以及1个⽀持响应式的表格。在使⽤Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格⻛格：

基础样式：

​ 1）.table：基础表格

​ 附加样式

​ 1) .table-striped：斑⻢线表格

​ 2) .table-bordered：带边框的表格

​ 3) .table-hover：⿏标悬停⾼亮的表格

​ 4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小。

tr、th、td样式：

在这里插入图片描述

表单：

​ 表单主要功能是⽤来与⽤户做交流的⼀个⽹⻚控件，良好的表单设计能够让⽹⻚与⽤户更好的沟通。表单中常⻅的元素主要包括：⽂本输⼊框、下拉选择框、单选按钮、复选按钮、⽂本域和按钮等。

<div class="col-sm-3">
 <input type="text" name="" id="" class="form-control" />
 <input type="text" name="" id="" class="form-control input-lg" />
 <input type="text" name="" id="" class="form-control input-sm" />
</div>
下拉选择框：
<div class="col-sm-3">
 <select class="form-control">
 <option>北京</option>
 <option>上海</option>
 <option>深圳</option>
 </select>
 <select class="form-control" multiple="multiple">
 <option>北京</option>
 <option>上海</option>
 <option>深圳</option>
 </select>
</div>
文本域：
<div class="col-sm-3">
 <textarea class="form-control" rows="3"></textarea>
</div>
复选框：

​ 垂直显示： .checkbox

​ ⽔平显示： .checkbox-inline

<!-- 垂直显示 -->
<div>
 <div class="checkbox">
 <label><input type="checkbox" >游戏</label>
 </div>
 <div class="checkbox">
 <label><input type="checkbox" >学习</label>
 </div>
</div>
<!-- ⽔平显示 -->
<div>
 <label class="checkbox-inline">
 <input type="checkbox" >游戏
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" >学习
 </label>
</div>
单选框radio：

​ 垂直显示： .radio

​ ⽔平显示： .radio-inline

<!-- 垂直显示 -->
<div>
 <div class="radio">
 <label><input type="radio" >男</label>
 </div>
 <div class="radio">
 <label><input type="radio" >⼥</label>
     </div>
</div>
<!-- ⽔平显示 -->
<div>
 <label class="radio-inline">
 <input type="radio" >男
 </label>
 <label class="radio-inline">
 <input type="radio" >⼥
 </label>
</div
按钮：

​ 使⽤ button 实现

​ 基础样式： btn

<button class="btn">按钮</button>

附加样式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

<button class="btn btn-danger">按钮</button> 
<button class="btn btn-primary">按钮</button> 
<button class="btn btn-info">按钮</button> 
<button class="btn btn-success">按钮</button> 
<button class="btn btn-default">按钮</button> 
<button class="btn btn-warning">按钮</button> 
<button class="btn btn-link">按钮</button>

2）多标签⽀持：使⽤ a div 等制作按钮

<a href="##" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span> 
<div class="btn btn-warning">div标签按钮</div>

3）按钮⼤⼩

​ 使⽤ .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺⼨的按钮

<button class="btn btn-primary btn-xs">超⼩按钮.btn-xs</button> 
<button class="btn btn-primary btn-sm">⼩型按钮.btn-sm</button> 
<button class="btn btn-primary">正常按钮</button> 
<button class="btn btn-primary btn-lg">⼤型按钮.btn-lg</button>

4）按钮禁⽤

​ ⽅法1：在标签中添加disabled属性

<button class="btn btn-danger" disabled="disabled">禁⽤按钮</button>

​ ⽅法2：在元素标签中添加类名**“disabled”**

<button class="btn btn-danger disabled">禁⽤按钮</button>

在class属性中添加disabled只是样式上禁⽤了，并不是真正的禁⽤了此按钮！

表单布局：

​ 基本的表单结构是 Bootstrap ⾃带的，个别的表单控件⾃动接收⼀些全局样式。下⾯列出了创建基本表单的步骤：

向⽗元素添加 role=“form”。

把标签和控件放在⼀个带有 class .form-group 中。这是获取最佳间距所必需的。

内联表单

​ 将表单的控件都在⼀⾏内显示form-inline

注意label不会显示，存在的意义：如果没有为输⼊控件设置label标签，屏幕阅读器将⽆法正确识别。

缩略图
缩略图在电商类的⽹站很常⻅，最常⽤的地⽅就是产品列表⻚⾯。缩略图的实现是配合⽹格系统⼀起使⽤。同时还可以让缩略图配合标题、描述内容，按钮等。

<div class="container">
 <div class="row">
 <div class="col-md-3">
 <div class="thumbnail">
 <img src="img/IMG_0131.JPG" alt="...">
 <h3>⾼圆圆</h3>
 <p>出⽣于北京市，中国内地影视⼥演员、模特。</p>
 <button class="btn btn-default">
 <span class="glyphicon glyphicon-heart"></span>喜欢</button>
 <button class="btn btn-info">
 <span class="glyphicon glyphicon-pencil"></span>评论
 </button>
 </div>
 </div>
 </div>
</div>

BootStrap插件：

导航：

1、基本样式**: .nav** 与 “nav-tabs”、**“nav-pills”**组合制作导航

2、分类**😗*

1)、标签型 **(nav-tabs)**导航

2)、胶囊形**(nav-pills)**导航

3)、堆栈**(nav-stacked)**导航

4)、⾃适应**(nav-justified)**导航

5)、⾯包屑式**(breadcrumb)导航 ，单独使⽤样式，不与nav⼀起使⽤,直接加⼊到ol**、ul中即可，⼀般⽤于导航，主要是起的作⽤是告诉

⽤户现在所处⻚⾯的位置（当前位置）

3、状态**😗*

1)、选中状态 active 样式

2)、禁⽤状态**: disable**

4、⼆级菜单

标签式：
<p>标签式的导航菜单</p> <ul class="nav nav-tabs">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li><a href="#">VB.Net</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">PHP</a></li>
</ul>
胶囊式：
<p>基本的胶囊式导航菜单</p> <ul class="nav nav-pills">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li><a href="#">VB.Net</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">PHP</a></li>
</ul>
分页导航：

​ 分⻚随处可⻅，分为⻚码导航和翻⻚导航

​ ⻚码导航：ul标签上加pagination [pagination-lg | pagination-sm]

​ 翻⻚导航：ul标签上加pager

分页：
<ul class="pagination">
 <li><a href="#">&laquo;</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">&raquo;</a></li>
</ul>
翻页：
<ul class="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
</ul>
下拉菜单：

​ 在使⽤Bootstrap框架的下拉菜单时，必须使⽤两个js

<!-- 如果要使⽤Bootstrap的js插件，必须先调⼊jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使⽤的js插件调⽤　-->
<script src="js/bootstrap.min.js"></script>
要点：
1、使⽤⼀个类名为dropdown 或btn-group的div 包裹整个下拉框:
 <div class="dropdown"></div> 2、默认向下dropdown，向上弹起加⼊ . dropup 即可
3、使⽤button作为⽗菜单，使⽤类名: dropdown-toggle 和⾃定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button> 4、在button中 使⽤font 制作下拉箭头
 <span class="caret"></span> 5、下拉菜单项使⽤⼀个ul列表，并且定义⼀个类名为“dropdown-menu
6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8、对⻬⽅式:
 1)、dropdown-menu-left 左对⻬ 默认样式
 2)、dropdown-menu-right 右对⻬
9、激活状态（.active）和禁⽤状态（.disabled）

<!--使⽤⼀个类名为dropdown,默认向下dropdown，向上弹起加⼊ . dropup 即可-->
<div class="dropdown ">
<!--使⽤button作为⽗菜单，使⽤类名: dropdown-toggle 和⾃定义data-toggle属性-->
 	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 	喜欢频道 <span class="caret"></span><!--下拉箭头-->
	 </button>
 <!--下拉菜单项使⽤⼀个ul列表，并且定义⼀个类名为“dropdown-menu-->
 	<ul class="dropdown-menu"> <!--dropdown-menu-right右对⻬-->
 <!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
 		<li class="dropdown-header">----科普----</li>
 		<li>
			 <a href="#">⼈与⾃然</a>
		 </li>
 <!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
 		<li class="divider"></li>
 		<li class="dropdown-header">----搞笑----</li>
 		<li>
			 <a href="#">欢乐喜剧⼈</a>
 		</li>
 		<li>
 			<a href="#">快乐⼤本营</a>
 		</li>
 		<li class="divider"></li>
 		<li class="disabled"> <!--禁⽤状态-->
 			<a href="#">⽣活⼤爆炸</a>
 		</li>
 	</ul>
</div>
模态框：

​ 模态框（Modal）是覆盖在⽗窗体上的⼦窗体。通常，⽬的是显示来⾃⼀个单独的源的内容，可以在不离开⽗窗体的情况下有⼀些互动。⼦窗体可提供信息、交互等。

模态框⽤法

  1. 通过 data 属性：在控制器元素（⽐如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 **data-target="#identififier"**或 href="#identififier" 来指定要切换的特定的模态框（带有 id=“identififier”）。

  2. 通过 JavaScript：使⽤这种技术，可以通过 JavaScript 来调⽤带有 id=“identififier” 的模态框：

$('#identifier').modal(options);
实例：
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ariahidden="true">
	 <div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
</button>
 				<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
 			</div>
 			<div class="modal-body">在这⾥添加⼀些⽂本</div>
 			<div class="modal-footer">
 				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 				<button type="button" class="btn btn-primary">提交更改</button>
 			</div>
 		</div><!-- /.modal-content -->
 	</div><!-- /.modal -->
</div>

在这里插入图片描述

LayUI:

在这里插入图片描述

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

官⽅⽂档：https://www.layui.com/doc/

LayUI 的特点:

​ （1）layui属于轻ᰁ级框架，简单美观。适⽤于开发后端模式，它在服务端⻚⾯上有⾮常好的效果。

​ （2）layui是提供给后端开发⼈员的ui框架，基于DOM驱动。

  1. 获得 layui 后，将其完整地部署（拷⻉到项⽬中）到你的项⽬⽬录，你只需要引⼊下述两个⽂件到HTML中：
./layui/css/layui.css
./layui/layui.js // 提示：如果是采⽤⾮模块化⽅式，此处可换成：./layui/layui.all.js

<script type="text/javascript">
		layui.use('layer',function(){
			var layer = layui.layer;
			layer.msg('hello , world!');
		})
</script>
或者：
导入<script src="layui/lay/modules/layer.js" type="text/javascript" charset="utf-8"></script>
layer，但是样式

页面元素：

布局：
布局容器：
固定宽度：

​ 将栅格放入一个带有class=“layui-container*"* 的特定的容器中，以便在⼩屏幕以上的设备中固定宽度，让列可控。

<div class="layui-container">
 <div class="layui-row">
 ……
 </div>
</div>
完整宽度：

​ 可以不固定容器宽度。将栅格或其它元素放⼊⼀个带有 class=“layui-flfluid” 的容器中，那么宽度将不会固定，⽽是 100% 适应

<div class="layui-fluid">
 ……
</div>
栅格系统：

​ 为了丰富⽹⻚布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能⼒，layui 引进了⼀套具备响应式能⼒的栅格系统。将容器进⾏了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌⾯中/⼤尺⼨四种不同的屏幕下发挥着各⾃的作⽤。

栅格布局规则：

​ 1. 采⽤ layui-row 来定义⾏，如：

<div class="layui-row"></div>

  1. 采⽤类似 layui-col-md* 这样的预设类来定义⼀组列（column），且放在⾏（row）内。其中：

    ​ 变量 md 代表的是不同屏幕下的标记

    ​ 变量***** 代表的是该列所占⽤的12等分数（如6/12），可选值为 1 - 12

    ​ 如果多个列的“等分数值”总和等于12，则刚好满⾏排列。如果⼤于12，多余的列将⾃动另起

⼀⾏。

  1. 列可以同时出现最多四种不同的组合，分别是：xs（超⼩屏幕，如⼿机）、sm（⼩屏幕，如平板）、md（桌⾯中等屏幕）、lg（桌⾯⼤型屏幕）。

  2. 可对列追加类似 layui-col-space5、 layui-col-md-offffset3 这样的预设类来定义列的间距和偏移。

  3. 可以在列（column）元素中放⼊你⾃⼰的任意元素填充内容

<h3>常规布局（以中型屏幕桌⾯为例）：</h3> 
<div class="layui-row">
 	<div class="layui-col-md9" style="background-color: #00F7DE;">
 		你的内容 9/12
 	</div>
	 <div class="layui-col-md3" style="background-color: rosybrown;">
 		你的内容 3/12
	 </div>
</div>
响应式规则：

​ 栅格的响应式能⼒，得益于CSS3媒体查询（Media Queries）的强⼒⽀持，从⽽针对四类不同尺⼨的屏幕，进⾏相应的适配处理。

在这里插入图片描述

列边距：

​ 通过“列间距”的预设类，来设定列之间的间距。且⼀⾏中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进⼀步保证分列的宽度精细程度。我们结合⽹⻚常⽤的边距，预设了 12 种不同尺⼨的边距，分别是：

/* ⽀持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔 */
layui-col-space1
layui-col-space2
layui-col-space4
layui-col-space5
layui-col-space6
layui-col-space8
layui-col-space10
layui-col-space12
layui-col-space14
layui-col-space15
layui-col-space16
layui-col-space18
layui-col-space20
layui-col-space22
layui-col-space24
layui-col-space25
layui-col-space26
layui-col-space28
layui-col-space30

实例：

<h3>列间距</h3> 
<div class="layui-row layui-col-space10">
 	<div class="layui-col-md4" >
 <!-- 需要在layui-col-md4⾥⾯再加⼀层div -->
 		<div style="background-color: #009688;">
			 1/3
 		</div>
 	</div>
 	<div class="layui-col-md4">
 		<div style="background-color: burlywood;">
 			1/3
 		</div>
 	</div>
 	<div class="layui-col-md4">
 		<div style="background-color: silver;">
 			1/3
 		</div>
 	</div>
</div>

  1. layui-col-space：设置后不起作⽤主要是因为设置的是padding,也就是说是向内缩，所以设置背景⾊padding也是会添上颜⾊，看起来好像没有间距⼀样。可以在⾥⾯在加⼀个div，来达到⽬的。

  2. 间距⼀般不⾼于30px，如果超过30，建议使⽤列偏移。

列偏移：

​ 对列追加 类似 layui-col-md-offffset* 的预设类，从⽽让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。

如：layui-col-md-offffset3，即代表在“中型桌⾯屏幕”下，让该列向右偏移 3 个列宽度，不会超过容器的宽度

<h3>列偏移</h3> 
<div class="layui-row">
	<div class="layui-col-md4" style="background-color: rosybrown;">
 		4/12
 	</div>
 	<div class="layui-col-md4 layui-col-md-offset4" style="background-color: cornflowerblue;">
 		偏移4列，从⽽在最右
 	</div>
</div>

​ 注：列偏移可针对不同屏幕的标准进⾏设定，在当前设定的屏幕下有效，当低于桌⾯屏幕的规定的临界值，就会堆叠排列。

列嵌套：

​ 可以对栅格进⾏⽆穷层次的嵌套。在列元素（layui-col-md*）中插⼊⾏元素（layui-row），即可完成嵌套。

<h3>列嵌套</h3> 
<div class="layui-row layui-col-space5">
 	<div class="layui-col-md5" style="background-color: thistle;">
 		<div class="layui-row">
 			<div class="layui-col-md3" style="background-color: burlywood;" >
 				内部列
 			</div>
 			<div class="layui-col-md5" style="background-color: indianred;">
 				内部列
 			</div>
 			<div class="layui-col-md4" style="background-color:mediumaquamarine;">
 				内部列
 			</div>
 		</div>
 	</div>
</div>

基本元素：

按钮：
用法：

​ 向任意HTML元素设定class=“layui-btn”，建⽴⼀个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮⻛格。

<!-- 基础按钮 -->
<button type="button" class="layui-btn">⼀个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">⼀个可跳转的按钮</a> 
<div class="layui-btn">⼀个按钮</div>
主题：

在这里插入图片描述

尺寸：

在这里插入图片描述

<!-- 不同尺⼨的按钮 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">⼤型</button> 
<button class="layui-btn">默认</button> 
<button class="layui-btn layui-btn-sm layui-btn-danger">⼩型</button> 
<button class="layui-btn layui-btn-xs">迷你</button>
圆角：
<button class="layui-btn layui-btn-radius">默认按钮</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖⾊按钮</button> 
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button> 
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁⽤按钮</button>
图标：
<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">&#x1002;</i> 刷新
</button>
导航：

​ 导航⼀般指⻚⾯引导性频道集合，多以菜单的形式呈现，可应⽤于头部和侧边。⾯包屑结构简单，⽀持⾃定义分隔符。

​ 依赖加载模块：element

实现步骤：

  1. 引⼊的资源
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>
  1. 依赖加载模块
<script type="text/javascript">
 // 注意：导航 依赖 element 模块，否则⽆法进⾏功能性操作
 layui.use('element', function(){
 var element = layui.element;
 });
</script>
  1. 显示指定类型的导航
水平导航：
<ul class="layui-nav">
 	<li class="layui-nav-item"><a href="">最新活动</a></li>
 	<li class="layui-nav-item layui-this"><a href="">产品</a></li>
 	<li class="layui-nav-item"><a href="">⼤数据</a>	</li>
 		<li class="layui-nav-item">
 			<a href="javascript:;">解决⽅案</a>
 			<dl class="layui-nav-child"> <!-- ⼆级菜单 -->
 				<dd><a href="">移动模块</a></dd>
     			<dd><a href="">后台模版</a></dd>
 				<dd><a href="">电商平台</a></dd>
 			</dl>
	 	</li>
 	<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
垂直**/**侧边导航:
<ul class="layui-nav layui-nav-tree" >
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
     <li class="layui-nav-item layui-nav-itemed">
         <a href="javascript:;">默认展开</a>
 		<dl class="layui-nav-child">
 			<dd><a href="javascript:;">选项1</a></dd>
 			<dd><a href="javascript:;">选项2</a></dd>
			<dd><a href="">跳转</a></dd>
 		</dl>
 	</li>
 	<li class="layui-nav-item">
 		<a href="javascript:;">解决⽅案</a>
      		<dl class="layui-nav-child">
 				<dd><a href="">移动模块</a></dd>
 				<dd><a href="">后台模版</a></dd>
				 <dd><a href="">电商平台</a></dd>
 			</dl>
	 </li>
 	<li class="layui-nav-item"><a href="">产品</a></li>
 	<li class="layui-nav-item"><a href="">⼤数据</a></li>
</ul>

⽔平、垂直、侧边三个导航的HTML结构是完全⼀样的，不同的是：

​ ⽔平导航：layui-nav

​ 垂直导航需要追加class：layui-nav-tree

​ 侧边导航需要追加class：layui-nav-tree layui-nav-side

导航主题:

​ 通过对导航追加CSS背景类，让导航呈现不同的主题⾊

<!-- 如定义⼀个墨绿背景⾊的导航 -->
<ul class="layui-nav layui-bg-move" >
 …
</ul>

⽔平导航⽀持的其它背景主题有：layui-bg-cyan（藏⻘）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）

垂直导航⽀持的其它背景主题有：layui-bg-cyan（藏⻘）

⾯包屑:
<span class="layui-breadcrumb">
 <a href="">⾸⻚</a>
 <a href="">国际新闻</a>
 <a href="">亚太地区</a>
 <a><cite>正⽂</cite></a>
</span>

你还可以通过设置属性 lay-separator="" 来⾃定义分隔符。例如：

<span class="layui-breadcrumb" lay-separator="-">
 <a href="">⾸⻚</a>
 <a href="">国际新闻</a>
 <a href="">亚太地区</a>
 <a><cite>正⽂</cite></a>
</span>
选项卡:

​ 导航菜单可应⽤于头部和侧边，⽀持响应式，⽀持删除选项卡等功能。

依赖加载模块：element

实现步骤
  1. 引⼊的资源
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>
  1. 依赖加载模块
<script type="text/javascript">
 // 注意：选项卡 依赖 element 模块，否则⽆法进⾏功能性操作
 layui.use('element', function(){
 var element = layui.element;
 });
</script>
  1. 加载HTML
<div class="layui-tab">
 <ul class="layui-tab-title">
 <li class="layui-this">⽹站设置</li>
 <li>⽤户管理</li>
 <li>权限分配</li>
 <li>商品管理</li>
 <li>订单管理</li>
 </ul>
 <div class="layui-tab-content">
 <div class="layui-tab-item layui-show">内容1</div>
 <div class="layui-tab-item">内容2</div>
 <div class="layui-tab-item">内容3</div>
 <div class="layui-tab-item">内容4</div>
 <div class="layui-tab-item">内容5</div>
 </div>
</div>
选项卡⻛格:

​ 默认⻛格：layui-tab

​ 简洁⻛格需要追加class：layui-tab-brief

​ 卡⽚⻛格需要追加class：layui-tab-card

带删除的选项卡

​ 可以对⽗层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除

<div class="layui-tab" lay-allowClose="true">
 <ul class="layui-tab-title">
 <li class="layui-this">⽹站设置</li>
 <li>⽤户管理</li>
 <li>权限分配</li>
 <li>商品管理</li>
 <li>订单管理</li>
 </ul>
 <div class="layui-tab-content">
 <div class="layui-tab-item layui-show">内容1</div>
 <div class="layui-tab-item">内容2</div>
 <div class="layui-tab-item">内容3</div>
 <div class="layui-tab-item">内容4</div>
 <div class="layui-tab-item">内容5</div>
 </div>
</div>
表格:
常规⽤法:
<table class="layui-table">
 <colgroup>
 <col width="150">
 <col width="200">
 <col>
 </colgroup>
 <thead>
 <tr>
 <th>昵称</th>
 <th>加⼊时间</th>
 <th>签名</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>贤⼼</td>
 <td>2016-11-29</td>
 <td>⼈⽣就像是⼀场修⾏</td>
 </tr>
 <tr>
 <td>许闲⼼</td>
 <td>2016-11-28</td>
 <td>于千万⼈之中遇⻅你所遇⻅的⼈，于千万年之中，时间的⽆涯的荒ᰀ⾥…</td>
 </tr>
 </tbody>
</table>
基础属性:

在这里插入图片描述

你所需要的基础属性写在table标签上，例如

<!-- ⼀个带有隔⾏背景，且⾏边框⻛格的⼤尺⼨表格 -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
 <colgroup>
 <col width="150">
 <col width="200">
 <col>
 </colgroup>
 <thead>
 <tr>
 <th>昵称</th>
 <th>加⼊时间</th>
 <th>签名</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>贤⼼</td>
 <td>2016-11-29</td>
 <td>⼈⽣就像是⼀场修⾏</td>
 </tr>
 <tr>
 <td>许闲⼼</td>
 <td>2016-11-28</td>
 <td>于千万⼈之中遇⻅你所遇⻅的⼈，于千万年之中，时间的⽆涯的荒ᰀ⾥…</td>
 </tr>
 </tbody>
</table>
表单：

依赖加载模块：form

  1. 在⼀个容器中设定 class=“layui-form” 来标识⼀个表单元素块
<form class="layui-form" action="">
 
</form>
  1. 基本的⾏区块结构，它提供了响应式的⽀持。可以换成其他结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常⼯作。
<div class="layui-form-item">
 <label class="layui-form-label">标签区域</label>
 <div class="layui-input-block">
 原始表单元素区域
 </div>
</div>
输⼊框
<input type="text" name="title" required lay-verify="required" placeholder="请
输⼊标题" autocomplete="off" class="layui-input" />

​ required：注册浏览器所规定的必填字段

​ lay-verify：注册form模块需要验证的类型

​ class=“layui-input”：layui.css提供的通⽤CSS类

下拉选择框:
<select name="city" lay-verify="">
 <option value="">请选择⼀个城市</option>
 <option value="010">北京</option>
 <option value="021">上海</option>
 <option value="0571">杭州</option>
</select>

​ 属性selected可设定默认项

​ 属性disabled开启禁⽤，select和option标签都⽀持

<select name="city" lay-verify="">
 <option value="010">北京</option>
 <option value="021" disabled>上海（禁⽤效果）</option>
 <option value="0571" selected>杭州</option>
</select>

​ 可以通过 optgroup 标签给select分组

<select name="quiz">
 <option value="">请选择</option>
 <optgroup label="城市记忆">
 <option value="你⼯作的第⼀个城市">你⼯作的第⼀个城市？</option>
 </optgroup>
 <optgroup label="学⽣时代">
 <option value="你的⼯号">你的⼯号？</option>
 <option value="你最喜欢的⽼师">你最喜欢的⽼师？</option>
 </optgroup>
</select>

​ 通过设定属性 lay-search 来开启搜索匹配功能

<select name="city" lay-verify="" lay-search>
 <option value="010">layer</option>
 <option value="021">form</option>
 <option value="0571" selected>layim</option>
</select>
复选框:
<h2>默认⻛格：</h2> 
<input type="checkbox" name="" title="写作" checked> 
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁⽤" disabled> <h2>原始⻛格：</h2> 
<input type="checkbox" name="" title="写作" lay-skin="primary" checked> 
<input type="checkbox" name="" title="发呆" lay-skin="primary"> 
<input type="checkbox" name="" title="禁⽤" lay-skin="primary" disabled>

​ 属性title可⾃定义⽂本（温馨提示：如果只想显示复选框，可以不⽤设置title）

​ 属性checked可设定默认选中

​ 属性lay-skin可设置复选框的⻛格 （原始⻛格：lay-skin=“primary”）

​ 设置*value=“1”*可⾃定义值，否则选中时返回的就是默认的on

开关:

​ 将复选框checkbox，通过设定 lay-skin=“switch” 形成了开关⻛格

<input type="checkbox" name="xxx" lay-skin="switch"> 
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked> 
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭"> 
<input type="checkbox" name="aaa" lay-skin="switch" disabled>

​ 属性checked可设定默认开

​ 属性disabled开启禁⽤

​ 属性lay-text可⾃定义开关两种状态的⽂本 （两种⽂本⽤ “|” 隔开）

​ 设置*value=“1”*可⾃定义值，否则选中时返回的就是默认的on

单选框:
<input type="radio" name="sex" value="nan" title="男"> 
<input type="radio" name="sex" value="nv" title="⼥" checked> 
<input type="radio" name="sex" value="" title="中性" disabled>

​ 属性title可⾃定义⽂本

​ 属性disabled开启禁⽤

​ 设置*value=“xxx”*可⾃定义值，否则选中时返回的就是默认的on

⽂本域:
<textarea name="remark" required lay-verify="required" placeholder="请输⼊个⼈介
绍" class="layui-textarea"></textarea>

class=“layui-textarea”：layui.css提供的通⽤CSS类

组装⾏内表单:
<div class="layui-form-item">
 <div class="layui-inline">
 <label class="layui-form-label">范围</label>
 <div class="layui-input-inline" style="width: 100px;">
 <input type="text" name="price_min" placeholder="￥"
 autocomplete="off" class="layui-input">
 </div>
 <div class="layui-form-mid">-</div>
 <div class="layui-input-inline" style="width: 100px;">
 <input type="text" name="price_max" placeholder="￥"
 autocomplete="off" class="layui-input">
 </div>
 </div>
</div>

*class="layui-inline"*：定义外层⾏内
  • class=“layui-input-inline”*：定义内层⾏内
忽略美化渲染:

​ 可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进⾏美化渲染，即保留系统⻛格。

<input type="radio" name="sex" value="nan" title="男" lay-ignore>
表单⽅框⻛格:

​ 通过追加 layui-form-pane 的class，来设定表单的⽅框⻛格。

<form class="layui-form layui-form-pane" action="">
 <!--
 内部结构都⼀样，值得注意的是 复选框/开关/单选框 这些组合在该⻛格下需要额外添加 pane属性
（否则 会看起来⽐较别扭），如：
 -->
 <div class="layui-form-item" pane>
 <label class="layui-form-label">单选框</label>
 <div class="layui-input-block">
 <input type="radio" name="sex" value="男" title="男">
 <input type="radio" name="sex" value="⼥" title="⼥" checked>
 </div>
 </div>
</form>

组件示例:

弹出层:

​ 模块加载名称：layer，独⽴版本：layer.layui.com

使⽤场景:

​ 由于layer可以独⽴使⽤，也可以通过Layui模块化使⽤。所以请按照你的实际需求来选择。

在这里插入图片描述

  1. 作为独⽴组件使⽤ layer

导入

<script src="layui/lay/modules/layer.js" type="text/javascript" charset="utf-8"></script>

<!-- 引⼊好layer.js后，直接⽤即可 -->
<script src="layer.js"></script> <script>
 layer.msg('hello');
</script>
  1. 在 layui 中使⽤ layer
layui.use('layer', function(){
 var layer = layui.layer;
 
 layer.msg('hello');
});
基础参数:
  1. type - 基本层类型
类型：Number，默认：0
可传⼊的值有：
 0（信息框，默认）
 1（⻚⾯层）
 2（iframe层）
 3（加载层）
 4（tips层）

  1. title - 标题

    类型：String/Array/Boolean，默认：'信息'

title⽀持三种类型的值：
     若传⼊的是普通的字符串，如 title :'我是标题'，那么只会改变标题⽂本；
 	若需要⾃定义样式，可以title: ['⽂本', 'font-size:18px;']，数组第⼆项可以写任意
css样式；
 	若你不想显示标题栏，可以 title: false；

  2. content - 内容

    类型：String/DOM/Array，默认：''
content可传⼊的值是灵活多变的，不仅可以传⼊普通的html内容，还可以指定DOM。

/* 信息框 */
layer.open({
 type:0,
 title:"系统消息",
 // content可以传⼊任意的⽂本或html
 content:"Hello"
});
/* ⻚⾯层 */
layer.open({
 type:1,
 title:"系统消息",
// content可以传⼊任意的⽂本或html
 content:"<div style='height:100px;width:200px'>Hello</div>"
});
/* iframe */
layer.open({
 type:2,
 title:"系统消息",
 // content是⼀个URL，如果你不想让iframe出现滚动条，你还可以content: ['url',
'no']
 content:"http://www.baidu.com"
 // content:["http://www.baidu.com",'no']
});
/* tips层 */
layer.open({
 type: 4,
 content: ['内容', '#id'] //数组第⼆项即吸附元素选择器或者DOM
});
  1. area - 宽⾼:
类型：String/Array，默认：'auto'
在默认状态下，layer是宽⾼都⾃适应的。
当定义宽度时，你可以area: '500px'，⾼度仍然是⾃适应的。
当宽⾼都要定义时，你可以area: ['500px', '300px']。
  1. icon - 图标
注：信息框和加载层的私有参数。
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认层可以传⼊0-6。如果是加载层，可以传⼊0-2。

// eg1
layer.alert('酷毙了', {icon: 1});
// eg2
layer.msg('不开⼼。。', {icon: 5});
// eg3
layer.load(1); // ⻛格1的加载

  1. 示例

    // eg1
layer.alert('很⾼兴⻅到你
! ', {icon: 6});
// eg2
layer.msg('你愿意和我做朋友么？', {
 time: 0, //不⾃动关闭
 btn: ['当然愿意', '狠⼼拒绝'], // 按钮
 yes: function(index){
 layer.close(index); // 关闭当前弹出框
 layer.msg('新朋友，你好！', {
 icon: 6, // 图标
 btn: ['开⼼','快乐']
 });
 }
});
// eg3
layer.msg('这是常⽤的弹出层');
// eg4
layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});
// eg5
layer.msg('玩命加载中...=￣ω￣=', function(){
 // 关闭后的操作
 layer.msg('(⊙o⊙)？');
});
⽇期与时间选择:

​ 模块加载名称：laydate，独⽴版本：http://www.layui.com/laydate/

layDate 包含了⼤ᰁ的更新，其中主要以：年选择器、年⽉选择器、⽇期选择器、时间选择器、⽇期时间选择器 五种类型的选择⽅式。

快速使⽤:

​ 和 layer ⼀样，可以在 layui 中使⽤ layDate，也可直接使⽤ layDate 独⽴版，请按照实际需求来选择。

在这里插入图片描述

在layui模块中使⽤:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>⽇期与时间选择</title>
 <link rel="stylesheet" href="layui/css/layui.css">
 </head>
 <body>
 <div class="layui-inline">
 <input type="text" class="layui-input" id="date1" />
 </div>
 </body>
 <script src="layui/layui.js"></script>
 <script type="text/javascript">
 layui.use('laydate', function(){
 var laydate = layui.laydate;
 
 //执⾏⼀个laydate实例
 laydate.render({
 elem: '#date1' //指定元素
 });
 });
 </script>
</html>
基础参数:
  1. elem - 绑定元素
类型：String/DOM，默认值：⽆
必填项，⽤于绑定执⾏⽇期渲染的元素，值⼀般为选择器，或DOM对象

laydate.render({
 elem: '#test' //或 elem: document.getElementById('test')、elem:
lay('#test') 等
});
  1. type - 控件选择类型
类型：String，默认值：date
⽤于单独提供不同的选择器类型，可选值如下表：

在这里插入图片描述

//年选择器
laydate.render({
 elem: '#test'
 ,type: 'year'
});
//年⽉选择器
laydate.render({
 elem: '#test'
 ,type: 'month'
});
//⽇期选择器
laydate.render({
 elem: '#test'
 //,type: 'date' //默认，可不填
});
//时间选择器
laydate.render({
 elem: '#test'
 ,type: 'time'
});
//⽇期时间选择器
laydate.render({
 elem: '#test'
 ,type: 'datetime'
});
  1. format - ⾃定义格式
类型：String，默认值：yyyy-MM-dd
通过⽇期时间各⾃的格式符和⻓度，来设定⼀个你所需要的⽇期格式。layDate ⽀持的格式如下：

在这里插入图片描述

通过上述不同的格式符组合成⼀段⽇期时间字符串，可任意排版

//⾃定义⽇期格式
laydate.render({
 elem: '#test'
 ,format: 'yyyy年MM⽉dd⽇' //可任意组合
});

  1. value - 初始值

    类型：String，默认值：new Date()
⽀持传⼊符合format参数设定的⽇期格式字符，或者 new Date()

// 传⼊符合format格式的字符给初始值
laydate.render({
 elem: '#test'
 ,value: '2018-08-18' //必须遵循format参数设定的格式
});
// 传⼊Date对象给初始值
laydate.render({
 elem: '#test'
 ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
分⻚:

​ 模块加载名称：laypage

快速使⽤:

​ laypage 的使⽤⾮常简单，指向⼀个⽤于存放分⻚的容器，通过服务端得到⼀些初始值，即可完成分⻚渲染。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>分⻚</title>
 <link rel="stylesheet" href="layui/css/layui.css">
 </head>
 <body>
 <div id="test1"></div>
 </body>
 <script src="layui/layui.js"></script>
 <script type="text/javascript">
 layui.use('laypage', function(){
 var laypage = layui.laypage;
 
 //执⾏⼀个laypage实例
 laypage.render({
 elem: 'test1' //注意，这⾥的 test1 是 ID，不⽤加 # 号
 ,count: 50 //数据总数，从服务端得到
 });
 });
 </script>
</html>
基础参数:

​ 通过核⼼⽅法：laypage.render(options) 来设置基础参数。

在这里插入图片描述

jump - 切换分⻚的回调:

​ 当分⻚被切换时触发，函数返回两个参数：obj（当前分⻚的所有选项值）、fifirst（是否⾸次，⼀般⽤于初始加载的判断）

laypage.render({
    elem: 'page'
 ,count: 100 //数据总数，从服务端得到
 ,groups:10 // 连续出现的⻚码个数
 ,layout:['prev', 'page', 'next','limit','count'] // ⾃定义排版
 ,limits:[5,10,20] // layout属性设置了limit值，可会出现条数下拉选择框
 ,jump: function(obj, first){
 // obj包含了当前分⻚的所有参数，⽐如：
 console.log(obj.curr); //得到当前⻚，以便向服务端请求对应⻚的数据。
 console.log(obj.limit); //得到每⻚显示的条数
 //⾸次不执⾏
 if(!first){
 //do something
 }
 }
});
数据表格:

​ 模块加载名称：table

快速使⽤:

​ 创建⼀个table实例最简单的⽅式是，在⻚⾯放置⼀个元素，然后通过 table.render() ⽅法指定该容器。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>table数据表格</title>
 <link rel="stylesheet" href="layui/css/layui.css">
 </head>
 <body>
 <table id="demo"></table>
 </body>
 
 <script src="layui/layui.js" type="text/javascript" ></script>
 <script type="text/javascript">
 layui.use('table', function(){
 var table = layui.table;
 
 // 第⼀个实例
 table.render({
 elem: '#demo'
 ,url: 'user.json' // 数据接⼝
 ,cols: [[ // 表头
    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
 ,{field: 'username', title: '⽤户名', width:80}
 ,{field: 'sex', title: '性别', width:80, sort: true}
 ,{field: 'city', title: '城市', width:80}
 ,{field: 'sign', title: '签名', width: 177}
 ]]
 });
 
 });
 </script>
</html>

数据接⼝ user.json

{
 "code": 0,
 "msg": "",
 "count": 50,
 "data": [{
 "id": 10000,
 "username": "user-0",
 "sex": "⼥",
 "city": "城市-0",
 "sign": "签名-0" 
 },
 {
 "id": 10001,
 "username": "user-1",
 "sex": "男",
 "city": "城市-1",
 "sign": "签名-1"
 },
 {
 "id": 10002,
 "username": "user-2",
 "sex": "⼥",
 "city": "城市-2",
 "sign": "签名-2"
 },
 {
 "id": 10003,
 "username": "user-3",
 "sex": "⼥",
 "city": "城市-3",
 "sign": "签名-3"
 },
 {
 "id": 10004,
 "username": "user-4",
     "sex": "男",
 "city": "城市-4",
 "sign": "签名-4"
 }
 ] }
三种初始化渲染⽅式:

在这里插入图片描述

⽅法渲染:
  1. 将基础参数的设定放在了JS代码中，且原始的 table 标签只需要⼀个选择器
<table id="demo"></table>
  1. 渲染表格
layui.use('table', function(){
 var table = layui.table;
 // 执⾏渲染
 table.render({
 elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
 ,url: 'user.json' // 数据接⼝
 ,height: 315 // 容器⾼度
 ,page:true // 开启分⻚
 ,cols: [[ // 设置表头
 {field: 'id', title: 'ID'}
 ,{field: 'username', title: '⽤户名'}
 ,{field: 'sex', title: '性别'}
 ]]
 }); 
});

注：*table.render()*⽅法返回⼀个对象：var tableIns = table.render(options)，可⽤于对当前表格进⾏“᯿载”等操作。

⾃动渲染:

​ 在⼀段 table 容器中配置好相应的参数，由 table 模块内部⾃动对其完成渲染，⽽⽆需你写初始的渲染⽅法。

  1. 带有 class=“layui-table” 的标签。

  2. 对标签设置属性 lay-data="" ⽤于配置⼀些基础参数

  3. 在标签中设置属性**lay-data=""**⽤于配置表头信息

<table class="layui-table" lay-data="{url:'user.json'}">
 <thead>
 <tr>
 <th lay-data="{field:'id'}">ID</th>
 <th lay-data="{field:'username'}">⽤户名</th>
 <th lay-data="{field:'sex', sort: true}">性别</th>
 </tr>
 </thead>
</table>
转换静态表格:

​ ⻚⾯已经存在了⼀段有内容的表格，由原始的table标签组成，只需要赋予它⼀些动态元素。

<table lay-filter="demo">
 <thead>
 <tr>
 <th lay-data="{field:'username', width:100}">昵称</th>
 <th lay-data="{field:'experience', width:80, sort:true}">积 分</th>
 <th lay-data="{field:'sign'}">签名</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>贤⼼1</td>
 <td>66</td>
 <td>⼈⽣就像是⼀场修⾏a</td>
 </tr>
 </tbody>
</table>

执⾏⽤于转换表格的JS⽅法

layui.use('table', function(){
 var table = layui.table;
 // 转换静态表格
 table.init('demo', {
 height: 315 // 设置⾼度
 // ⽀持所有基础参数
 });
});
3.3.4.6. 基础参数使⽤的场景:
// 场景⼀：下述⽅法中的键值即为基础参数项
table.render({
 height: 300
 ,url: 'user.json'
});
 
// 场景⼆：下述 lay-data ⾥⾯的内容即为基础参数项，切记：值要⽤单引号
<table lay-data="{height:300, url:'user.json'}" lay-filter="demo"> ……
</table>
// 更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); // 转化静态表格
> var tableObj = table.render({});
 tableObj.reload(options); // 重载表格
开启分⻚:
<!-- HTML代码 -->
<table id="demo"></table>

// JS实现代码
layui.use('table', function(){
 var table = layui.table;
 // 执⾏渲染
 table.render({
 elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
 ,url: 'user.json' // 数据接⼝
 ,height: 315 // 容器⾼度
 ,page:true // 开启分⻚
 ,cols: [[ // 设置表头
 {field: 'id', title: 'ID'}
 ,{field: 'username', title: '⽤户名'}
 ,{field: 'sex', title: '性别'}
     ]]
 }); 
});
开启头部⼯具栏:
<table id="demo" lay-filter="demo"></table>
<!-- 表格⼯具栏 -->
<script type="text/html" id="toolbarDemo">
 <div class="layui-btn-container">
 <!-- lay-event 给元素绑定事件名 -->
 <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
 获取选中⾏数据
 </button>
 <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
 获取选中数⽬
 </button>
 <button class="layui-btn layui-btn-sm" lay-event="isAll">
 验证是否全选
 </button>
 </div>
</script>
<!-- 表头⼯具栏 -->
<script type="text/html" id="barDemo">
 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
 <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除
</a>
</script>

layui.use('table', function(){
 var table = layui.table;
 // 执⾏渲染
 table.render({
 elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
 ,url: 'user.json' // 数据接⼝
 ,height: 315 // 容器⾼度
 ,page:true // 开启分⻚
 ,cols: [[ // 设置表头
 {field: 'id', title: 'ID'}
 ,{field: 'username', title: '⽤户名'}
 ,{field: 'sex', title: '性别'}
 ,{title:'操作', toolbar: '#barDemo'} // 绑定表头⼯具栏
 ]]
 ,toolbar: '#toolbarDemo' // 开启头部⼯具栏，并为其绑定左侧模板
   });
 
 /**
 * 头⼯具栏事件
 * 语法：
 table.on('toolbar(demo)', function(obj){
 });
 注：demo表示选择器元素上设置的lay-filter属性值
 */
 table.on('toolbar(demo)', function(obj){
 // obj.config.id 当前选择器的id属性值，即demo
 // 获取当前表格被选中的记录对象，返回数组
 var checkStatus = table.checkStatus(obj.config.id);
 // obj.event 得到当前点击元素的事件名
 switch(obj.event){
 case 'getCheckData':
 // 获取被选中的记录的数组
 var data = checkStatus.data;
 // 将数组数据解析成字符串
 layer.alert(JSON.stringify(data));
 break;
 case 'getCheckLength':
 var data = checkStatus.data;
 layer.msg('选中了：'+ data.length + ' 个');
 break;
 case 'isAll':
 // checkStatus.isAll 判断记录是否被全选
 layer.msg(checkStatus.isAll ? '全选': '未全选');
 break;
 // ⾃定义头⼯具栏右侧图标 - 提示
 case 'LAYTABLE_TIPS':
 layer.alert('这是⼯具栏右侧⾃定义的⼀个图标按钮');
 break;
 };
 }); 
    /**
 * 监听⾏⼯具事件
 */
 table.on('tool(demo)', function(obj){
 // 得到当前操作的tr的相关信息
 var data = obj.data;
 if(obj.event === 'del'){
 // 确认框
 layer.confirm('真的删除⾏么', function(index){
 // 删除指定tr
 obj.del();
 // index 当前弹出层的下标，通过下标关闭弹出层
     layer.close(index);
 });
 } else if(obj.event === 'edit'){
 // 输⼊框
 layer.prompt({
 // 表单元素的类型 0=⽂本框 1=密码框 2=⽂本域
 formType: 0
 ,value: data.username
 }, function(value, index){
 // 修改指定单元格的值
 // value表示输⼊的值
 obj.update({
 username: value
 });
 // 关闭弹出层
 layer.close(index);
 });
 }
 });
 
});
开启单元格编辑:
<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" layfilter="demo">
 <thead>
 <tr>
 <th lay-data="{type:'checkbox'}">ID</th>
 <th lay-data="{field:'id', sort: true}">ID</th>
 <th lay-data="{field:'username', sort: true, edit: 'text'}">⽤
户名</th>
 <th lay-data="{field:'sex', edit: 'text'}">性别</th>
 <th lay-data="{field:'city', edit: 'text'}">城市</th>
 <th lay-data="{field:'experience', sort: true, edit: 'text'}">
积分</th>
 </tr>
 </thead>
</table>

layui.use('table', function(){
var table = layui.table;
// 监听单元格编辑
table.on('edit(demo)', function(obj){
var value = obj.value // 得到修改后的值
,data = obj.data // 得到所在⾏所有键值
,field = obj.field; // 得到字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
});
});
数据表格的重载:
<div class="demoTable">
 搜索ID：
 <div class="layui-inline">
 <input class="layui-input" name="id" id="demoReload"
autocomplete="off">
 </div>
 <button class="layui-btn" id="searchBtn">搜索</button>
</div> <table class="layui-hide" id="demo" lay-filter="demo"></table>

layui.use('table', function(){
 var table = layui.table;
 var $ = layui.jquery; // 获取jquery对象
 // 执⾏渲染
 table.render({
 elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
 ,url: 'user.json' // 数据接⼝
 ,page:true // 开启分⻚
 ,cols: [[ // 设置表头
 {type: 'checkbox', fixed: 'left'} // 设置复选框
 ,{field: 'id', title: 'ID'}
 ,{field: 'username', title: '⽤户名'}
 ,{field: 'sex', title: '性别'}
 ]]
 });
 // 给指定元素绑定事件
 $(document).on('click', '#searchBtn', function(data) {
 // 获取搜索框对象
 var demoReload = $('#demoReload');
 table.reload('demo', {
     where: { // 设定异步数据接⼝的额外参数，任意设
 id: demoReload.val()
 }
 ,page: {
 // 让条件查询从第⼀⻚开始查询，不写则从当前⻚开始查询，此⻚之前的数据
将不纳⼊条件筛选
 curr: 1 // 重新从第 1 ⻚开始
 }
 }); // 只重载数据
 });
});

layer.close(index);

});
} else if(obj.event === ‘edit’){
// 输⼊框
layer.prompt({
// 表单元素的类型 0=⽂本框 1=密码框 2=⽂本域
formType: 0
,value: data.username
}, function(value, index){
// 修改指定单元格的值
// value表示输⼊的值
obj.update({
username: value
});
// 关闭弹出层
layer.close(index);
});
}
});

});


##### 开启单元格编辑:

```html
<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" layfilter="demo">
 <thead>
 <tr>
 <th lay-data="{type:'checkbox'}">ID</th>
 <th lay-data="{field:'id', sort: true}">ID</th>
 <th lay-data="{field:'username', sort: true, edit: 'text'}">⽤
户名</th>
 <th lay-data="{field:'sex', edit: 'text'}">性别</th>
 <th lay-data="{field:'city', edit: 'text'}">城市</th>
 <th lay-data="{field:'experience', sort: true, edit: 'text'}">
积分</th>
 </tr>
 </thead>
</table>

layui.use('table', function(){
var table = layui.table;
// 监听单元格编辑
table.on('edit(demo)', function(obj){
var value = obj.value // 得到修改后的值
,data = obj.data // 得到所在⾏所有键值
,field = obj.field; // 得到字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
});
});
数据表格的重载:
<div class="demoTable">
 搜索ID：
 <div class="layui-inline">
 <input class="layui-input" name="id" id="demoReload"
autocomplete="off">
 </div>
 <button class="layui-btn" id="searchBtn">搜索</button>
</div> <table class="layui-hide" id="demo" lay-filter="demo"></table>

layui.use('table', function(){
 var table = layui.table;
 var $ = layui.jquery; // 获取jquery对象
 // 执⾏渲染
 table.render({
 elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
 ,url: 'user.json' // 数据接⼝
 ,page:true // 开启分⻚
 ,cols: [[ // 设置表头
 {type: 'checkbox', fixed: 'left'} // 设置复选框
 ,{field: 'id', title: 'ID'}
 ,{field: 'username', title: '⽤户名'}
 ,{field: 'sex', title: '性别'}
 ]]
 });
 // 给指定元素绑定事件
 $(document).on('click', '#searchBtn', function(data) {
 // 获取搜索框对象
 var demoReload = $('#demoReload');
 table.reload('demo', {
     where: { // 设定异步数据接⼝的额外参数，任意设
 id: demoReload.val()
 }
 ,page: {
 // 让条件查询从第⼀⻚开始查询，不写则从当前⻚开始查询，此⻚之前的数据
将不纳⼊条件筛选
 curr: 1 // 重新从第 1 ⻚开始
 }
 }); // 只重载数据
 });
});
夜不过如此
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui
wangjinju77777的博客
08-23 510
LayUI 的介绍 layui（谐⾳：类UI) 是⼀款采⽤⾃身模块规范编写的前端 UI 框架，遵循原⽣ HTML/CSS/JS 的书写与组织形式，⻔槛极低，拿来即⽤。 由国⼈开发，16年出⼚的框架，其主要提供了很多好看、⽅便的样式，并且基本拿来即⽤，和 Bootstrap有些相似，但该框架有个极⼤的好处就是定义了很多前后端交互的样式接⼝，如分⻚表格，只需在前端配置好接⼝，后端则按照定义好的接⼝规则返回数据，即可完成⻚⾯的展示，极⼤减少了后 端⼈员的开发成本。 LayUI 的特点
BootStrap和LayUI
qq_43658407的博客
04-16 4467
1. BootStrap BootStrap的使用 Bootstrap是一套现成的CSS样式集合，Bootstrap 是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。 1.特点： 1.简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让web开发更速、简单。 2.基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。 3.自定义JQuery插件
react结合bootstrap实现评论功能
10-15
主要为大家详细介绍了react结合bootstrap实现评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统实战教程
10-13
本系列课程主要讲述如何利用Servlet3.0+JDBC+Bootstrap+MYSQL+Ajax+构建企业级应用解决方案,主要分为两部分完成第一部分：设计部分，通过需求分析，设计物理模型，画出原型界面（HTML）第二部分：编码部分，具体实现各个功能模块
bootstrap&layui
HAfraid的博客
03-30 669
平板≥768px：6/12 | 桌面端≥992px：4/12。
前端采用Bootstrap,layui后端采用Spring+SpringMVC+Mybatis技术小型系统
09-25
前端采用Bootstrap,layui后端采用Spring+SpringMVC+Mybatis技术整合SSM框架 小型系统 学习使用 后端增删改查 访客管理 地图API JQUERY日历 前端Bootstrap设计 书画页面
基于Bootstrap + LayUI + SSM的仿虾米音乐系统项目.zip
10-12
基于Bootstrap + LayUI + SSM的仿虾米音乐系统项目 基于Bootstrap + LayUI + SSM的仿虾米音乐系统项目 基于Bootstrap + LayUI + SSM的仿虾米音乐系统项目 基于Bootstrap + LayUI + SSM的仿虾米音乐系统项目 基于...
jquery+bootstrap+layui前端框架三件套
08-03
包含jquery-1.9.1和bootstrap-3.3.7和layui-v2.5.6三个前端框架，这三个都是前端开发常用的强大框架
Java项目:校园相册管理系统(java+SSM+bootstrap+layui+Mysql)
10-14
项目介绍: 实现了用户登录与注册,查看首页,查看我的相册,添加相册,提交评论,修改密码等功能 技术栈: 后端：Spring+SpringMVC+Mybatis 前端：html+CSS+JavaScript+bootstrap+layui
[前端组件]layui、bootstrap
weixin_44275351的博客
10-06 398
Java网站一些常用的前端UI，可以美化我们的前端页面，常见的有Layui和Bootstrap。
Bootstrap图标实现移动端的星星评分功能
04-30
利用Bootstrap图标实现移动端的星星评分功能，兼容各大平台系统，测试通过安卓和苹果手机！
Bootstrap与Layui简单使用（适合后端）
堂堂百星王者
11-14 6321
Layui 下载 layui官网 资源引入 将解压后layui-v2.5.6\layui-v2.5.6下的layui文件夹放入项目根路径即可 html头： <head> <meta charset="utf-8" /> <title>数据绑定</title> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> <script src=
前端BootStrap与LayUI框架
qq_52992141的博客
11-05 1042
前端BootStrap与LayUI
网页设计框架前台Bootstrap、后端LayUI，常用插件Layer+Echarts。
weixin_45664706的博客
01-03 1416
网页设计框架 bootstrap与layUI对比 layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看。 bootstrap 相对来说是比较成熟的一个框架，现在已经更新到4.X版本。是一个很成熟的框架，这个大部分人一般都用过。 layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果。 适合做后台框架。layui是提供给后端开发人...
Bootstrap实战 - 评论列表
后除
01-26 2808
Bootstrap 是当前很受欢迎的前端框架，如何用 Bootstrap 快速完成一个网站？社交媒体网站盛行，人们常常会使用评论表达自己的观点，评论功能已然成为网站的一部分。一个基础的媒体对象由四个部分组成...
Boostrap&LayUI
weixin_61399281的博客
04-16 1183
Boostrap 官网：http://getbootstrap.com/ 中文网：http://www.bootcss.com/ BootStrap 特点 1. 简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让 web 开发更速、简单。 2. 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设 计，12列格网，样式向导文档。 3. 自定义 JQuery 插件，完整的类库，bootstrap3 基于Less，bo
【blog项目】layui与jquery冲突导致鼠标悬停事件失效、如何调用layui.use()作用域里的方法
Mr_Tang4的博客
04-25 971
解决鼠标悬停事件失效问题
LayuiMini使用时候初始化模板修改（下载源码）
小二丶的博客
04-23 361
LayuiMini使用时候初始化模板修改（下载源码）
SpringBoot引入Layui样式总是出现404
最新发布
gaoqiandr的博客
04-26 126
本文主要介绍的是在项目开发中SrpingBoot引入Layui样式出现404的解决方案
bootstrap和layui哪个好用
06-06
这个问题没有绝对的答案，因为bootstrap和layui都有各自的优点和适用场景。Bootstrap是一个成熟的前端框架，具有广泛的应用和社区支持，适用于各种类型的网站和应用程序。Layui则是一个轻量级的前端框架，具有简单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值