Bootstrap

1 自适应的页面（响应式页面）

         在不同的屏幕上（电脑、平板、手机），可以自动根据屏幕的大小来调整页面，不用再专门为不同屏幕设计。
2 使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。

    //1 兼容移动设备
        //device-width：当前设备的宽度 
        //initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）
        //user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    //2 加载兼容文件js（IE8既不支持HTML5也不支持CSS3 @media ）
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    //3 设置IE渲染方式默认为最高(可选)
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    //4 @media
    @media mediaType and|not|only (media feature) {
         /*CSS-Code;*/
    }
        //媒体类型（mediaType ）
            all 用于所有设备 
            print 用于打印机和打印预览 
            screen 用于电脑屏幕，平板电脑，智能手机等。（最常用） 
            speech 应用于屏幕阅读器等发声设备 
        媒体功能（media feature)
            max-width:定义输出设备中的页面最大可见区域宽度 
            min-width:定义输出设备中的页面最小可见区域宽度
3  布局容器
    //Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
        //container 类用于固定宽度并支持响应式布局的容器。
            <div class="container">
              ...
            </div>
        //.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
            <div class="container-fluid">
              ...
            </div>
4 栅格系统
    //栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局