layui 響應式佈局 grid-demo grid-demo-bg1
阿新 • • 發佈：2022-05-27
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>LayUi框架學習</title> 8 <link href="./layui/css/layui.css" rel="stylesheet"> 9 <style> 10 .bg_green1{ 11 background-color: darkgreen; 12 } 13 .bg_green2{ 14 background-color: green; 15 } 16 .ht20{ 17 height: 50px; 18 text-align: center; 19 line-height: 50px; 20 border: 1px dashed; 21 color: white; 22 } 23 .bt{ 24 height: 30px; 25 line-height: 30px; 26 /* text-align: center; */ 27 background-color: #d8d8d8; 28 } 29 </style> 30 </head> 31 <body> 32 <script src="./layui/layui.js"></script> 33 34 <!-- 2st para begin --> 35 <div class="layui-container"> 36 <div class="layui-row layui-col-space5"> 37 <div class="layui-col-md5"> 38 <div class="layui-row grid-demo"> 39 <div class="layui-col-md3 bg_green1 ht20"> 40 內部列 41 </div> 42 <div class="layui-col-md9 bg_green2 ht20"> 43 內部列 44 </div> 45 <div class="layui-col-md12 bg_green1 ht20"> 46 內部列 47 </div> 48 </div> 49 </div> 50 <div class="layui-col-md7"> 51 <div class="layui-row grid-demo grid-demo-bg1"> 52 <div class="layui-col-md12 bg_green1 ht20"> 53 內部列 54 </div> 55 <div class="layui-col-md9 bg_green2 ht20"> 56 內部列 57 </div> 58 <div class="layui-col-md3 bg_green1 ht20"> 59 內部列 60 </div> 61 </div> 62 </div> 63 </div> 64 65 </div> 66 <!-- 2st para begin --> 67 </body> 68 </html>