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>