layUI布局使用教程
layui特點
(1)layui屬于輕量級框架,簡單美化.是用于開發(fā)后端模式,它在服務端頁面上有非常好的效果.
(2)layui是提供給后端開發(fā)人員的ui框架,基于DOM驅動.
layui的使用
引入layui的核心css文件
<link rel="stylesheet" type="text/css" href="layui.css文件路徑" rel="external nofollow" >
引入layui的hexinjs文件(模塊化引入)
<script src="layui.js文件路徑" type="text/javascript"></script>
1.頁面元素
1.1布局
1.1.布局容器
1.1.1固定寬度（兩側有留白效果）
將柵格放入一個帶有class="layui-container"的特定容器中,以便在小屏幕以上的設備中固定寬度,讓列可控.
<div class="layui-container" style="background-color:navajowhite;height:300px"> 固定寬度 <div>
1.1.2完整寬度(占據屏幕寬度的100%)
可以不固定容器寬度,讓柵格或其它元素放入一個帶有class="layui-fluid"的容器中,那么寬度將不會固定,而是100%適應.
<div class="layui-fluid" style="background-color : cyan; height:300px"> 完整寬度 </div>
1.2.柵格系統(tǒng)
為了豐富網頁布局,簡化HTML/CSS代碼的耦合,并提升多終端的適配能力,layui引進了一套具備響應式能力的柵格系統(tǒng).將容器進行了12等分,預設了4*12種CSS排列類,他們在移動設備、平板、桌面上/大尺寸四種不同的屏幕下發(fā)揮著各自的作用.
1.2.1柵格布局規(guī)劃
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)元素中放入你自己的任意元素填充內容.
<!--
柵格系統(tǒng)
列組合
1.定義行 .layui-row
2.定義列 .layui-col-md*
md表示不同屏幕的標識(xs(超小屏幕,如手機),sm(小屏幕,如平板),md(桌面中等屏幕),lg(桌面大型屏幕))
*列的數量
3.每一行被均分為12列,列的總數不能超過12,否則會自動換行
4.響應式規(guī)則
柵格會自動根據屏幕的分辨率選擇對應的樣式效果.
列間距
.layui-col-space*
*代表的是px值(1-30)
列偏移
將列向右偏移指定列數
.*layui-col-md-offset*
*代表的是列數
列嵌套
列之前可以無限嵌套列
-->
?
<!-- 布局容器 -->
<div class="layui-container">
<!-- 定義行 -->
<div class="layui-row">
<!-- 定義列 -->
<div class="layui-col-md5" style="background-color:cyan">內容5/12</div>
<div class="layui-col-md7" style="background-color:burlywood">內容7/12</div>
</div>
</div>1.2.2響應式規(guī)則
柵格的響應式能力,得益于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 |
| 響應行為 | 始終按設置的比例水平排列 | 在當前屏幕下水平排列,如果屏幕大小低于臨界值則堆疊排列 | 在當前屏幕下水平排列,如果屏幕大小低于臨界值則堆疊排列 | 在當前屏幕下水平排列,如果屏幕大小低于臨界值則堆疊排列 |
<!-- 響應式規(guī)則 -->
<div class="layui-row">
<div class="layui-col-md4 layui-col-sm6" style="background-color: #009688">平板>=768px 6/12| 桌面端>=992px 4/12
</div>
</div>
<div class="layui-row">
<div class="layui-col-md8 layui-col-xs12" style="background-color: #009688">手機<768px 12/12| 桌面端>=992px 6/12
</div>
</div>
1.2.3列間距
通過"列間距"的預設類,來設定列之間的間距。且一行中最左的列不會出現左邊距,最右的列不會出現右邊距.列間距在保證排版美觀的同時,還可以進一步保證分列的寬度精細程度.我們結合網頁常用的邊距,預設了12種不同尺寸的邊距,分別是:
/*支持列之間為 1px-30px區(qū)間的所有雙數間隔, 以及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-md6">
<div style="background-color:gray">內容6/12</div>
</div>
<div class="layui-col-md6">
<div style="background-color:navajowhite">內容6/12</div>
</div>
</div>注:
1.layui-col-space:設置后不起作用主要是因為設置的是padding,也就是說向內縮,所以設置背景色padding也是會添上顏色,看起來好像沒有間距一樣.可以在里面再加一個div,來達到目的.
2.間距一般不高于30px,如果超過30,建議使用列偏移.
1.2.4列偏移
對列追加 類似 layui-col-md-offset * 的預設類,從而讓列向右偏移.其中 * 號代表偏移占據的列數,可選中為1-12.
如:layui-col-md-offset3,即代表在"中型桌面屏幕下",讓該列向右偏移3個列寬度.
<!-- 列偏移 -->
<h3>列偏移</h3>
<div class="layui-row">
<!-- 定義列 -->
<div class="layui-col-md4">
<div style="background-color:yellowgreen">內容4/12</div>
</div>
<div class="layui-col-md4 layui-col-md-offset4">
<div style="background-color:deeppink">內容4/12,向右移動四列</div>
</div>
</div>注:列偏移可針對不同屏幕的標準進行設定,在當前設定的屏幕下有效,當低于桌面屏幕的規(guī)定的臨界值,就會堆疊排列.
1.2.5列嵌套
可以對柵格進行無窮層次的嵌套.在列元素 (layui-col-md*) 中插入行元素 (layui-row) ,即可完成嵌套.
<!-- 列嵌套 -->
<h3>列嵌套</h3>
<div class="layui-row layui-col-space15">
<div class="layui-col-md6" style="background-color:blueviolet">
<div class="layui-row">
<div class="layui-col-md4" style="background-color:red">內容4/12</div>
<div class="layui-col-md6" style="background-color:blue">內容8/12</div>
<div class="layui-col-md2">內部列</div>
</div>
</div>
</div>到此這篇關于layUI布局使用教程的文章就介紹到這了,更多相關layUI布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Webpack設置環(huán)境變量的一些誤區(qū)詳解
這篇文章主要給大家介紹了關于Webpack設置環(huán)境變量的一些誤區(qū)，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Webpack具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
這篇文章主要介紹了js對象合并的4種方式與數組合并的4種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10![自動生成文章摘要[JavaScript 版本]](http://img.jbzj.com/images/xgimg/bcimg2.png)
這篇文章主要介紹了自動生成文章摘要[JavaScript 版本]2006-12-12
靜態(tài)的動態(tài)續(xù)篇之來點XML...2006-08-08
下面小編就為大家?guī)硪黄庋b獲取dom元素的簡單實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了js中hash和ico的關聯(lián)分析,以實例形式分析了location.hash與ico的加載順序關系,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要給大家介紹了在webpack打包后直接訪問頁面圖片路徑錯誤的解決方法，文中介紹的非常詳細，對遇到這個問題的朋友們具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章主要給大家介紹了使用JS如何制作簡單的ASCII圖與單極圖的相關資料，文中介紹的非常詳細，并在文末給出了詳細的示例代碼，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
fetch是一種HTTP數據請求的方式,是XMLHttpRequest的一種替代方案,fetch不是ajax的進一步封裝,而是原生js,下面這篇文章主要給大家介紹了關于js fetch異步請求使用的相關資料,需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細介紹了微信小程序實現登陸注冊滑塊驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05