就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的设备划分尺寸之间超小屏幕 （手机）<768px小屏设备（平板）>=768px —— 992px中等屏幕（桌面显示器）>=992px —— <1200px宽屏设备（大桌面显示器）>=1200px响应式需要一个父级做为布局容器，来配合自己元素来实现变化效果原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面和样式变化

 

　　平时的响应式尺寸划分

 

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

 

　　但是也可以根据实际情况自己定义划分

 

　　中文官网：

 

　　官方文档：

 

　　Bootstrap 使用四部曲

 

　　创建文件夹结构创建 html 骨架结构引入相关样式文件书写内容

 

　　创建 html 骨架结构

 

　　引入相关样式文件

 

　　书写内容

 

　　直接拿 Bootstrap 预先定义好的样式来使用修改 Bootstrap 原来的样式，注意权重问题学号 Bootstrap 的关键在于知道它定义了那些样式，以及这些样式能实现什么样的效果

 

　　示例图：

 

　　Bootstrap 需要为页面内容和栅（shan）格系统包裹一个 .container 容器，它提供了两个作此用处的类

 

　　container 类

 

　　响应式布局的容器 固定宽度大屏 （ >=1200px ）宽度定为 1170px中屏（ >=992px ）宽度定为 970px小屏（ >=768px ）宽度定为 750px超小屏（100%）

 

　　container-fluid 类

 

　　流式布局容器 百分比宽度占据全部视口 （ viewport ） 的容器适用于制作移动端页面开发栅格系统，也叫做 “网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 （ viewport ） 尺寸的增加，系统会自动分为最多 12 列

 

　　栅格选项参数

 

　　栅格系统用于通过一系列的行 （ row ） 与列 （ colimn ） 的组合来创建页面布局，那你的内容就可以放入这些创建好的布局中

 

　　超小屏幕（手机）

 

　　< 768px小屏设备（平板）

 

　　>=768px中等屏幕（桌面显示器）

 

　　>=992px宽屏设备（大桌面显示器）

 

　　>=1200px.container 最大宽度自动（100%）750px970px1170px类前缀。col-xs-.col-sm-.col-md-,col-lg-列 （ column） 数12121212按照不同屏幕划分为 1——12 等份行（row）可以去除父容器作用 15px 的边距xs-extra samll：超小；sm-small：小；md-medium：中等；lg-large：大；列（column）大于 12，多余的 " 列 （ column ）" 所在的元素将作为一个整体另起一行排列每一列默认有左右 15px 的 padding可以同时为一列指定多个设备的类名，以便划分不同份数，例如 class=“col-md-4 col-sm-6”

 

　　示例图：

 

　　列嵌套

 

　　栅格系统内置的栅格系统将内容再次嵌套，也就是一个列内在分成若干份小列，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内

 

　　示例图：

 

　　列偏移

 

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

 

　　示例图：

 

　　列排序

 

　　通过使用 .col-md-push-* 往右推和 .col-md-pull-* 往左拉两个类就可以容易的改变列 （ column ） 的顺序

 

　　示例图：

 

　　为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容类名超小屏幕（手机）

 

　　< 768px小屏设备（平板）

 

　　>=768px中等屏幕（桌面显示器）

 

　　>=992px宽屏设备（大桌面显示器）

 

　　>=1200px.hidden-xs隐藏可见可见可见。hidden-sm可见隐藏可见可见。hidden-md可见可见隐藏可见。hidden-lg可见可见可见隐藏与之相反的，。visible-xs-* ，。visible-sm-* ，。visible-md-* ，。visible-lg-* 是针对不同设备显示某个内容其他多看看官方文档