响应式开发bootstrap

响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

平时我们响应式尺寸划分

• 超小屏幕（手机，小于768px）：设置宽度为100%
• 小屏幕（平板，大于等于768px）：设置宽度为750px
• 中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px
• 大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px

    .container {
        height: 150px;
        background-color: pink;
        margin: 0 auto;
    }
    /* 1. 超小屏幕下  小于 768  布局容器的宽度为 100% */
    @media screen and (max-width: 767px) {
        .container {
           width: 100%;
        }
    }
    /* 2. 小屏幕下  大于等于768  布局容器改为 750px */
    @media screen and (min-width: 768px) {
        .container {
           width: 750px;
        }
    }
    /* 3. 中等屏幕下 大于等于 992px   布局容器修改为 970px */
    @media screen and (min-width: 992px) {
        .container {
           width: 970px;
        }
    }
    /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
    @media screen and (min-width: 1200px) {
       .container {
           width: 1170px;
       }
    }    

 

容器布局

bootstrap需要为页面内容和栅格系统包裹一个.container，bootstrap预先定义好了这个类，叫.container它提供了两个做此用处的类。

1.container类

栅格选项参数