我们为什么要写自适应的页面(响应式页面)
众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑，如果是手机就跳转到相应的手机页面，例如百度的就是，手机访问www.baidu.com就会跳转到m.baidu.com，这样做简直就是费力不讨好的活，所以聪明的程序员开发了一种自适应写法，即一次开发，处处显示！这到底是一个什么样的神器东西呢，接下来就揭晓它的神秘面纱。
CSS3 的 @media 查询
定义和使用
使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
媒体类型(mediaType ) 类型有很多，在这里不一一列出来了，只列出了常用的几个。
screen： 用于电脑屏幕，平板电脑，智能手机等。(最常用) speech 应用于屏幕阅读器等发声设备 媒体功能
media feature：
1.max-width:定义输出设备中的页面最大可见区域宽度
2.min-width:定义输出设备中的页面最小可见区域宽度
开始编写响应式页面
准备工作1：设置Meta标签
首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例(默认设置为1.0，即代表不缩放)
user-scalable：用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)
准备工作2：加载兼容文件JS
因为IE8既不支持HTML5也不支持CSS3 @media ，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
准备工作3：设置IE渲染方式默认为最高(可选) 现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8 为了防止这种情况，我们需要下面这段代码来让IE的文档渲染模式永远都是最新的
ps:这段代码后面加了一个chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。
代码示例：
1、如果文档宽度大于等于 1170px 则应用花括号内的样式——修改body的背景颜色(background-color):
@media screen and (min-width: 1170px) {
body {
background-color:lightblue;
}
}
从上面的代码可以看出，媒体类型是屏幕(screen)，使用 一个 and 连接后面的媒体功能，这里写的是 max-width:300px ，也就是说，当屏幕的最大宽度 大于于等于 1170px 的时候，就应用花括号里面的样式。
2.如果文档宽度大于等于 992px 则应用花括号内的样式——修改body的背景颜色(background-color):
@media screen and (min-width: 992px) {
body {
background-color:red;
}
}
3、当文档宽度大于等于 768px 并且小于等于992px ( width >=768 && width <=992)的时候显示的样式
@media screen and (min-width:768px) and (max-width:992px) {
/* CSS 代码 */
}
需要注意的是：
不要被 min-width 和 max-width 所迷惑，初学者很容易误以为 min-width 的意思是小于xxx的时候才应用，然而这就陷入误区了，其实它的意思是：当设置了 min-width 的时候，文档的宽度如果小于设置的值，就不会应用这个区块里的CSS样式，所以 min-width 它才能实现大于等于设置的值得时候，才会应用区块里的CSS样式，max-width 也是如此。
前言
在页面整体布局中，页面元素的尺寸大小(长度、宽度、内外边距等)和页面字体的大小也是重要的工作之一。一个合理设置，则会让页面看起来层次分明，重点鲜明，赏心悦目。反之，一个不友好的页面尺寸和字体大小设置，则会增加页面的复杂性，增加用户对页面理解的复杂性；甚至在当下访问终端(iPhone、iPad、PC、Android…)层出不穷的今天，适应各式各样的访问终端，将成为手中的一块“烫手的山芋”。所以在近几年，“九宫格”式的“流式布局”再度回归。为了提供页面布局，及其它的可维护性、可扩展性，我们尝试将页面元素的大小，以及字体大小都设置为相对值，不再是孤立的固定像素点。使其能在父元素的尺寸变化的同时，子元素也能随之适应变化。以及结合少量最新CSS3的@media查询，来实现“响应式布局”，bootstrap这类CSS框架大势兴起。
然而在CSS中，W3C文档把尺寸单位划为为两类：相对长度单位和绝对长度单位
然而相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位
字体相对单位有：em、ex、ch、rem；
视窗相对单位则包含：vw、vh、vmin、vmax几种
绝对定位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比(%)来度量页面元素的尺寸。
px: 绝对(固定)单位
缺点：任何情况下都是固定值，会导致布局在不同尺寸下的设备错位
%：相对定位(会有影响发生变化)相对于父级(自身)大小进行定位
缺点：能确定范围的还是比较好计算的，对于不太好确定值得地方不好使用百分比，并且会导致变形，高度一般不好控制
em: 相对定位 (会有影响发生变化) em=当前字体大小
缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦
rem
r==root
em=字体大小 font-size
rem 相对单位
只依赖于html字体大小
可以认为它没啥缺点吧！反正我个人还是挺喜欢的
动态的修改根元素的font-size：
需要通过js去控制：
/*获得页面宽度后动态修改html上的fontsize
* 320为iphone5设计稿下的页面宽度，如下设置后页面的页面在iphone5等宽屏幕上html
* 的font-size会变为20px，即 1rem = 100px 1px=0.05rem
* 所以设置元素尺寸的时候，如果测量设计稿 15px 则需设置尺寸为 (0.05*15)rem = 0.75rem
*/
!(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientWidth;
console.log(width)
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
};
win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window));
将上面的文件引入到当前项目中，
代码如下：
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
html{
width: 100%;
height: 100%;
/*font-size: 30px;*/
overflow: hidden;
}
body{
width: 100%;
height: 100%;
overflow: auto;
}
.head-box{
width: 100%;
height: 4rem;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.list{
margin-top: 4rem;
font-size: 1.5rem;
}
.list .item{
float: left;
width: 7rem;
height: 7rem;
border: 1px solid black;
margin: 0.25rem;
}
- 1111111
一、Bootstrap的介绍
凡是使用过Bootstrap的开发者，都不在乎做这么两件事情：复制and粘贴。哈哈~，是的使用Bootstrap非常简单，但是在复制粘贴之前，需要先对Bootstrap的用法一一熟悉之后我们才开始干活！
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。
它用于开发响应式布局、移动设备优先的 WEB 项目
二、Bootstrap的下载
2.1使用Bootstrap第一步，先将生成环境的Bootstrap下载下来。然后将下载，然后引入到自己建好的当前目录中
2.2点到起步中的基本模板
将看到的整段代码复制粘贴到建好的index.html文件中
官网明确表示：
使用此给出的这份超级简单的HTML模板，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴
Bootstrap支持移动设备优先
也就是说使用Bootstrap可以在移动设备上运行。为了确保适当的绘制和触屏缩放，需要在
之中添加viewport元数据标签在移动设备浏览器上，通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
Bootstrap重置样式
为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
...
.container-fluid 类用于 100% 宽度，占据全部视口(viewport)的容器。
...
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
栅格参数
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围)，在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。
一些常使用网站
阿里巴巴图标库网站：
PS:还是那句话，使用Bootstrap非常简单，根据项目的需求适当去官网复制粘贴，然后根据需求更改自己的内容，如果想修改自己的样式，可以添加类，按照之前咱们学习css一样的方式，给它相应的样式
1、下拉菜单
代码如下：
Dropdown
aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。
aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的
aria-labelledby：当想要的标签文本已在其他元素中存在时，可以使用aria-labelledby，并将其值为所有读取的元素的id。如下：
当ul获取到焦点时，屏幕阅读器是会读：“选择您的职位”
data-toggle: 表示什么事件类型发生
2、模态框
代码如下：
创建模态框
删除
在模态框中需要注意两点：
第一是.modal，用来把
第二是.fade class。当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby="myModalLabel" ，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止(比如点击在相关的按钮上)。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
通过js控制模态框弹出
代码如下：
创建模态框
删除
$(function(){
//通过jquery控制模态框弹出
$('#delete').click(function(){
$('#myModal').modal({
keyboard:false
})
})
})
3、滚动监听
代码如下：
iOS
iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
SVN
Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
jMeter
jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
EJB
Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。
Spring
Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
通过javascript 调用滚动监听，选取要监听的元素，然后调用.scrollspy()函数
$('.navbar-header').scrollspy('.bs-js-navbar-scrollspy')
像后面还介绍了：
0.手风琴效果
data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
href 或 data-target 属性添加到父组件，它的值是子组件的 id。
data-parent 属性把折叠面板(accordion)的 id 添加到要展开或折叠的组件的链接2
弹出框
警告框
轮播
通过 data 属性：使用 data 属性可以很容易控制轮播(Carousel)的位置。
属性data-slide接受关键字prev或next，用来改变幻灯片相对于当前位置的位置
使用data-slide-to来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放
上面是常用Bootstrap插件，相关代码都在Bootstrap的官网上。大家自行copy一定要演示
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
