首页 > 代码库 > bootstrap- 网格系统

bootstrap- 网格系统

2024-10-01 02:54:02   216人阅读

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="css/bootstrap.min.css">
 7     <style>
 8     
 9     </style>
10     <script src=‘script/jquery-1.7.2.min.js‘></script>
11     <script src=‘script/bootstrap.min.js‘></script>
12 </head>
13 <body>
14     <!--
15         网格系统（Grid System）。
16             Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
17         
18         媒体查询:
19             媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
20         
21             //超小设备（手机 小于768px） bootstrap中默认情况下没有媒体查询
22 
23     -->
24            <style>
25             /*小型设备（平板电脑，768以上）*/
26             @media (min-width: @screen-sm-min) {}
27             /*中型设备（台式电脑，992px起）*/
28             @media (min-width: @screen-md-min){}
29             /*大型设备 （大台式电脑 1200起）*/
30             @media (min-width: @screen-lg-min) {}
31 
32             /*媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。*/
33             @media (max-width: @screen-xs-max){}
34             /*对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。*/
35             @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max){}
36             @media (min-width: @screen-md-min) and (max-width: @screen-md-max){}
37             @media (min-width: @screen-lg-min){}
38            </style>
39            /*网格系统一般的结构 */
40         <div class="container">
41             <div class="row">
42                 <!---在小型设备上 分 2-9 在中等设备上 分6-6 在大型设备上 分4-8-->
43                    <div class="col-sm-3 col-md-6 col-lg-4">....</div>
44                 <div class="col-sm-9 col-md-6 col-lg-8">....</div>
45             </div>
46         </div>
47         /*偏移列*/ 
48              .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
49 
50              eg: <div class="col-md-6  col-md-offset-3">..</div>
51                  我们将使用 .col-md-offset-3 class 来居中这个 div。因为col-md-6是12中的一半，要居中的话，移动它占的6个列，然后再移动它的一半列 col-md-offset-* = 6-(6/2)
52 
53 
54          /*列排序*/
55              地以一种顺序编写列，然后以另一种顺序显示列。
56             您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。
57     
58 </body>
59 </html>

 

 

技术分享

 

 

技术分享

 

技术分享

 

bootstrap- 网格系统


联系
我们