响应式布局+Bootstrap

**

1. 响应式开发原理

**

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

**

2.响应式布局容器

**

• 
  

3.Bootstrap简介

• 
  

​​https://bootstrap.css88.com/​​

• 
  

4.Bootstrap使用

• 
  

控制权在框架本身，使用者要按照框架所规定的某种规范进行开发

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

Bootstrap前端开发框架

布局容器：

使用时直接引入container或container-fluid的class标签

container自带左右15px的padding值，与子元素行添加row标签可以去除

container宽度最大为1170px，可以根据需求用媒体查询手动更改最大宽度

栅格系统

把container分为12等列

1.栅格系统的使用:

行row可以去除父容器作用的15px边距（padding）

2.列嵌套:

列嵌套时最好在每一层都加一个行（row），这样可以取消父元素的padding值，而且高度自动和父级一样高

3.列偏移：

通过添加标签（col-md-offset-偏移量）实现盒子在行上的向右偏移，可以实现盒子在行内居中

（加粗部分md可以换成xs，sm，lg，具体根据需要而定）

使一行内一侧偏移：

<div class="container">
  <div class="row">
       <div class="col-md-3">左侧</div>
       //右侧向右偏移6份
       <div class="col-md-3 col-md-offset=6">右侧</div>
   </div>
 </div>

效果如下

使单个盒子居中：

<div class="container">
  <div class="row">
       //一行共12份，自己占8分，则向右偏移2份(（12-8）/2)
       <div class="col-md-8 col-md-offset=2">右侧</div>
   </div>
 </div>

效果如下

4.列排序：

.col-md-push-* 类为向右推*个量

.col-md-pull-类表示向左拉个量

加粗部分md可以换成xs，sm，lg，具体根据需要而定

5.响应式工具