浅谈响应式布局+bootstrap框架

1.整体来讲通过媒体查询 根据不同的屏幕大小 通过对版心大小的控制来实现不同屏幕的适配。

这是例子 ，基本通过这个原理，但是需要适应这个屏幕需要写多个媒体查询 非常浪费时间，影响我们的开发效率，那么这个时候我们可以引入 bootsrap框架。

.container{
    height:1000px
    width:1200px;
    margin:0 auto;
}

@media screen and (max-width:768px){

.container{
    width:100%;
    }
}

2.如何引入bootstrap框架，这个框架是Twitter写的，也是目前很受欢迎的前段框架，它是基于HTML CSS JavaScript 的，目前发布了 2.xx  3.xx 4xx，这几个版本，那么我们目前使用最多的是3的版本，2版本已经停止更新，4版本是目前最新的。

那么我们怎么引入这个框架呢， 去它的官网把这个框架下载下来。然后通过官网示例的link方式引入即可。

3.引入之后如何使用，官网有个CSS样式 这个类似我们的用户手册，里面的类名我们可以直接进行调用。

 

    4.bootstrap中的栅格系统的使用。

                             

5. 栅格嵌套-列嵌套

• 栅格系统内置的栅格系统将内容再次嵌套

• 简单理解就是一个列内再分成若干份小列

• 我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内

• 也就是将一个row+col添加到一个col中

嵌套效果如下：

 

嵌套语法如下：

                <!-- 列嵌套 -->
 <div class="col-sm-4">
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

6.列偏移

• 使用 .col-md-offset-* 类可以将列向右侧偏移。

• 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

                      7.根据不同屏幕尺寸实现 隐藏和显示