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>