Bootstrap学习笔记，2--栅格系统深入学习

2024-04-27 12:53•mysql•阅读 1757

 1 <!DOCTYPE html>
 2 <html >
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="css/bootstrap.css"/>
 7     <script src="js/jquery.js"></script>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         .row,.row div{
14             border: 1px solid #000;
15         }
16         img{
17             /*width: 50%;
18             height: 50%;*/
19             /*width: 100px;
20             height: 200px;*/
21         }
22     </style>
23 </head>
24 <body>
25     <div class="container">
26         <!-- container-fluid类好像是浮动的 -->
27         <div class="row">
28             <!-- 现有container类，下面是row类，里面是col-xs-4类，根据屏幕大小分成4种，如果都写上，就会自动识别屏幕，采取相应的栏数；只写一个就默认都是用这个栏数。col-lg-4-offset-4是自己向后挪4栏，学名“列偏移” -->
29             <div class="col-xs-4 col-xs-offset-4"><img src="1.jpg" alt=""></div>
30             <div class="col-xs-4"><img src="2.jpg" alt=""></div>
31             <div class="col-xs-4 col-lg-3"><img src="3.jpg" alt=""></div>
32         </div>
33         <!-- <div class="row">
34             <div class="col-xs-4"><img src="1.jpg" alt=""></div>
35             <div class="col-xs-4"><img src="1.jpg" alt=""></div>
36             <div class="row">
37                 <div class="col-lg-2"><img src="2.jpg" alt=""></div>
38                 <div class="col-lg-2"><img src="2.jpg" alt=""></div>
39                 <div class="col-lg-2"><img src="2.jpg" alt=""></div>
40                 <div class="col-lg-2"><img src="2.jpg" alt=""></div>
41             </div>
42         </div> -->
43         <div class="row">
44             <div class="col-xs-4">php is very much!</div>
45             <div class="col-xs-4">php is very much!</div>
46             <div class="col-xs-4">php is very much!</div>
47         </div>
48     </div>
49 </body>
50 <script>
51 </script>
52 </html>