layUI基本使用——布局

layui特点

(1)layui属于轻量级框架,简单美化.是用于开发后端模式,它在服务端页面上有非常好的效果.

(2)layui是提供给后端开发人员的ui框架,基于DOM驱动.

layui的使用

引入layui的核心css文件

引入layui的hexinjs文件(模块化引入)

1.页面元素

1.1布局

1.1.布局容器

1.1.1固定宽度（两侧有留白效果）

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

  

  固定宽度
  

1.1.2完整宽度(占据屏幕宽度的100%)

可以不固定容器宽度,让栅格或其它元素放入一个带有class="layui-fluid"的容器中,那么宽度将不会固定,而是100%适应.

  

  完整宽度
  

---

1.2.栅格系统

为了丰富网页布局,简化HTML/CSS代码的耦合,并提升多终端的适配能力,layui引进了一套具备响应式能力的栅格系统.将容器进行了12等分,预设了4*12种CSS排列类,他们在移动设备、平板、桌面上/大尺寸四种不同的屏幕下发挥着各自的作用.

1.2.1栅格布局规划

1.采用 layui-row 来定义行,如:

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)元素中放入你自己的任意元素填充内容.

  
  
  ​
  
  

  
      

          
          
内容5/12
          
内容7/12
      
  

1.2.2响应式规则

栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,从而针对四类不同尺寸的屏幕进行相应的配置处理.

	超小屏幕(手机<7686px)	小屏幕(平板>=768px)	中等屏幕(桌面>=992px)	大型屏幕(桌面>=1200px)
.layui-container的值	auto	750px	970px	1170px
标记	xs	sm	md	lg
列对应类*为1-12的等分数值	layui-col-xs*	layui-col-sm*	layui-col-md*	layui-col-lg*
总列数	12	12	12	12
响应行为	始终按设置的比例水平排列	在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列	在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列	在当前屏幕下水平排列,如果屏幕大小低于临界值则堆叠排列

  
  

      
平板>=768px 6/12| 桌面端>=992px 4/12
      
  
  

      
手机<768px 12/12| 桌面端>=992px 6/12
      
  

1.2.3列间距

通过"列间距"的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距.列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度.我们结合网页常用的边距,预设了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

  
  
列边距
  

      
      

          
内容6/12
      
      

          
内容6/12
      
  

注:

1.layui-col-space:设置后不起作用主要是因为设置的是padding,也就是说向内缩,所以设置背景色padding也是会添上颜色,看起来好像没有间距一样.可以在里面再加一个div,来达到目的.

2.间距一般不高于30px,如果超过30,建议使用列偏移.

1.2.4列偏移

对列追加 类似 layui-col-md-offset * 的预设类,从而让列向右偏移.其中 * 号代表偏移占据的列数,可选中为1-12.

如:layui-col-md-offset3,即代表在"中型桌面屏幕下",让该列向右偏移3个列宽度.

  
  
列偏移
  

      
      

          
内容4/12
      
      

          
内容4/12,向右移动四列
      
  

注:列偏移可针对不同屏幕的标准进行设定,在当前设定的屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列.

1.2.5列嵌套

可以对栅格进行无穷层次的嵌套.在列元素 (layui-col-md*) 中插入行元素 (layui-row) ,即可完成嵌套.

  
  
列嵌套
  

      

          

              
内容4/12
              
内容8/12
              
内部列