1 <!-- bootstrap将页面横向分成12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统： 2 1、col-lg- 大于1200排成一行，小于1200分别占一行 3 2、col-md- 大于992排成一行，小于992分别占一行 4 3、col-sm- 大于768排成一行，小于768分别占一行 5 4、col-xs 始终排成一行 --> 6 <!DOCTYPE html> 7 <html lang="en"> 8 <head> 9 <meta charset="UTF-8"> 10 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 11 <title>Document</title> 12 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 13 <script type="text/javascript" src="./js/bootstrap.min.js"></script> 14 <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> 15 <style type="text/css"> 16 div[class*='col-']{ 17 height: 50px; 18 background-color: gold; 19 border: 1px solid #000; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="container"> 25 <div class="row"> 26 <div class="col-lg-3">col-lg-3</div> 27 <div class="col-lg-4">col-lg-4</div> 28 <div class="col-lg-2">col-lg-2</div> 29 <div class="col-lg-3">col-lg-3</div> 30 </div> 31 32 <br> 33 <br> 34 <br> 35 <div class="row"> 36 <div class="col-md-4">col-md-4</div> 37 <div class="col-md-4">col-md-4</div> 38 <div class="col-md-4">col-md-4</div> 39 </div> 40 41 <br> 42 <br> 43 <br> 44 <div class="row"> 45 <div class="col-sm-3">col-sm-3</div> 46 <div class="col-sm-3">col-sm-3</div> 47 <div class="col-sm-3">col-sm-3</div> 48 <div class="col-sm-3">col-sm-3</div> 49 </div> 50 51 <br> 52 <br> 53 <br> 54 <div class="row"> 55 <div class="col-xs-5">col-xs-3</div> 56 <div class="col-xs-3">col-xs-3</div> 57 <div class="col-xs-2">col-xs-3</div> 58 <div class="col-xs-2">col-xs-3</div> 59 </div> 60 </div> 61 </body> 62 </html>