第四十三节 jQuery之bootstrap栅格系统

 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>
原文地址：https://www.cnblogs.com/kogmaw/p/12506440.html