寒假第五周周报--响应式开发里的Bootstrap框架和栅格系统

响应式开发：

    响应式开发里面 首先需要一个布局容器

        常用宽度划分：

            超小屏幕下 小于768 布局容器的宽度为100%

            小屏幕下 大于等于768 布局容器改为750px

            中等屏幕下 大于等于992px 布局容器修改为970px

            大屏幕下 大于等于1200px 布局容器修改为1170px

        但是实际也可根据需求自己定义

    快速开发：

        Bootstrap前端开发框架：

            可以根据自己的需求修改Bootstrap的样式

            栅格系统：

                12份

                如果它们份数相加等于12 则它们能占满整个的container的宽度

                如果它们份数相加小于12 则占不满整个container的宽度 会有空白

                如果它们份数相加大于12 则多于的那一列会另起一行显示

                我们列嵌套最好加一个行 row 这样可以去掉我们父元素的padding值 并且高度自动和父级一样高

                偏移的份数就是12-两个盒子的份数

                如果只有一个盒子那么就偏移(12-该盒子所占份数)/2

                列排序：把左侧盒子往右边推push 把右侧盒子往左边拉pull

                响应式工具：

                    显示和隐藏的类  //eg:<div class="col-xs-3 hidden-md hidden-xs">隐藏</div>

                                   //eg:<span class="visible-lg">显示</span>

        Bootstrap中文网：https://www.bootcss.com/

复习高数和大英