頁面佈局 layui與 layui的匯入

匯入

css  
<link rel="stylesheet" href="../layui/css/layui.css">
js
<script src="../layui/layui.js"></script>

測試 是否 匯入 成功

<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 

1. 頁面佈局 layui

固定佈局

 <div class="layui-container " style="background-color:red ;height: 300px;">
</div>

完整寬度

<div class="layui-fluid " style="background-color:red ;height: 300px;">
</div>

2. 柵格系統

layui-row 是行
layui-col-md*是列

變數md 是不同 螢幕下的標記
變數*代表的是該列所佔用的12等分數(如6/12) ,可選值為1- 12
如果多個列的“等分數值"總和等於12,則剛好滿行排列。如果大於12,多餘的列將自動另起一行。

<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md5" style="background-color: #0000FF;"> 5/12 </div>
 <div class="layui-col-md7" style="background-color: #00F7DE;"> 7/12 </div>
</div>
<div class="layui-row">
<div class="layui-col-md5" style="background-color: #0000FF;"> 5/12 </div>
 <div class="layui-col-md5" style="background-color: #00F7DE;"> 5/12 </div>
<div class="layui-col-md2" style="background-color: firebrick;"> 2/12 </div>
</div>
<div class="layui-row">
<div class="layui-col-md5" style="background-color: #00FF00;"> 5/12 </div>
 <div class="layui-col-md5" style="background-color: #00F7DE;"> 5/12 </div>
<div class="layui-col-md5" style="background-color: firebrick;"> 5/12 </div>
</div>
</div>	

3.列邊距

通過”列間距”的預設類，來設定列之間的間距。且一行中最左的列不會出現左邊距，最右的列不會出現

右邊距。列間距在保證排版美觀的同時還可以進一步保證分列的寬度精細程度。我們結合網頁常用的邊
距,預設了12種不同尺寸的邊距，分別是:
支援列之間為1px- 30px區間的所有雙數間隔，以及1px、 5px、 15px、25px的單數間隔
.layui-col-space* *(1–30)px

<h3>列邊距</h3>
		<div class="layui-container">
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md4" >
				     <div id="" style="background-color: #00FF00;">
				    	4
				     </div>	
				</div>
			    <div class="layui-col-md4"> 
					 <div id=""  style="background-color: #00F7DE;">
				 	4
					 </div>	
				</div>
				<div class="layui-col-md4" >
					 <div id=""  style="background-color: firebrick;">
						4
					 </div>	
				</div>
			</div>
		</div>	

4.列偏移

將列向右移動指定列數
layui-col-md-offset*
*代表的是列數

<div class="layui-container">
		<h3>列邊距</h3>
		<div class="layui-row ">
			<div class="layui-col-md4" style="background-color: #007DDB;">
			   4
			</div>
			<div class="layui-col-md4 " style="background-color: #00FF00;" >
				4
			</div>`在這裡插入程式碼片`
		    
		</div>
		<h3>偏移後</h3>
		<div class="layui-row ">
			<div class="layui-col-md4" style="background-color: #007DDB;">
			   4
			</div>
			<div class="layui-col-md4 layui-col-md-offset4 " style="background-color: #00FF00;" >
				4
			</div>
		    
		</div>
	</div>	

5.列巢狀

列之間可以無限巢狀列

div class="layui-container">
<h3>列巢狀</h3>
<div class="layui-row ">
<div class="layui-col-md6" style="background-color: #007DDB;">
<div class="layui-row">
<div class="layui-col-md5" style="background-color: #0000FF;"> 5/12 </div>
 <div class="layui-col-md5" style="background-color: #00F7DE;"> 5/12 </div>
<div class="layui-col-md2" style="background-color: firebrick;"> 2/12 </div>
</div>
</div>
</div>	
</div>