1.0 响应式开发的原则 1.1 响应式开发的原则

就是利用媒体查询为不同宽度的设备设置布局和样式，以适应不同设备的用途。

设备划分：

1.2 响应式布局容器

响应式需要一个父级作为布局容器配合子元素实现变化效果。

其原理是在不同屏幕下通过媒体查询改变布局容器的大小，进而改变里面子元素的排列和大小，从而实现不同屏幕下不同的页面布局和样式变化。

父容器核心的大小划分

但是我们也可以根据实际情况来定义划分

2.0 Bootstrap 介绍 2.1 Bootstrap 介绍

Bootstrap来自推特（Twitter），是目前最流行的前端框架。 Bootstrap 基于 HTML、CSS 和 JAVASCRIPT。 它简单灵活，使Web开发速度更快。

中文网官网推荐网站

Framework：顾名思义就是一套架构，有一套比较完善的网页功能解决方案，控件在框架本身，预制了样式库、组件和插件。 用户应按照框架规定的一定规范进行开发。

2.2 bootstrap版本的优势 2.3 简介

2.xx：停止维护，兼容性好前端响应式开发，代码不够简洁，功能不够完善。

3.xx：目前使用最多且稳定，但IE6-IE7弃用。 支持IE8但界面效果不佳，偏向于开发响应式布局和移动设备优先的WEB项目。

4.xx：最新版本前端响应式开发，还不是很流行

2.4 bootstrap的基本使用

现阶段我们还没有接触过JS相关的课程，所以只考虑使用它的样式库。

Bootstrap 使用四个步骤：

创建文件夹结构 创建html骨架结构

  
    
    
    
    
    
​
    
    
​
    
    
    
      
    

  
    
你好，世界！
​
    
    
    
    
  

导入相关样式文件

写作内容

直接使用 Bootstrap 的预定义样式

修改Bootstrap原有样式，注意权重问题

学好Bootstrap的关键是要知道它定义了哪些样式，这些样式可以达到什么效果

2.5 引导布局容器

Bootstrap 需要为页面内容和网格系统包装一个 .container 或 .container-fluid 容器，它为此提供了两个类。

。容器

.容器流体

2.6 引导网格系统

Bootstrap 提供了一个响应式、移动优先的流体网格系统，随着屏幕或视口尺寸的增加，它会自动分成多达 12 列。

网格系统用于通过一系列行和列创建页面布局，您的内容可以放置在这些创建的布局中。

网格嵌套

网格系统内置的网格系统再次嵌套内容。 简单理解就是一个列被分成若干个小列。 为此，我们向现有的 .col-sm-* 元素添加一个新的 .row 元素和一系列 .col-sm-* 元素。

 

    

         
小列
         
小列
    

列偏移

列可以使用 .col-md-offset-* 类向右偏移。 这些类实际上通过使用 * 选择器为当前元素添加了左边距。

 
  

      
1
      
2
  

列排序

使用 .col-md-push-* 和 .col-md-pull-* 类可以轻松更改列的顺序。

 
  

      
左侧
      
右侧
  
​

响应工具

为了加快移动友好页面的开发，使用媒体查询功能并使用这些工具可以轻松地为不同设备显示或隐藏页面内容

作者：青出于兰
链接：移动端WEB开发之响应式布局 - 清出于兰 - 博客园
来源：博客园