Bootstrap

1、概念:

Bootstrap 是前端UI响应式框架。

响应式： 屏幕尺寸的变化，让页面有不同的布局版本效果。

界面跟随屏幕尺寸变化而变化（就是有不同的版本效果），我们叫做响应式。

分为:大屏幕版本 中等屏幕版本 小屏幕版本 特小屏幕版本

2、PC端布局（通栏|版心）

京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！

3、移动端布局（百分比布局|流式布局）

在不同的设备屏幕下，有着相同的版本效果。

淘宝

手机搜狐网

4、Bootstrap 作用

4.1、提高开发响应式项目的开发效率

4.2、提供了大量精美的组件

5、Bootstrap怎么使用

5.1、下载bootstrap相关的文件(就是把css和js引入项目)

5.2、 看文档复制组件的html代码、修改代码

5.3、 栅格系统、布局内容(表格)、组件、工具类（全局样式）

栅格系统（行和列的布局方式）

Extra small （特小）

Small (小 sm) ≥576px

Medium (中等 md) ≥768px

Large (大 lg) ≥992px

Extra large (特大 xl) ≥1200px

6、响应式原理(媒体查询)

@media (max-width: 576px) {
     body {
                 background-color: red;
      }
}


/* max-width   <= 575px  最大宽度*/
/* min-width   >= 576px  最小宽度*/

/* 特小屏幕下 页面背景红色 */
@media (max-width: 575px) {
    body {
        background-color: red;
    }
    .title-1 {
        display: block;
    }
}

/* 小屏幕 (大于等于576px  小于等于 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    body {
        background-color: blue;
    }
    .title-2 {
        display: block;
    }
}

/* 中等屏幕 (大于等于768px  小于等于 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    body {
        background-color: green;
    }
    .title-3 {
        display: block;
    }
}

/* 大等屏幕 (大于等于992px  小于等于1199px) */
@media (min-width:992px) and (max-width: 1199px) {
    body {
        background-color: deepskyblue;
    }
    .title-4 {
        display: block;
    }
}


/* 特大等屏幕 (大于等于1200px) */
@media (min-width:1200px) {
    body {
        background-color: pink;
    }
    .title-5 {
        display: block;
    }
}