Boostrap响应式开发和栅格系统

媒体查询
@media (条件判断) {
条件成立时执行的样式
}
如果判断有多个那么每个调减之间使用and链接
@media (条件1)and(条件2) {同时满足两个时执行的样式}
常见的条件判断:
width : 宽度等于某个值时
min-width : 宽度大于等于某个值时
max-width : 宽度小于等于某个值时

通过媒体查询判断大于768 那么就横向排列
@media (判断条件) { //min-width max-width width
元素样式}
屏幕的分类
　　超小屏幕 width < 768
　　小屏幕 width > 768 && width < 992
　　中屏幕 width < 992 && width < 1200
　　大屏幕 width > 1200

响应式开发原理
媒体查询里面是一个独立的css语法环境也就是说元素或者选择器以及样式一个都不少

/* 表示的是一个大于等于768的时候 横向导航生效 */
@media (min-768px) { 
ul{
flex-direction: row;
}
}
/* 表示 屏幕宽度小于768的时候 纵向导航生效 */
@media (max-768px) { 
ul{
flex-direction: column;
}
}
/* 的屏幕宽度等于768的时候 导航生效 */
@media (max-768px) { 
ul{
border-color: yellow;
}
}

响应式开发和原生移动端开发的区别

1.显示的和结构上

　　响应式开发不同屏幕的大小会显示不同的布局但是图片以及字体大小不会发生变化仅仅是布局

　　原生的移动端开发根据屏幕大小的不同对页面内容进行等比缩放

2.开发的页面不同

　　响应式开发开发的只是一个页面而且同时运行在移动端和pc端但是它根据不同的屏幕大小进行布局的调整展示对应端的也买年结构

　　移动端开发其实是开发两套页面分别针对移动端和PC端进行开发但在不同的端时往往在对应的页面

3.应用场景不同

　　响应式开发是使用一个页面适配多个终端开发效率高但是由于所有的代码都在一个页面会有冗余的现象

　　运行效率低一般只适用于单纯地展示和宣传的页面一般是公司官网活动页面

　　移动端针对每一个不同的端都要开发出一套页面开发维护效率低但是针对性强只需要对应端的页面代码运行效率高

一般适用于老的网站对于已经上线的老系统需要开发移动端就单独再写一套移动端代码而且还适用于对页面性能的要求很高的页面

栅格系统
栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。工作原理如下：

“行（row）”必须包含在.container （固定宽度）或.container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding 有15px的内边距，无论居中还是满屏的情况）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的mixin 也可以用来创建语义化的布局。
row一定要写在容器里面要不然会产生滚动条因为他设置了外边距来抵消容器的内边距如果不用容器包裹宽度就会超出去
其实容器原本是有15px的左右内边距在row里面设置宽度为auto 然后margin-left和margin-right给负值互相抵消了容器的边距
栅格系统中的列是通过指定1 到12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。

　　响应式栅格系统原理屏幕宽度分为12列
　　　　如果是1列布局那么就把12列合并也就是col-12
　　　　如果是2列布局那么就把6列合并也就是col-6
　　　　如果是3列布局那么就把4列合并也就是col-4
　　　　如果是4列布局那么就把3列合并也就是col-3
　　　　如果是6列布局那么就把2列合并也就是col-2
　　　　如果是12列布局那么就把1列合并也就是col-1

通过媒体查询加不同的前缀
超小 xs
小屏幕sm
中屏幕 md

列嵌套

<div class="container">       
        <div class="row">   
                <!-- 每行12列，每4列为1列的话，12/4=3  分成3列 -->
              <div class="col-md-4" style="border:1px solid;height: 200px;" ></div>
              <div class="col-md-4" style="border:1px solid;height: 200px;"  ></div>
              <div class="col-md-4" style="border:1px solid;height: 200px;"  ></div>
            
        </div>
    </div>

列偏移

<div class="container">       
        <div class="row">   
                <!-- 如果我只想显示2列中间的空着 -->
              <div class="col-md-4" style="border:1px solid;height: 200px;" ></div>
              <!-- col-md-offset-4          向右偏移4个列 -->
              <div class="col-md-4 col-md-offset-4" style="border:1px solid;height: 200px;"  ></div>
        </div>
    </div>

案列

需求：随着屏幕的大小进行依次排列

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 6     <title>bootstrap文档</title>
 7     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
 8     <script type="text/javascript" src="js/bootstrap.min.js"></script>
 9     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
10     <style type="text/css">        
11         /* div[class*='col-']{
12             background-color:gold;
13             border:1px solid #000;
14         } */
15         .box{
16             height:200px;
17             max-240px;
18             background-color:cyan;
19             border:1px solid #000;
20             margin:20px auto;
21         }    
22     </style>
23 </head>
24 <body>
25     <div class="container">
26         <div class="row">
27         <h2>栅格系统响应式</h2>
28         </div>
29     </div>
30 
31     <div class="container">        
32         <div class="row">
33             <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
34             <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
35             <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
36             <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
37         </div>        
38     </div>    
39 </body>
40 </html>

效果如下