bootstrap响应式开发原理

1.响应式开发原理：中文官网（https://v3.bootcss.com/）

     就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的，bootstrap主要是通过类名改变样式 。

1.2响应式布局容器

（1）流体容器

（2）固定容器

阈值	width
>1200（lg 大屏pc）	width大小为1170（1140+槽宽）
992~1200（md 中型pc）	width为970（940+槽宽）
768~992（sm 小型pc）	width为750（720+槽宽）
< 768px（xs 移动端）	width为auto（100%）

---

2.栅格系统

    它是指将页面布局划分为等宽的列，然后通过定义的列数来模块化页面布局

系统会最多自动分为12列，bootstrap里面container宽度是固定的，但是在不同屏幕下。container的宽度不同

    我们再把container划分为12等份，行row必须放到container布局容器里面，我们实现列的平均划分，需要给列添加类前缀，

• xs-extra small:超小； sm-small：小；md-medium：中等；lg-large：大；
• 列column大于12，多余的列所在的元素将被作为一个整体另起一行排列
• 每一列默认有15像素的padding
• 可以同时为一列指定多个设备的类名，以便划分不同的份数，例如：claaa=“col-md-4 col-sm-6”

栅格源码分析

（1）. 流体容器和固定容器的公共样式

   { 
    margin-right:auto;

    margin-left:auto;

    padding-left:15px;

    padding-right:15px;
   }

（2）固定容器（媒体查询从小到大xm-sm-md-pc顺序不能乱写，因为每个都会被使用）

@media(min-width:@screen-sm-min){

width:@container-sm;

}

@media(min-width:@screen-md-min){

width:@container-md;

}

@media(min-width:@screen-lg-min){

width:@container-lg;

}

（3）列嵌套最好加一个row，这样可以取消父元素的padding值而且宽度和父级一样高

    列偏移：使用.col-md-offset-类可以将列向右偏移，这些类实际是通过 * 选择器为当前元素增加了左侧的边距

    列排序：.col-md-push-（向右）和.col-md-pull-（向左）类就可以很容易的改变列的顺序

（4）响应式工具

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏