bootstrap概览

bootstrap

响应式布局开发原理：根据媒体查询针对不同宽度的设备进行布局
和样式的设置，从而适配不同的设备。
设备划分 超小屏幕 <768px 设置100%
小屏幕 >=768px ~ <992px 设置750px
中等屏幕（桌面显示器） >=992px ~ <1200px 设置970px
超大屏幕 >=1200px 设置1170px

    .container{
      height:150px;
      background-color:pink;
      margin:0 auto;
    }
    /* 超小屏幕 */
    @media screen and (max-width:767px){
      .container{
        width:100%;
      }
    }
    /*  */
    @media screen and (min-width:768px){
      .container{
        width:750px;
      }
    }
    /* 中等屏幕 */
    @media screen and (min-width:992px){
      .container{
        width:970px;
      }
    }
    /* 大屏幕 */
    @media screen and (min-width:1200px){
      .container{
        width:1170px;
      }
    }

bootstrap简介

标准化的html+css编码规范
简洁、直观、强悍组件
  2.x.x:已停止维护，兼容性好，代码不够简洁，功能不完善。
  3.x.x:目前使用最多，稳定，不兼容IE6-IE7，对IE8支持，可界面效果不好，
  偏向于响应式布局、移动设备优先的web项目。
  4.x.x:未普及，使用不够广泛。
学习链接：http://bootstrap.css88.com
基础模板

    <!-- 要求当前网页使用IE浏览器最高版本内核进行页面渲染 -->
    <meta http-equiv='X-UA-Compatible' content='IE=edge' >
    <!-- 视口的设置：视口的宽度与设备一致，默认的缩放比例与pc端
    一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <!--[if lt IE 9]>
      解决ie9以下浏览器不识别html5新标签，并导致css失效的问题
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      解决ie9一下浏览器对css media query不识别的问题
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式 -->
    <link href='/css/bootstrap.min.css' rel="stylesheet" >

响应式开发

1.布局容器 container类
  响应式布局的容器，固定宽度
  超小屏幕 <768px 设置100%
  小屏幕 >=768px ~ <992px 设置750px
  中等屏幕（桌面显示器） >=992px ~ <1200px 设置970px
  超大屏幕 >=1200px 设置1170px
2.container-fluid类，流式布局
  流式布局容器百分百宽度
  占据全部视口viewport的容器
  适用于单独做移动端开发

栅格系统（12等分）

row行的类前置：
超小屏幕.col-xs-；小屏幕.col-sm-；中等屏幕.col-md-；大屏幕.col-lg-;
row中子级元素份额等于12-占满， 小于12-留空， 大于12-另起一行；
设置.col-md-6 与.col-lg-6的效果是相同的，样式向上兼容

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
          <div class="row"> <!-- 新增行row，可以取消父元素的padding -->
            <div class="col-xs-12 col-md-6"></div>
            <div class="col-xs-12 col-md-6"></div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">2</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">4</div>
      </div>
    </div>

列偏移

col-xs/sm/md/lg-offset-  子元素所占份额+偏移份额超过12则换行
单个盒子偏移居中 偏移位数=(12-盒子所占份额)/2

    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 orange"></div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-md-offset-6 col-lg-offset-6 pink"></div>
    </div>

列偏移

col-xs/sm/md/lg-pull-  改变column的排序

响应式工具

.hidden-xs/sm/md/lg 针对不同设备隐藏某个模块
.visible-xs/sm/md/lg 针对不同设备显示某个模块

移动端技术

流式布局
flex弹性布局
rem适配布局
响应式布局