Jacklovely

导航

 

栅格系统:

.row 1行12列

.col-md-3 占3列,一行就是4个

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1">
 6     <title>Document</title>
 7     <link rel="stylesheet" href="../bs/css/bootstrap.css">
 8     <link rel="stylesheet" href="../bs/css/bootstrap-theme.css">
 9     <script src="..bs/js/jquery.js"></script>
10     <script src="..bs/js/bootstrap.js"></script>
11     <style>
12         .container{
13             background:green;
14             height:300px;
15         }
16         /*栅格必须放到container和row里面!*/
17         .row{
18             margin-bottom:15px;
19         }
20     </style>
21     
22 </head>
23 <body>
24     <div class="container">
25         <h1>Bootstrap栅格</h1>
26         <div class="row">
27             <div class="col-md-3">
28                 <img src="../image/1.jpg" alt="" width="100%">
29             </div>
30             <!-- col-md-fooset-3是偏移,如果同一行还有图片,就挤到下面了! -->
31             <div class="col-md-3 col-md-offset-3">
32                 <img src="../image/1.jpg" alt="" width="100%">
33             </div>
34             <div class="col-md-3">
35                 <img src="../image/1.jpg" alt="" width="100%">
36             </div>
37             
38         </div>
39         <div class="row">
40             <div class="col-md-3">
41                 <img src="../image/1.jpg" alt="" width="100%">
42             </div>
43             <div class="col-md-3">
44                 <img src="../image/1.jpg" alt="" width="100%">
45             </div>
46             <div class="col-md-3">
47                 <img src="../image/1.jpg" alt="" width="100%">
48             </div>
49             <div class="col-md-3">
50                 <img src="../image/1.jpg" alt="" width="100%">
51             </div>
52         </div>
53         <div class="row">
54             <div class="col-md-3">
55                 <img src="../image/1.jpg" alt="" width="100%">
56             </div>
57             <div class="col-md-3">
58                 <img src="../image/1.jpg" alt="" width="100%">
59             </div>
60             <div class="col-md-3">
61                 <img src="../image/1.jpg" alt="" width="100%">
62             </div>
63             <div class="col-md-3">
64                 <img src="../image/1.jpg" alt="" width="100%">
65             </div>
66         </div>
67     </div>
68 </body>
69 </html>

 

posted on 2016-11-29 17:16  Jacklovely  阅读(354)  评论(0编辑  收藏  举报