初识bootstrap

      **bootstrap**是一中很受欢迎的前端框架，它能非常快速的帮助前端工程师们开发响应式布局（随着屏幕大小来变化的布局）网页。
      引用框架方式：去bootstrap中文网下载后，可在下面HTML引用声明
一行是用来引用js文件来声明文件识别H5标签的
一行是用来媒体查询功能的。
重要：需要引入 bootstrap文件<link rel="stylesheet"  href="路径">
      bootstrap框架-栅格系统： 
      container 系统开发必须用的盒子 一般用于固定宽度的容器；
      代码：<div class="container"></div>
      container-flu  系统开发必须用的盒子 一般用于全屏幕的容器;
     代码： <div class="container"></div>
     栅格系统container：
     盒子被分为固定12等分，会有15px左右边距需要注意！里面的布局由行（row）和列（col-xx-xx）来完成。
     （col-xx-xx）：col-lg-x,col-md-x,col-sm-x,col-xs-x; 列的四个盒子
     col-lg-x：超大盒子lg超大屏幕下（>=1200px显示1170px）
     col-md-x：中等盒子md中等屏幕下（>=992px显示970px）
     col-sm：小盒子sm小屏幕下（>=768px显示750px）
     col-xs-x：最小屏幕下（<768px显示100%）
     平分布局：
     <div class="container">
                  <div class="row">
                  12等份的盒子分给三个盒子每个盒子4份(12/3)
                          <div class="col-md-4"></div>
                          <div class="col-md-4"></div>
                          <div class="col-md-4"></div>

左右布局：

12等份的盒子分给两个盒子一个盒子4份一个盒子8份(12=4+8)

列嵌套（中间盒子又分两个盒子）： 加一个行盒子，会清除父盒子的padding值，还可以和父盒子等高

列偏移：col-（xx）-offset 案例1: 两个盒子一个靠左 ，一个靠右

                          <div class="col-md-4">左边</div>
                    给右边盒子一个偏移 偏移距离是=12-（左+右）=4
                          <div class="col-md-4 col-md-offset ">右边</div>

案例2：一个盒子居中

给盒子一个偏移 偏移距离是=(12-8)/2=4 这样就居中了

中间