1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
7 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
8 <style type="text/css">
9 a{
10 display: block;
11 text-align: center;
12 color: gray;
13 }
14 </style>
15
16 <!-- 需求；
17 1.将Bootstrap的缩略图在md屏幕中，第一个往下一行
18 2.他们往下一行的顺序Bootstrap，yaum,react,webpack
19 -->
20
21 <!-- 再结构上，最后一个是会下去，若要在第一个下去，则需要设置偏移量lefe right
22 col-lg-push-9,在大屏状态下，right偏移9个
23 -->
24 </head>
25 <body>
26 <div class="container">
27 <div class="jumbotron">
28 <h1>Hello, world!</h1>
29 </div>
30 <div class="row">
31 <div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6">
32 <div class="thumbnail">
33 <img src="img/webpack.png" alt="...">
34 <div class="caption">
35 <h3 class="text-center">Bootstrap 编码规范</h3>
36 <a href="javascript:;" class="text-center">by @mdo</a>
37 <p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
38 </div>
39 </div>
40 </div>
41
42 <div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6">
43 <div class="thumbnail">
44 <img src="img/react.png" alt="...">
45 <div class="caption">
46 <h3>Bootstrap 编码规范</h3>
47 <a href="javascript:;" class="text-center">by @mdo</a>
48 <p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
49 </div>
50 </div>
51 </div>
52
53 <div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6">
54 <div class="thumbnail">
55 <img src="img/yarn.png" alt="...">
56 <div class="caption">
57 <h3>Bootstrap 编码规范</h3>
58 <a href="javascript:;" class="text-center">by @mdo</a>
59 <p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
60 </div>
61 </div>
62 </div>
63
64 <div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6">
65 <div class="thumbnail">
66 <img src="img/bootstrap.png" alt="...">
67 <div class="caption">
68 <h3>Bootstrap 编码规范</h3>
69 <a href="javascript:;" class="text-center">by @mdo</a>
70 <p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
71 </div>
72 </div>
73 </div>
74 </div>
75 </div>
76 </body>
77 <script src="js/jquery.min.js"></script>
78 <script src="js/bootstrap.min.js"></script>
79 </html>
