青岛免费网站建站模板,北京建筑有限公司,市场监督管理局电话,同步修改 wordpress目录
一#xff1a;栅格布局的基本概念
二#xff1a;栅格布局规则
三#xff1a;始终等比例水平排列案例
四#xff1a;响应式规则
五#xff1a;移动设备、桌面端的组合响应式展现案例
六#xff1a;移动设备、平板、桌面端的复杂组合响应式展现案例
七#xf…目录
一栅格布局的基本概念
二栅格布局规则
三始终等比例水平排列案例
四响应式规则
五移动设备、桌面端的组合响应式展现案例
六移动设备、平板、桌面端的复杂组合响应式展现案例
七响应式公共类
八列间距
九列偏移
十案例演示
1.列间隔
2.列偏移
3.常规布局从小屏幕堆叠到桌面水平排列
4.栅格嵌套
5.流体容器宽度自适应不固定
十一IE8/9 兼容方案 一栅格布局的基本概念 Layui 栅格系统是一套具备响应式能力的布局方案采用业界比较常用的容器横向 12 等分规则预设了 5*12 种 CSS 排列类内置多种大小尺寸的多终端适配能很好地实现响应式局这意味着一套系统能同时适配于电脑的不同大小屏幕和手机、平板等移动屏幕使得网页布局变得更加灵活同时也极大地降低了 HTML/CSS 代码的耦合。 二栅格布局规则
1.采用 layui-row 来定义行如div classlayui-row/div2.采用类似 layui-col-md* 这样的预设类来定义一组列column且放在行row内。其中 变量md 代表的是不同屏幕下的标记可选值见下文变量* 代表的是该列所占用的 12 等分数如 6/12可选值为 1 - 12如果多个列的“等分数值”总和等于 12则刚好满行排列。如果大于12多余的列将自动另起一行。3.列可以同时出现最多 5 种不同的组合分别是xs / sm / md / lg / xl 2.8以在不同尺寸屏幕下进行自动适配。4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。5.最后在列column元素中放入你自己的任意元素填充内容完成布局 三始终等比例水平排列案例
!DOCTYPE html
html langen
headmeta charsetUTF-8title布局容器/title!-- 栅格布局--!-- 引入 layui.css --link href//unpkg.com/layui2.8.0/dist/css/layui.css relstylesheet!-- 引入 layui.js --script src//unpkg.com/layui2.8.0/dist/layui.js/script
/head
body!--布局容器--div classlayui-container!--定义行--div classlayui-row !--定义列--div classlayui-col-md5 stylebackground-color: yellow内容5/12/divdiv classlayui-col-md7 stylebackground-color: #00f7de内容7/12/div/div!--定义行--div classlayui-row !--定义列--div classlayui-col-md5 stylebackground-color:rebeccapurple内容4/12/divdiv classlayui-col-md7 stylebackground-color: red内容4/12/div/div/div/body
/html
四响应式规则 栅格的响应式能力得益于 CSS3 媒体查询Media Queries针对不同尺寸的屏幕进行相应的适配处理
超小屏幕 (手机768px)小屏幕 (平板≥768px)中等屏幕 (桌面≥992px)大型屏幕 (桌面≥1200px)超大屏幕 (桌面≥1400px)layui-containerauto750px970px1170px1330px标记xssmmdlgxl 2.8列对应类layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*layui-col-xl*总列数12响应行为始终按比例水平排列在当前屏幕下水平排列如果屏幕大小低于临界值则堆叠排列 五移动设备、桌面端的组合响应式展现案例
div classlayui-rowdiv classlayui-col-xs12 layui-col-md8div classgrid-demo grid-demo-bg1xs:12/12 | md:8/12/div/divdiv classlayui-col-xs6 layui-col-md4div classgrid-demoxs:6/12 | md:4/12/div/divdiv classlayui-col-xs6 layui-col-md12div classgrid-demo grid-demo-bg2xs:6/12 | md:12/12/div/div
/div
测试效果 六移动设备、平板、桌面端的复杂组合响应式展现案例
div classlayui-rowdiv classlayui-col-xs6 layui-col-sm6 layui-col-md4div classgrid-demo grid-demo-bg1xs:6/12 | sm:6/12 | md:4/12/div/divdiv classlayui-col-xs6 layui-col-sm6 layui-col-md4div classgrid-demo layui-bg-redxs:6/12 | sm:6/12 | md:4/12/div/divdiv classlayui-col-xs4 layui-col-sm12 layui-col-md4div classgrid-demo layui-bg-bluexs:4/12 | sm:12/12 | md:4/12/div/divdiv classlayui-col-xs4 layui-col-sm7 layui-col-md8div classgrid-demo layui-bg-greenxs:4/12 | sm:7/12 | md:8/12/div/divdiv classlayui-col-xs4 layui-col-sm5 layui-col-md4div classgrid-demo layui-bg-blackxs:4/12 | sm:5/12 | md:4/12/div/div
/div
测试效果 七响应式公共类
类名class说明layui-show-*-block定义不同设备下的 display: block; * 可选值有xs、sm、md、lg、xllayui-show-*-inline定义不同设备下的 display: inline; * 可选值同上layui-show-*-inline-block定义不同设备下的 display: inline-block; * 可选值同上layui-hide-*定义不同设备下的隐藏类即 display: none; * 可选值同上 八列间距 通过“列间距”的预设类来设定列之间的间距。且一行中最左的列不会出现左边距最右的列不会出现右边距。列间距在保证排版美观的同时还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距预设了 12 种不同尺寸的边距分别是
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
layui-col-space32
p即支持列之间为 1px-32px 区间的所有双数间隔以及 1px、5px、15px、25px 的单数间隔/p
下面是一个简单的例子列间距为 16px
div classlayui-row layui-col-space16div classlayui-col-md41/3/divdiv classlayui-col-md41/3/divdiv classlayui-col-md41/3/div
/div 九列偏移 对列追加类似 layui-col-md-offset* 的预设类从而让列向右偏移。如layui-col-md-offset3即代表在“中型桌面屏幕”下让该列向右偏移 3 个列宽度。下面是一个采用「列偏移」机制让两个列左右对齐的实例
div classlayui-rowdiv classlayui-col-md44/12/divdiv classlayui-col-md4 layui-col-md-offset4偏移4列从而在最右/div
/div 请注意列偏移可针对不同屏幕的标准进行设定比如上述的例子只会在桌面屏幕下有效当低于桌面屏幕的规定的临界值就会堆叠排列 十案例演示
1.列间隔
div classlayui-row layui-col-space1div classlayui-col-md3div classgrid-demo grid-demo-bg11/4/div/divdiv classlayui-col-md3div classgrid-demo1/4/div/divdiv classlayui-col-md3div classgrid-demo grid-demo-bg11/4/div/divdiv classlayui-col-md3div classgrid-demo1/4/div/div
/divdiv classlayui-row layui-col-space5div classlayui-col-md4div classgrid-demo grid-demo-bg11/3/div/divdiv classlayui-col-md4div classgrid-demo1/3/div/divdiv classlayui-col-md4div classgrid-demo grid-demo-bg11/3/div/div
/divdiv classlayui-row layui-col-space10div classlayui-col-md9div classgrid-demo grid-demo-bg19/12/div/divdiv classlayui-col-md3div classgrid-demo3/12/div/div
/divdiv classlayui-row layui-col-space15div classlayui-col-md7div classgrid-demo grid-demo-bg17/12/div/divdiv classlayui-col-md5div classgrid-demo5/12/div/div
/divdiv classlayui-row layui-col-space30div classlayui-col-md7div classgrid-demo grid-demo-bg17/12/div/divdiv classlayui-col-md5div classgrid-demo5/12/div/div
/div
效果 2.列偏移
div classlayui-rowdiv classlayui-col-md4div classgrid-demo grid-demo-bg14/12/div/divdiv classlayui-col-md4 layui-col-md-offset4div classgrid-demo偏移4列/div/div
/divdiv classlayui-rowdiv classlayui-col-md3 layui-col-md-offset3div classgrid-demo grid-demo-bg1偏移3列/div/divdiv classlayui-col-md3div classgrid-demo不便宜/div/div
/div
效果 3.常规布局从小屏幕堆叠到桌面水平排列
div classlayui-rowdiv classlayui-col-md1div classgrid-demo grid-demo-bg11/12/div/divdiv classlayui-col-md1div classgrid-demo1/12/div/divdiv classlayui-col-md1div classgrid-demo grid-demo-bg11/12/div/divdiv classlayui-col-md1div classgrid-demo1/12/div/divdiv classlayui-col-md1div classgrid-demo grid-demo-bg11/12/div/divdiv classlayui-col-md1div classgrid-demo1/12/div/divdiv classlayui-col-md1div classgrid-demo grid-demo-bg11/12/div/divdiv classlayui-col-md1div classgrid-demo1/12/div/divdiv classlayui-col-md1div classgrid-demo grid-demo-bg11/12/div/divdiv classlayui-col-md1div classgrid-demo1/12/div/divdiv classlayui-col-md1div classgrid-demo grid-demo-bg11/12/div/divdiv classlayui-col-md1div classgrid-demo1/12/div/div
/divdiv classlayui-rowdiv classlayui-col-md9div classgrid-demo grid-demo-bg175%/div/divdiv classlayui-col-md3div classgrid-demo25%/div/div
/divdiv classlayui-rowdiv classlayui-col-md4div classgrid-demo grid-demo-bg133.33%/div/divdiv classlayui-col-md4div classgrid-demo33.33%/div/divdiv classlayui-col-md4div classgrid-demo grid-demo-bg133.33%/div/div
/divdiv classlayui-rowdiv classlayui-col-md6div classgrid-demo grid-demo-bg150%/div/divdiv classlayui-col-md6div classgrid-demo50%/div/div
/div
效果 4.栅格嵌套
理论上你可以对栅格进行无穷层次的嵌套这更加增强了栅格的表现能力
div classlayui-rowdiv classlayui-col-md5div classlayui-row grid-demodiv classlayui-col-md3div classgrid-demo grid-demo-bg1内部列/div/divdiv classlayui-col-md9div classgrid-demo grid-demo-bg2内部列/div/divdiv classlayui-col-md12div classgrid-demo grid-demo-bg3内部列/div/div/div/divdiv classlayui-col-md7div classlayui-row grid-demo grid-demo-bg1div classlayui-col-md12div classgrid-demo内部列/div/divdiv classlayui-col-md9div classgrid-demo grid-demo-bg2内部列/div/divdiv classlayui-col-md3div classgrid-demo grid-demo-bg3内部列/div/div/div/div
/div
效果 5.流体容器宽度自适应不固定
div classlayui-rowdiv classlayui-col-sm3div classgrid-demo grid-demo-bg125%/div/divdiv classlayui-col-sm3div classgrid-demo25%/div/divdiv classlayui-col-sm3div classgrid-demo grid-demo-bg125%/div/divdiv classlayui-col-sm3div classgrid-demo25%/div/div
/div
效果 十一IE8/9 兼容方案 事实上 IE8/IE9 并不支持 Media Queries但你可以使用下面的补丁进行兼容补丁来自于开源社区
!-- 让 IE8/9 支持媒体查询从而兼容栅格 --
!--[if lt IE 9]script src/cdn.staticfile.org/html5shiv/r29/html5.min.js/scriptscript src/cdn.staticfile.org/respond.js/1.4.2/respond.min.js/script
![endif]--
将上述代码放入你页面 body 标签内的任意位置即可
