web开发之响应式布局

响应式开发

bootstrap前端开发框架

bootstrap栅格化系统

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、响应式开发

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

响应式开发原理

就是引用媒体查询针对不同宽度设备进行布局和样式设置，从而适配不同设备的目的
响应式需要一个父级作为布局容器，来配合子元素实现变化效果
原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同的屏幕下，看到不同的页面布局和样式变化

常见的响应式尺寸划分
超小屏幕（手机，小于780px）设置宽度为100%
小屏幕（平板 大于等于780px）设置宽度为750px
中等屏幕（桌面显示器 大于等于992px）宽度设置970px
大屏幕（大桌面显示 大于等于1200px） 宽度设置为1170px
  布局容器 宽度的大小 通过媒体布局改变

响应式标题栏做法

 - 当屏幕大于等于768px,我们给每个容器container宽度为750px
 - container里面包含8个li盒子，每个盒子的宽度大小定为93.75px(750/8),高度为30px，浮动一行显示
 - 当我们屏幕缩放时，宽度小于768px的时候，container盒子宽度修改为100%宽度
 - 此时里面的8个li,修改为宽度33.33%,这样一行就只能显示3个li ，剩下行显示
 
 

二、Bootstrap前端开发框架

1

• 优点 标准化的html和css编码规范
• 简洁 直观 强大的组件
• 有自己的生态图，不断的迭代
• 开发简单有效率

代码如下（示例）：

使用步骤

1. 创建文件夹
2. 创建html骨架结构
3. 引入先关样式文件
4. 书写内容

2.布局容器

代码如下（示例）：

bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstarp预先定义好这个类，叫做.container，它提供了两个作此作用的类

> 1、container类
 - 响应式布局的容器，固定宽度
 - 大屏（>=1200px）宽度定位1170px
 - 中屏（>=992px）宽度定义为970px
 - 小屏 （>=768px）宽度定义为750px
 - 超小屏（100%）
> 2、container-fuild类
     
 - 流式布局容器百分百宽度
 - 占据全部视口（viewport）的容器
 - 适用于单独做移动开发