Bootstrap学习笔记，1栅格系统
栅格系统：
.row 1行12列
.col-md-3 占3列，一行就是4个
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1">
6 <title>Document</title>
7 <link rel="stylesheet" href="../bs/css/bootstrap.css">
8 <link rel="stylesheet" href="../bs/css/bootstrap-theme.css">
9 <script src="..bs/js/jquery.js"></script>
10 <script src="..bs/js/bootstrap.js"></script>
11 <style>
12 .container{
13 background:green;
14 height:300px;
15 }
16 /*栅格必须放到container和row里面！*/
17 .row{
18 margin-bottom:15px;
19 }
20 </style>
21
22 </head>
23 <body>
24 <div class="container">
25 <h1>Bootstrap栅格</h1>
26 <div class="row">
27 <div class="col-md-3">
28 <img src="../image/1.jpg" alt="" width="100%">
29 </div>
30 <!-- col-md-fooset-3是偏移，如果同一行还有图片，就挤到下面了！ -->
31 <div class="col-md-3 col-md-offset-3">
32 <img src="../image/1.jpg" alt="" width="100%">
33 </div>
34 <div class="col-md-3">
35 <img src="../image/1.jpg" alt="" width="100%">
36 </div>
37
38 </div>
39 <div class="row">
40 <div class="col-md-3">
41 <img src="../image/1.jpg" alt="" width="100%">
42 </div>
43 <div class="col-md-3">
44 <img src="../image/1.jpg" alt="" width="100%">
45 </div>
46 <div class="col-md-3">
47 <img src="../image/1.jpg" alt="" width="100%">
48 </div>
49 <div class="col-md-3">
50 <img src="../image/1.jpg" alt="" width="100%">
51 </div>
52 </div>
53 <div class="row">
54 <div class="col-md-3">
55 <img src="../image/1.jpg" alt="" width="100%">
56 </div>
57 <div class="col-md-3">
58 <img src="../image/1.jpg" alt="" width="100%">
59 </div>
60 <div class="col-md-3">
61 <img src="../image/1.jpg" alt="" width="100%">
62 </div>
63 <div class="col-md-3">
64 <img src="../image/1.jpg" alt="" width="100%">
65 </div>
66 </div>
67 </div>
68 </body>
69 </html>- 上一篇 »【9】了解Bootstrap栅格系统基础案例，4
- 下一篇 »Bootstrap栅格系统
相关推荐
Bootstrap 栅格系统原理 对 float:left + left + right 三个基础样式的应用
w用，应用和活用的重要性。
时间：2023-11-08 13:12
