bootstrap--容器、栅格系统

bootstrap

简单、直观、强悍的前端开发框架，让web开发更迅速、简单。 来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。 移动优先，响应式布局开发。

bootstrap中文网址：http://www.bootcss.com/

bootstrap 容器

  • container-fluid 流体
  • container
    • 1170
    • 970
    • 750
    • 100%

bootstrap 栅格系统

bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

1、col-lg-
2、col-md-
3、col-sm-
4、col-xs-

bootstrap响应式查询区间：

1、大于等于768
2、大于等于992
3、大于等于1200 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap 基本文档结构</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14 
15 </head>
16 <body>
17     bootstrap 基本文档结构
18 </body>
19 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap 容器</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14 </head>
15 <body>
16     <div class="container" style="background:gold;">固定宽度的容器</div>
17     <br>
18     <br>
19     <div class="container-fluid" style="background:gold;">流体布局的容器</div>
20 
21 </body>
22 </html>

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap 栅格系统</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14     <style type="text/css">
15         div[class*='col-']{      /*包含'col-'的class*/
16             height:50px;
17             border:1px solid #000;
18             background-color:gold;
19         }
20     </style>
21 
22 </head>
23 <body>
24     <!--bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类-->
25     <div class="container">
26         <div class="row">       <!--col-lg- 页面宽度小于1200单独变成一行-->
27             <div class="col-lg-3">col-lg-3</div>
28             <div class="col-lg-3">col-lg-3</div>
29             <div class="col-lg-3">col-lg-3</div>
30             <div class="col-lg-3">col-lg-3</div>
31         </div>
32         <br>
33         <div class="row">      <!--col-md- 页面宽度小于992单独变成一行-->
34             <div class="col-md-4">col-md-4</div>
35             <div class="col-md-4">col-md-4</div>
36             <div class="col-md-4">col-md-4</div>
37         </div>
38         <br>
39         <div class="row">      <!--col-sm- 页面宽度小于768单独变成一行-->
40             <div class="col-sm-2">col-sm-2</div>
41             <div class="col-sm-4">col-sm-4</div>
42             <div class="col-sm-6">col-sm-6</div>
43         </div>
44         <br>
45         <div class="row">    <!--col-xs- 一直是一行不会变-->
46             <div class="col-xs-1">col-xs-1</div>
47             <div class="col-xs-4">col-xs-4</div>
48             <div class="col-xs-7">col-xs-7</div>
49         </div>
50     </div>
51 
52 
53 </body>
54 </html>

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap 栅格系统</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14     <style type="text/css">
15         .pic{
16             height:200px;
17             max-width:200px;  //.pic最大宽度为200px;
18             background-color:gold;
19             border:1px solid #000;
20             margin:15px auto;  //相对于父元素居中
21         }
22 
23         div[class*='col-']{
24             background-color:cyan;
25         }
26 
27     </style>
28 
29 </head>
30 <body>
31     <div class="container">
32         <div class="row">      <!--col-lg-3 col-md-4 col-sm-6结合使用，随屏幕宽度1200，992，768变化而变化-->
33             <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
34             <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
35             <div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
36             <div class="col-lg-3 col-md-4 col-sm-6" ><div class="pic"></div></div>
37         </div>
38     </div>
39 </body>
40 </html>

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap 栅格系统-嵌套</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14     <style type="text/css">
15         div[class*='col']{
16             background-color:gold;
17             border:1px solid #000;
18             height:60px;
19         }
20 
21     </style>
22 
23 </head>
24 <body>
25     <div class="container">
26         <div class="row">
27             <div class="col-lg-4">  <!--栅格嵌套-->
28                 <div class="row">
29                     <div class="col-md-3">01</div>
30                     <div class="col-md-3">02</div>
31                     <div class="col-md-3">03</div>
32                     <div class="col-md-3">04</div>
33                 </div>
34             </div>
35             <div class="col-lg-4">2</div>
36             <div class="col-lg-4">3</div>
37         </div>
38     </div>
39 </body>
40 </html>

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap 栅格系统-偏移</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14     <style type="text/css">
15         div[class*='col-']{
16             background-color:gold;
17             border:1px solid #000;
18             height:60px;
19         }
20         .row{
21             background-color:cyan;
22         }
23 
24     </style>
25 
26 </head>
27 <body>
28     <div class="container">
29         <div class="row">     <!--col-lg-offset偏移-->
30             <div class="col-lg-2 col-md-3"></div>
31             <div class="col-lg-2 col-md-3 col-lg-offset-2 col-md-offset-1"></div>
32             <div class="col-lg-2 col-md-3 col-lg-offset-4 col-md-offset-2"></div>
33         </div>
34     </div>
35 </body>
36 </html>

posted on 2020-01-03 20:42  cherry_ning  阅读(191)  评论(0)    收藏  举报

导航