第四十四节 jQuery之bootstrap栅格响应式布局 

 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>

 

posted @ 2020-03-16 20:46  kog_maw  阅读(138)  评论(0)    收藏  举报