知识笔记| Bootstrap—响应式布局

Bootstrap—响应式布局，一个页面适应所有

响应式开发原理

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

设备划分	尺寸区间	设置宽度	列前缀
超小屏幕（手机）	<768px	100%	.col-xs-
小屏设备（平板）	>=768px ~ < 992px	750px	.col-sm-
中等屏幕（桌面）	>=992px ~ < 1200px	970px	.col-md-
宽屏设备（大桌面）	>=1200px	1170px	.col-lg-3

响应式需要一个父级作为布局容器，来配合自己元素来实现变化效果，原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排布方式和大小，从而实现在不同页面看到不同的页面布局和样式变化

@media screen and (max-width:767px) {//小屏设备下的布局为100%
            .container {
                width: 100%;
            }
        }

@media screen and (min-width:768px) {//中屏设备下的
            .container {
                width: 750px;
            }
        }

Bootstarp前端开发框架—基于HTML、CSS、JS的，简洁灵活，使得WEB开发更加快捷

• 框架：一套架构，完整网页功能解决方案，有预制样式库，组件和插件

• 优点：标准化的编码规范，提供了一套简介直观强悍的组件，不断更新迭代，提高了开发效率

• 四部曲：1、创建文件夹结构2、html骨架3、引入相关文件样式4、书写内容

• 是通过类名直接进行使用，如果要增加自己样式，就是用style直接进行适当修改

  container-fluid类流式布局容器，百分百宽度，单独做移动开发

栅格系统

• 将页面布局划分为等宽的列，通过列数的定义来模块化页面布局，系统统一划分12列

• 现有行再有列,列的具体划分需要加入列前缀，.col-lg-3（12份中每一列占几等份）

  • 列份数相加应该等于12.列刚好等于12则占满整个container，如果不够则会有空白，如果列份数相加超过了12，多余的那一列会另起一行显示
  • 也可以给同时加“class= col-lg-3 col-md-4”

• 在每一列都有左右15px的padding值，原理是给了33.3%宽度距离进行了左浮动，如果直接给这个＋margin边框就会存在溢出掉下来，我们就要在列中再增加一个盒子然后设置它的padding

• 列嵌套问题

  • 直接在列中放入两个盒子就存在不能顶格显示的问题
  • 如果我们给列之前再加一个行row的盒子就可以取消父元素的padding，而且高度会自觉和父高度一样

• 列偏移问题

  • 为了实现里面内容可以左右分别分布，将右边盒子进行右偏移，就可以把空白部分的内容放在中间显示出来

  • col-md-offset-4来实现右侧偏移，左盒子加了margin值

• 列排序问题

  • col-lg-push-8 右边盒子推过来 col-lg-pull-4 左边盒子拉过来

• 列隐藏显示问题

  • hidden-xs/sm/md/lg 不同情况下可以进行内容的隐藏
  • visible-xs/sm/md/lg 不同情况下进行内容的显示