1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <title>Document</title> 7 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 8 <script type="text/javascript" src="./js/bootstrap.min.js"></script> 9 <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> 10 <style type="text/css"> 11 div[class*='col-']{ 12 /*height: 50px;*/ 13 /* background-color: gold; 14 border: 1px solid #000;*/ 15 } 16 .box{ 17 height: 200px; 18 max-width: 240px; 19 background-color: cyan; 20 border: 1px solid #000; 21 margin: 20px auto 0; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="container"> 27 <div class="row"> 28 <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div> 29 <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div> 30 <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div> 31 <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div> 32 </div> 33 </div> 34 </body> 35 </html>
第四十四节 jQuery之bootstrap栅格响应式布局
猜你喜欢
转载自www.cnblogs.com/kogmaw/p/12506446.html
今日推荐
周排行