栅格系统pull和push的应用 

 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>

 

posted @ 2020-05-29 15:05  全情海洋  阅读(538)  评论(0)    收藏  举报