1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <link rel="stylesheet" href="css/bootstrap.css"/>
7 <script src="js/jquery.js"></script>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 .row,.row div{
14 border: 1px solid #000;
15 }
16 img{
17 /* 50%;
18 height: 50%;*/
19 /* 100px;
20 height: 200px;*/
21 }
22 </style>
23 </head>
24 <body>
25 <div class="container">
26 <!-- container-fluid类好像是浮动的 -->
27 <div class="row">
28 <!-- 现有container类，下面是row类，里面是col-xs-4类，根据屏幕大小分成4种，如果都写上，就会自动识别屏幕，采取相应的栏数；只写一个就默认都是用这个栏数。col-lg-4-offset-4是自己向后挪4栏，学名“列偏移” -->
29 <div class="col-xs-4 col-xs-offset-4"><img src="1.jpg" alt=""></div>
30 <div class="col-xs-4"><img src="2.jpg" alt=""></div>
31 <div class="col-xs-4 col-lg-3"><img src="3.jpg" alt=""></div>
32 </div>
33 <!-- <div class="row">
34 <div class="col-xs-4"><img src="1.jpg" alt=""></div>
35 <div class="col-xs-4"><img src="1.jpg" alt=""></div>
36 <div class="row">
37 <div class="col-lg-2"><img src="2.jpg" alt=""></div>
38 <div class="col-lg-2"><img src="2.jpg" alt=""></div>
39 <div class="col-lg-2"><img src="2.jpg" alt=""></div>
40 <div class="col-lg-2"><img src="2.jpg" alt=""></div>
41 </div>
42 </div> -->
43 <div class="row">
44 <div class="col-xs-4">php is very much!</div>
45 <div class="col-xs-4">php is very much!</div>
46 <div class="col-xs-4">php is very much!</div>
47 </div>
48 </div>
49 </body>
50 <script>
51 </script>
52 </html>
