目录

一、What?: Bootstrap是什么

二、Why?:用到它的原因

三、Where?:在哪里要用到它

四、环境安装

五、Bootstrap CSS

        1.H5文档类型

        2.移动设备优先

        3.布局容器

                1>固体容器【class=”container”】

                2>流体容器【class=”container-fluid”】

        4、栅格系统(Grid System)

                1>概念：

                2>交换位置：右移动：push  左移动：pull

一、What?: Bootstrap是什么

          Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。

二、Why?:用到它的原因

三、Where?:在哪里要用到它

四、环境安装

案例：在页面上创建一个Button,观察原生态的button和Bootstrap的button区别

五、Bootstrap CSS

        1.H5文档类型

        2.移动设备优先

        3.布局容器

                1>固体容器【class=”container”】

                2>流体容器【class=”container-fluid”】

        4、栅格系统(Grid System)

                1>概念：

                        栅格系统，可以理解为就是网格，格子

                        每行最多12个格子，如果想要再多可以使用栅格嵌套实现

                  ​​​​​​​案例1：演示Bootstrap网格系统

​​​​​​​                案例2：演示列偏移offset。

​​​​​​​​​​​​​​        ​​​​​​​        案例3：演示栅格系统嵌套(某列中嵌套栅格)

                ​​​​​​​2>交换位置：右移动：push  左移动：pull