响应式

一、响应式布局

概念：响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

1.1 涉及知识点

屏幕宽度变化：媒体查询
布局知识：传统布局方案（百分比、浮动、清除浮动、定位）

1.2 档位划分

媒体查询：档位划分；市场上默认的划分；三个节点、四个档位

w<768 超小屏幕（xs）（手机，学习rem布局里面的档位划分都是在这个范围）
768<= w <992 小屏设备（sm）（平板）
992<= w <1200 中等屏幕（md）（小显示屏的PC显示器）
1200<=w 大宽屏设备（lg）（大桌面显示器）

1.3 媒体查询语法

/* 1. 超小屏幕下 xs 小于 768 */
@media screen and (min-width: 0px) {
    
    
}
/* 2. 小屏幕下 sm 大于等于768 */
@media screen and (min-width: 768px) {
    
    
}
/* 3. 中等屏幕下 md 大于等于 992px */
@media screen and (min-width: 992px) {
    
    
}
/* 4. 大屏幕下 lg 大于等于1200 */
@media screen and (min-width: 1200px) {
    
    
}

1.4 版心

不同的档位下，版心不同；
档位设置：版心；
所有的子元素都是归于版心下，不同的版心宽度，意味着子元素要以不同的布局排版满足用户浏览友好的需求；

语法

/* 1. 超小屏幕下 xs 小于 768 布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
      
      
    .container {
      
      
    	width: 100%;
    }
}
/* 2. 小屏幕下 sm 大于等于768 布局容器改为 750px */
@media screen and (min-width: 768px) {
      
      
    .container {
      
      
    	width: 750px;
    }
}
/* 3. 中等屏幕下 md 大于等于 992px 布局容器修改为 970px */
@media screen and (min-width: 992px) {
      
      
    .container {
      
      
    	width: 970px;
    }
}
/* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
      
      
    .container {
      
      
    	width: 1170px;
    }
}

要注意的是
- 媒体查询使用符号的相关：min-，max-包含等号，后面是数值单位为px；
- 除超小屏以外：版心的宽度设置都是小于当前档位最小界值，比如 min-width: 768px，版心是750px；原因：两边留空白，用户体验好。

二、BootStrap

参考

2.1 介绍

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。2011 年八月在 GitHub 上发布的开源产品。

2.2 版本

2.x.x：停止维护，代码不够简洁，功能不够完善。
3.x.x：目前使用最多，稳定，不支持IE6-IE7。对 IE8 支持，界面效果不好，偏向用于开发响应式布局、移动设备优先的WEB 项目。
4.x.x：最新版，目前还不是很流行

2.3 优点

BootStrap框架可非常快地搭建出响应式页面；
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式；
浏览器支持：所有的主流浏览器都支持 Bootstrap；
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap；
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机；
为开发人员创建接口提供了一个简洁统一的解决方案；
包含了功能强大的内置组件，易于定制，也提供了基于Web的定制；
开源。

2.4 BootStrap使用

2.4.1 BootStrap包内容

基本结构：Bootstrap 提供了一个带有栅格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。可直接包含所有的插件，也可以逐个包含这些插件。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

2.4.2 使用初始化

初始化 index.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BootStrap Template</title>
    <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
    <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 条件注释:解决小于IE9的版本一些问题 -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
<body>
	<h1>你好，世界！</h1>
</body>
</html>

要注意的是：条件注释：满足条件，下面代码链接就会发出请求；

扫描二维码关注公众号，回复： 12058443 查看本文章

2.4.3 布局容器

版心设置：BootStrap 需要为页面内容包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类
.container：设置不同档位下的版心的宽度；
1. 超小屏（xs : extra small）：手机； 0px <=w ；版心宽度为100%
2. 小屏（sm : small）：平板； 768px<=w ；版心宽度定为 750px
3. 中屏（md: medium）：桌面；992px<=w ；版心宽度定为 970px
4. 大屏（lg: large）：大桌面；1200px<=w ；版心宽度定为 1170px
.container-fluid：百分百宽度
特点：
- 所有元素为CSS3盒子模型
- 布局盒子有左右15px padding值

2.4.4 预制类名

标题，HTML 中的所有标题标签，到 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

页面主体，Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外， （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

中心内容，通过添加 .lead 类可以让段落突出显示。

带下划线的文本，为文本添加下划线，使用 <u> 标签。

等等很多预制的类名。

三、栅格系统

3.1 介绍

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局。

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

3.2 作用

栅格系统在各个档位下，控制子元素布局不同；将版心宽度均分为12份；设置子元素在不同档位下的布局；

3.3 栅格参数

3.4 基本使用

3.4.1 语法

<!-- 中屏和以上占有6份 -->
<div class="container">
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>
<!-- 各个档位下，按照各个档位下布局 -->
<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4">1</div>
        <div class="col-md-6 col-lg-8">2</div>
    </div>
</div>

3.4.2 特点

单一类前缀：各个档位下的类前缀，为包括当前且向上生效；例如：.col-md-6为中屏和以上占有6份
多个类前缀：分别按照各个档位列划分生效
每个子项：默认左右15px的padding
行（.row）可以去除父容器左右15px的padding值：.row的左右margin为-15px

3.5 列嵌套

操作：可以在已经分好的子元素中内部，继续进行列的划分（共12份）
效果：继续在分好的布局内继续划分

语法

<!-- 直接嵌套 -->
<div class="col-sm-4">
    <div class="col-sm-6">小列</div>
    <div class="col-sm-6">小列</div>
</div>
<!-- 使用row嵌套 -->
<div class="col-sm-4">
    <!-- 加1个行 row 这样可以表现出抵消父元素的左右15padding值 而且高度自动和父级一样高; -->
    <div class="row">
        <div class="col-sm-6">小列</div>
        <div class="col-sm-6">小列</div>
    </div>
</div>

3.6 列偏移

操作：是划分好的子项进行列的份数偏移
场景：左右布局，居中布局

语法

<!-- 左右对齐-->
<div class="row">
    <!-- 如果只有一个盒子 那么就偏移 = 12-4-4 -->
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4">2</div>
</div>
<!-- 居中-->
<div class="row">
    <!-- 如果只有一个盒子 那么就偏移 = 2 8 2 -->
    <div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>

3.7 响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外BootStrap还包含了针对打印机显示或隐藏内容的工具类。

Html学习5-4_响应式布局

响应式