概念：

意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

响应式布局容器

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

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

平时我们的响应式尺寸划分

超小屏幕（手机，小于768px）：设置宽度为100%
小屏幕（平板，大于等于768px）：设置宽度为750px
中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
大屏幕（大屏幕显示器，大于等于1200px）：宽度设置为1170px

在里面添加8个小li之后顺便调整下width做下适配

大屏幕下

小屏幕下

以上是响应式最初级的应用

bootstrap使用

1.创建文件夹结构

文件架结构

2.创建html骨架结构

Bootstrap 天生就是移动设备优先的，依照这一策略，我们首先为移动设备优化代码，然后根据需要，基于 CSS 媒体查询来对组件进行缩小或放大。为了确保所有设备能够正确渲染和触摸缩放，请将响应式 viewport meta 标签添加到标签中。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。

3.引入相关样式文件

4.书写内容

bootstrap布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。适合于单独做移动开发。
为了增强跨浏览器表现的一致性，bootstap使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

栅格系统

栅格参数

实例：从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

效果图


  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1


  .col-md-8
  .col-md-4


  .col-md-4
  .col-md-4
  .col-md-4


  .col-md-6
  .col-md-6

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

嵌套列


  
    Level 1: .col-sm-9
    
      
        Level 2: .col-xs-8 .col-sm-6
      
      
        Level 2: .col-xs-4 .col-sm-6

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

列排序


  .col-md-9 .col-md-push-3
  .col-md-3 .col-md-pull-9

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

更多实例看bootstrap文档：https://v3.bootcss.com/css/#grid-example-basic

响应式工具

可见的类
通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

可见的类

其它工具请查看：https://v3.bootcss.com/css/#responsive-utilities

响应式布局

概念：