[JavaScript知识库]寒假第五周周报--响应式开发里的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/

复习高数和大英