BootStrap和LayUI

1. BootStrap

• BootStrap的使用
  Bootstrap是一套现成的CSS样式集合，Bootstrap 是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。

   1.特点：
   	1.简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让web开发更速、简单。
   	2.基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。
   	3.自定义JQuery插件，完整的类库，bootstrap3基于Less，bootstrap4 基于Sass的CSS预处理技术。
   	4.Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。
   	5.丰富的组件。
   2.使用：
   	载入Bootstrap的css：
   		<link href="css/bootstrap.min.css" rel="stylesheet">
   	如果要使用Bootstrap的js插件，必须先调入jQuery：
   		<script src="js/jquery-3.4.1.js"></script> 
   	 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用：
   	 	<script src="js/bootstrap.min.js"></script>
   3.html标准模板中内容：
   	使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式：
   		<meta http-equiv="X-UA-Compatible" content="IE=edge">				
   	viewport表示用户是否可以缩放页面； 
   	width指定视区的逻辑宽度； 
   	device-width指示视区宽度应为设备的屏幕宽度； 
   	initial-scale指令用于设置Web页面的初始缩放比例；
   	initial-scale=1则将显示未经缩放的Web文档；
   		<meta name="viewport" content="width=device-width, initial-scale=1">
  

• 布局容器

   1..container 类用于固定宽度并支持响应式布局的容器。
   2..container-fluid类用于100%宽度，占据全部视口（viewport）的容器。
  

• 栅格网格系统

   行 row 			列 column
   	行：.row
   	列：col-xs-列数  col-sm-列数  col-md-列数   col-lg-列数
   1.列组合：
   	列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，大于12,则自动换到下一行。），有点类似于表格的colspan属性。
   2.列偏移：
   	让列之间产生一些间隙  col-md-offset
   3.列排序：
   	列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
   	在Bootstrap框架的网格系统中是通过添加类名col-md-push-* 和col-md-pull-*  (其中星号代表移动的列组合数)。往前pull，往后push。
   4.列嵌套：
   	Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.
  

• 排版常用样式

   1.标题
   	Bootstrap和普通的HTML页面一样，定义标题都是使用标签。
   2.段落
   	通过.lead来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
   		<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong> </p>
   3.强调
   	定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调：
   		.text-muted			 	提示，使用浅灰色（#999）。
   		.text-primary			主要，使用蓝色（#428bca）。
   		.text-success			成功，使用浅绿色(#3c763d) 。
   		.text-info				通知信息，使用浅蓝色（#31708f） 。
   		.text-warning			警告，使用黄色（#8a6d3b） 。
   		.text-danger			危险，使用褐色（#a94442）。
   4.对齐效果
   	在CSS中常常使用text-align来实现文本的对齐风格的设置。
   	Bootstrap通过定义四个类名来控制文本的对齐风格：
   		.text-left				左对齐 。
   		.text-center			居中对齐 。
   		.text-right				右对齐 。
   		.text-justify			两端对齐。
   5.列表
   	1.去点列表 			class="list-unstyled"
   	2.内联列表 			class="list-inline"
   		保持水平显示。内联列表就是为制作水平导航而生。
   	3.定义列表			class="dl-horizontal"
   		水平定义列表。当标题宽度超过160px时，将会显示3个省略号。
   6.代码
   	Bootstrap提供了三种代码风格：
   		1.单行内联代码			<code>代码</code>
   		2.多行块代码				<pre>代码</pre>
   			代码会保留原本的格式，包括空格和换行。
   			显示html标签的代码需要适应字符实体，小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。
   			pre-scrollable (height,max-height高度固定,为340px,超过会存在滚动条)
   		3.快捷键					<p><kbd>快捷键</kbd></p>
   7.表格
   	1.表格样式：
   		基础样式： 
   			.table：基础表格 
   		附加样式：
   			.table-striped		斑马线表格 。
   			.table-bordered		带边框的表格 。
   			.table-hover		鼠标悬停高亮的表格 。
   			.table-condensed	紧凑型表格，单元格没内距或者内距较其他表格的内距小。
   	2.tr、th、td样式：
   		.active 		将悬停的颜色应用在行或者单元格上。
   		.success 		表示成功的操作。
   		.info 			表示信息变化的操作。
   		.warning 		表示一个警告的操作。
   		.danger 		表示一个危险的操作。
  

• 表单

   1.表单元素：
   	1.输入框text			.form-control
   		空间大小				.input-lg（较大）.input-sm（较小）
   	2.下拉选择框select		.form-control
   		多行选择设置			multiple="multiple"
   	3.文本域textarea		.form-control
   		行数				row="行数"
   	4.单选框radio 
   		垂直显示				 .radio 
   		水平显示				 .radio-inline
   	5.复选框checkbox 
   		垂直显示				 .checkbox 
   		水平显示				 .checkbox-inline
   	6.按钮button				
   		基础样式				 .btn
   		附加样式				 .btn-primary .btn-info .btn-success .btn-warning .btn-danger .btn-link .btn-default
   			多标签支持			 使用 a div 等标签制作按钮
   			按钮大小 		     .btn-lg（大型）.btn-sm（小型）.btn-xs（超小）
   			按钮禁用
   				1.在标签中添加disabled属性。（disabled="disabled"）
   				2.在元素标签中添加类名"disabled"。
   			注意：在class属性中添加disabled只是样式上禁用了，并不是真正的禁用了此按钮！
   2.表单布局
   	创建基本表单的步骤：
   		1.向父元素添加role="form"。 
   		2.把标签和控件放在一个带有class="form-horizontal"的中。这是获取最佳间距所必需的。 
   		3.向所有的文本元素使用<span></span> 和 <select></select> 添加。
  

• 缩略图和面板

   1.缩略图
   	 class="thumbnail"
   2.面板
   	默认的.panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
   	 .panel-default				默认样式。
   	 .panel-heading				面板头 。
   	 .panel-body				面板主体内容。
  

• 导航
  使用下拉与按钮组合可以制作导航。

   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.二级菜单。
  

分页导航

1.页码导航：
	ul标签上加.pagination[.pagination-lg | .pagination-sm] 。
2.翻页导航：
	ul标签上加.pager。

• 下拉菜单

   在使用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）。
  

• 模态框
  模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互 动。子窗体可提供信息、交互等。

   1.通过data属性：
   	在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。 
   2.通过JavaScript：
   	使用这种技术，可以通过JavaScript来调用带有 id="identifier" 的模态框：
   		$('#identifier').modal(options);
   方法：
   	Toggle: .modal('toggle') 		手动切换模态框。 
   		$('#identifier').modal('toggle');
   	Show: .modal('show') 			手动打开模态框。 
   		$('#identifier').modal('show');
   	Hide: .modal('hide') 			手动隐藏模态框。 
   		$('#identifier').modal('hide');
  

2. LayUI

• LayUI的使用
  ayui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端
  人员的开发成本。

   1.特点：
   	1.layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。
   	2.layui是提供给后端开发人员的ui框架，基于DOM驱动。
   2.使用：
   	 layui的目录结构如下：
   	 	├─css // css目录 
   	 	│ │─modules // 模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） 
   	 	│ │ ├─laydate 
   	 	│ │ ├─layer 
   	 	│ │ └─layim 
   	 	│ └─layui.css // 核心样式文件 
   	 	├─font // 字体图标目录 
   	 	├─images // 图片资源目录（目前只有layim和编辑器用到的GIF表情） 
   	 	│─lay // 模块核心目录 
   	 	│ └─modules // 各模块组件 
   	 	│─layui.js // 基础核心库 
   	 	└─layui.all.js // 包含layui.js和所有模块的合并文件
   	 引入文件：
   	 	./layui/css/layui.css 
   	 	./layui/layui.js // 提示：如果是采用非模块化方式，此处可换成：./layui/layui.all.js
   	 需要声明需要使用的模块和回调函数：
   	 	<script> 
   	 		// 注意：导航 依赖 element 模块，否则无法进行功能性操作 
   	 		layui.use('element', function(){ 
   	 			var element = layui.element; 
   	 			//… }); 
   	 	</script>
  

• 布局容器

   固定宽度		 		class="layui-container"
   完整宽度				class="layui-fluid"
  

• 栅格系统

   1.栅格布局规则：
   	1.采用layui-row来定义行：
   		<div class="layui-row"></div>
   	2.采用类似layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：
   		变量md代表的是不同屏幕下的标记。
   		变量*代表的是该列所占用的12等分数（如6/12），可选值为1 - 12。
   		如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
   	3.列可以同时出现最多四种不同的组合，分别是：
   		xs（超小屏幕，如手机）
   		sm（小屏幕，如平板）
   		md（桌面中等屏幕）
   		lg（桌面大型屏幕）
   	4.可对列追加类似layui-col-space5、layui-col-md-offset3这样的预设类来定义列的间距和偏移。
   	5.可以在列（column）元素中放入你自己的任意元素填充内容。
   2.响应式规则
   3.列边距
   	支持列之间为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
   	注意：
   		1.layui-col-space：设置后不起作用主要是因为**设置的是padding**,也就是说是**向内缩**，所以 设置背景色padding也是会添上颜色，看起来好像没有间距一样。可以在里面在加一个div，来达到目的。 
   		2.间距一般不高于30px，如果超过30，建议使用列偏移。
   4.列偏移
   	layui-col-md-offset*
   		其中*号代表的是偏移占据的列数，可选中为1 - 12。
   	注意：列偏移可针对不同屏幕的标准进行设定，在当前设定的屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。
   5.列嵌套
   	在列元素（layui-col-md*）中插入行元素（layui-row）。
  

• 按钮

   1.用法
   	向任意HTML元素设定class="layui-btn"，建立一个基础按钮。
   	通过追加格式为layui-btn-{type}的class来定义其它按钮风格。
   2.主题
   	原始 			class="layui-btn layui-btn-primary"
   	默认 			class="layui-btn"
   	百搭 			class="layui-btn layui-btn-normal"
   	暖色 			class="layui-btn layui-btn-warm"
   	警告 			class="layui-btn layui-btn-danger"
   	禁用 			class="layui-btn layui-btn-disabled"
   3.尺寸
   	大型 			class="layui-btn layui-btn-lg"
   	默认 			class="layui-btn"
   	小型 			class="layui-btn layui-btn-sm"
   	迷你 			class="layui-btn layui-btn-xs"
   4.圆角
   	class="layui-btn-radius"
   5.图标
   	class="layui-icon"
  

• 导航

   实现步骤：
   	1.引入的资源：
   		<link rel="stylesheet" href="layui/css/layui.css"> 
   		<script src="layui/layui.js"></script>
   	2.依赖加载模块：
   		<script type="text/javascript"> 
   			// 注意：导航 依赖 element 模块，否则无法进行功能性操作 
   			layui.use('element', function(){ 
   				var element = layui.element; 
   			}); 
   		</script>
   	3.显示指定类型的导航。
   1.水平导航
   	 class="layui-nav"
   2.垂直/侧边导航
   	垂直导航			class="layui-nav layui-nav-tree" 
   	侧边导航:		class="layui-nav layui-nav-tree layui-nav-side"
   3.导航主题
   	水平导航支持的其它背景主题有：
   		.layui-bg-cyan（藏青）.layui-bg-molv（墨绿）.layui-bg-blue（艳蓝）
   	垂直导航支持的其它背景主题有：
   		.layui-bg-cyan（藏青）
   4.面包屑
   	class="layui-breadcrumb"
   	可以通过设置属性lay-separator="" 来自定义分隔符。
  

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

   实现步骤：
   	1.引入的资源：
   		<link rel="stylesheet" href="layui/css/layui.css"> 
   		<script src="layui/layui.js"></script>
   	2.依赖加载模块：
   		<script type="text/javascript"> 
   			// 注意：选项卡 依赖 element 模块，否则无法进行功能性操作 
   			layui.use('element', function(){ 
   				var element = layui.element; 
   			}); 
   		</script>
   	3.加载HTML。
   1.选项卡风格
   	默认风格			layui-tab 
   	简洁风格			追加class：layui-tab-brief 
   	卡片风格			追加class：layui-tab-card
   2.带删除的选项卡
   	对父层容器设置属性lay-allowClose="true"来允许Tab选项卡被删除。
  

• 表格

   1.常规用法
   	<table class="layui-table">
   2.基础属性
   	lay-even				用于开启隔行背景，可与其它属性一起使用。
   	lay-skin="属性值"		若使用默认风格不设置该属性即可
   		line（行边框风格）row（列边框风格）nob（无边框风格）
   	lay-size="属性值"		若使用默认尺寸不设置该属性即可
   		sm（小尺寸）lg（大尺寸） 
  

• 表单
  基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。

   1.常规用法
   	<form class="layui-form" action="">
   2.表单元素
   	1.输入框text
   		<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类
   	2.下拉选择框select
   		属性selected可设定默认项。
   		属性disabled开启禁用，select和option标签都支持。
   		可以通过optgroup标签给select分组。
   		通过设定属性 lay-search 来开启搜索匹配功能。
   	3.复选框checkbox
   		属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）。
   		属性checked可设定默认选中。
   		属性lay-skin可设置复选框的风格 （原始风格：lay-skin="primary"）。
   		设置value="1"可自定义值，否则选中时返回的就是默认的on。
   	4.开关（将复选框checkbox，通过设定lay-skin="switch" 形成了开关风格）
   		属性title可自定义文本。
   		属性disabled开启禁用。
   		设置value="xxx"可自定义值，否则选中时返回的就是默认的on。
   	5.文本域textarea
   		class="layui-textarea"		layui.css提供的通用CSS类。
   3.组装行内表单
   	class="layui-inline"		定义外层行内
   	class="layui-input-inline"	定义内层行内
   4.忽略美化渲染
   	可以对表单元素增加属性lay-ignore设置后，将不会对该标签进行美化渲染，即保留系统风格。
   5.表单方框风格
   	通过追加layui-form-pane的class，来设定表单的方框风格。
   注意：复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性，否则会看起来比较别扭。
  

• 弹出层

   1.使用场景
   	1.作为独立组件使用layer
   		<!-- 引入好layer.js后，直接用即可 --> 
   		<script src="layer.js"></script> 
   		<script> 
   			layer.msg('hello'); 
   		</script>
   	2.在layui中使用layer
   		layui.use('layer', function(){ 
   			var layer = layui.layer; 
   			layer.msg('hello'); 
   		});
   2.基础参数
   	1.type - 基本层类型
   		类型：Number，默认：0 
   		可传入的值有：
   			 0（信息框，默认） 
   			 1（页面层） 
   			 2（iframe层） 
   			 3（加载层） 
   			 4（tips层）
   	2.title - 标题
   		类型：String/Array/Boolean，默认：'信息' 
   		title支持三种类型的值： 
   			若传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本； 
   			若需要自定义样式，可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意 css样式； 
   			若你不想显示标题栏，可以title: false；
   	3.content - 内容
   		类型：String/DOM/Array，默认：' ' 
   		content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM。
   	4.area - 宽高
   		类型：String/Array，默认：'auto' 
   		在默认状态下，layer是宽高都自适应的。
   		当定义宽度时，你可以area: '500px'，高度仍然是自适应的。 
   		当宽高都要定义时，你可以area: ['500px', '300px']。
   	5.icon - 图标
   	 	类型：Number，默认：-1（信息框）/0（加载层） 
   	 	信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6。如果是加载层，可以传入0-2。
   	 注意：信息框和加载层的私有参数。
  

• 日期与时间选择

   1.快速使用
   	1.在layui模块中使用：下载layui后，引入layui.css和layui.js即可。
   		通过layui.use('laydate', callback)加载模块后，再调用方法。
   	2.作为独立组件使用：去layDate独立版本官网下载组件包，引入laydate.js即可。
   		直接调用方法使用。
   2.基础参数
   	1.elem - 绑定元素
   		类型：String/DOM，默认值：无 
   		必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象。
   	2.type - 控件选择类型
   		类型：String，默认值：date 
   		用于单独提供不同的选择器类型，可选值如下：
   			year（年选择器）			 只提供年列表选择
   			month（年月选择器）		 只提供年、月选择
   			date（日期选择器）		 可选择：年、月、日。type默认值，一般可不填
   			time（时间选择器）		 只提供时、分、秒选择
   			datetime（日期时间选择器） 可选择：年、月、日、时、分、秒
   	3.format - 自定义格式
   		类型：String，默认值：yyyy-MM-dd 
   		通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate支持的格式如下：
   			yyyy 		年份，至少四位数。如果不足四位，则前面补零
   			y 			年份，不限制位数，即不管年份多少位，前面均不补零
   			MM 			月份，至少两位数。如果不足两位，则前面补零
   			M 			月份，允许一位数
   			dd 			日期，至少两位数。如果不足两位，则前面补零
   			d 			日期，允许一位数
   			HH 			小时，至少两位数。如果不足两位，则前面补零
   			H 			小时，允许一位数
   			mm 			分钟，至少两位数。如果不足两位，则前面补零
   			m 			分钟，允许一位数
   			ss 			秒数，至少两位数。如果不足两位，则前面补零
   			s 			秒数，允许一位数
   		格式：
   			//自定义日期格式 laydate.render({ 
   				elem: '#test' 
   				,format: 'yyyy年MM月dd日' //可任意组合 
   			});
   	4.value - 初始值
   		类型：String，默认值：new Date() 
   		支持传入符合format参数设定的日期格式字符，或者 new Date()。
  

• 分页

   1.快速使用
   	laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。
   		layui.use('laypage', function(){ 
   			var laypage = layui.laypage;
   		}
   2.jump - 切换分页的回调
   	当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）。
   		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 
   				} 
   			} 
   		});
  

3.基础参数
通过核心方法：laypage.render(options) 来设置基础参数。

• 数据表格

   1.快速使用
   	创建一个table实例最简单的方式是，在页面放置一个元素，然后通过 table.render() 方法指定该容器。
   2.三种初始化渲染方式
   	1.方法渲染
   		1.将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器。
   			<table id="demo"></table>
   		2.渲染表格
   			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)，可用于对当前表格进行“重载”等操作。
   	2.自动渲染
   		在一段table容器中配置好相应的参数，由table模块内部自动对其完成渲染，而无需你写初始的渲染方法。
   			1.带有class="layui-table"的标签。 
   			2.对标签设置属性lay-data=""用于配置一些基础参数 。
   			3.在标签中设置属性lay-data=""用于配置表头信息。
   3.头部工具栏
   	<script type="text/html" id="toolbarDemo">
   4.行工具栏
   	<script type="text/html" id="barDemo">