前端Day13

响应式布局：（媒体查询的运用）

 

Bootstrap：

 Bootstrap使用：

 

要求当前网页使用最高版本的IE内核来渲染网页：

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

视口宽度与设备一致，默认缩放比例与PC端一致，用户不能自行缩放：

 

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

 

解决ie9以下浏览器对html5和css3属性不兼容问题：

 

<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

Bootstrap布局容器：container适用于PC端，container-fluid适用于移动端。

Bootstrap栅格系统：（将屏幕均分为十二等份）

参数：若排列数大于12则另起一行显示，若小于12则留白

列嵌套：相对于父盒子的宽度再进行12等份的分割

列嵌套加row元素可以取消父元素的padding值且高度与父级相等

 <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
                <!-- 列嵌套加row元素可以取消父元素的padding值且高度与父级相等 -->
            </div>
        </div>
    </div

 

 

列偏移：col-尺寸符-offset-偏移量

列排序：col-尺寸-push/pull-量

响应式工具：

 移动端总结：

至此，html，css完结。