bootstrap的底层原理原来是.........

什么是响应式布局？
简单地说，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
在说到响应式，很多人会立刻想到：
Boilerplate，Foundation，Ulkit，bootstrap这些框架。

而以下，我将就Twitter推出的bootstrap为例，毕竟最火，使用的人也多。

类似bootstrap这类响应式框架其底层实现原理就是媒体查询，

（来自Bootstrap 核心 CSS 文件：https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css）
上述我并选择打开开发版，而是压缩版，是为了证明即使是压在了一起，仍是万码丛中一@，清晰可见。换成开发版：

在这简单的做个小实例：

当max-width:480px，即你屏幕缩到<=480px时,类名为ads的标签display：none。
是不是响应了呢？！

我们进入v3版本的bootstrap
（bootstrap：https://v3.bootcss.com/getting-started/）

Bootstrap 本着 移动设备优先 的策略开发的，按照这一策略，我们优先为移动设备优化代码，然后根据每个组件的情况并利用 CSS 媒体查询（CSS media queries）技术为组件设置合适的样式。所以下述标签，最好也务必放上

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为 最多12列

即：

注意
column必须在row里，row必须在.container的容器里
根据col-xx-？ 中的xx浏览器会根据判断是xs、sm、md、lg进行响应，所以需要加相对应的类名，才能实现我们的多分辨率屏响应。

    

        
.col-md-1
        
.col-md-1
        
.col-md-1
        
.col-md-1
        
.col-md-1
        
.col-md-1
        
.col-md-1
        
.col-md-1
        
.col-md-1
        
.col-md-1
        
.col-md-1
        
.col-md-1