(1)AJAX：数据库、服务器、HTTP、原生AJAX、jQuery-AJAX
(2)html5新特性
(3)Bootstrap
Bootstrap学习特点：
(1)理解难度低，甚至低于CSS
(2)难在1000+class/4天 = 250单词/天 —— 单词记忆！
今日目标：
(1)如何编写响应式网页 —— 重点
(2)Bootstrap入门 —— 重点
1.什么是响应式网页？
1G：模拟信号，手机只能打电话
2G：数字信号，手机可以发短信
2.5G：GPRS，手机可以浏览网页，WAP/WML
3G：智能手机，ios/android——Linux操作系统，具备真正的浏览器，可以浏览HTML网页
早期的HTML网页都是为PC浏览器准备的，宽度设定都很大，手机屏幕，浏览体验不佳！
2010年5月提出的“Responsive Web Page”，响应式网页、自适应式网页，一个页面，可以根据浏览设备的不同、或使用环境的不同，自动的修改布局、图片尺寸、文字大小，从而可以保证所有的设备下都正常的浏览体验。
好处：各种设备下都正常浏览
不足：页面代码结构需要考虑到多种设备，编写难度更大，一般只适用于内容量不太多的页面。
2.如何测试响应式网页？
(1)使用真实物理设备测试——测试效果最好但最麻烦
(2)使用第三方模拟器软件测试——测试效果有待进一步验证
(3)使用浏览器提供的设备模拟器测试——最简单但有时测试效果与真实物理设备有所不同，需要进一步验证
|
行业小知识：Viewport，视口，屏幕中浏览网页的窗口 早期的手机浏览PC网页时只能把页面进行缩小，影响浏览体验：
iOS系统提出了viewport的概念——承载网页的窗口，可以随意指定宽和高，但不能小于手机物理屏幕，可以让任意大小的网页不经缩放，直接显示：
Android后来也引入了该概念 —— 只有移动浏览器才有该概念 |
3.面试题：如何编写响应式网页？ —— 整个阶段的最重点！！
(1)必须声明viewport元标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
(2)容器尽量使用相对尺寸
尽量避免绝对尺寸： div.container { width: 500px; }
使用相对尺寸代替： div.container { width: 80%; }
(3)文字大小尽量使用相对尺寸
尽量避免绝对尺寸： .text { font-size: 12px; }
使用相对尺寸代替： .text { font-size: 0.8rem; }
(4)图片尽量使用相对尺寸
尽量避免绝对尺寸： img { width: 200px; }
使用相对尺寸代替： img { width: 50%; } 指定在父容器中的宽度占比，可以随着父容器无限变大
img { max-width: 50%; } 指定在父容器中的宽度占比，同时还不能超过自己的原始大小
(5)页面布局尽量采用流式布局(Fluid)
float:left; 或 display:inline-block;
(6)响应式网页必须CSS3 Media Query技术！
4.CSS3 Media Query
Media：指浏览网页的设备，如screen(phone/pc/pad)、tv、projection、print、tty、braille
Query：使用CSS自动查询出浏览设备的特性，如位深、解析度、宽高、水平/竖直方向....
CSS3 Media Query：根据浏览网页的设备类型不同，或者特性不同，而有选择的执行某些CSS，放弃执行另外的。
媒体查询具体有两种使用方法：
(1)有选择性的执行符合条件的外部CSS文件
<link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="css/pad.css">
缺陷：即使不满足当前浏览器条件的CSS文件，也会被浏览器请求。
(2)有选择性的执行CSS片段中的部分内容
@media screen and (min-width: 768px) and (max-width: 991px) {
h3 {
display：none
}
}
重点练习：响应式网页示例：
主体布局：1:3:1 1:3:0 100%：100%：0
课后作业：
(1)em和rem的区别
复习：
响应式页面：
(1)声明viewport元标签
(2)容器尽量使用相对尺寸
(3)文字尽量使用相对大小
(4)图片尽量使用相对尺寸
(5)布局使用流式布局
(6)使用CSS3 Media Query
Bootstrap是一个HTML/CSS/JS框架，适用于响应式Web页面开发。内容分为五部分：
(1)起步
下载、基本模板、实例、Bootlint、兼容性
(2)全局CSS样式
(3)组件
(4)JS插件
(5)定制
全局CSS样式：
按钮：
.btn .btn-default
.btn-danger/warning/success/info/primary
.btn-lg/默认/sm/xs
.btn-block
图片：
.img-rounded
.img-circle
.img-thumbnail
.img-responsive
列表：
.list-unstyled
.list-inline
文本：
.text-五种颜色
.bg-五种颜色
.text-left/right/center/justify
.text-uppercase/lowercase/capitalize
今日目标：
(1)全局CSS样式——表格、栅格布局、表单
(2)组件——简单的组件
1.Boostrap第二部分：全局CSS样式——辅助类
.pull-left
.pull-right
.caret
.close
.center-block
2.Boostrap第二部分：全局CSS样式——排版&代码
3.Boostrap第二部分：全局CSS样式——表格
.table
.table-bordered 带边框的表格
.table-striped 隔行变色的表格
.table-hover 鼠标悬停变色的表格
.table-responsive 响应式表格，用于TABEL父元素DIV
|
Bootlint：官方提供的一个用于检查HTML/CSS使用方面错误的工具。 |
练习：如何为tr和td修改背景颜色 —— 自己查看手册
4.Boostrap第二部分：全局CSS样式——栅格布局系统——重点
页面内容布局的三种方式：
(1)TABLE布局
好处：简单容易控制
问题：语义错误，渲染效率低
(2)DIV+CSS布局
好处：语义正确，渲染效率高
问题：不容易控制
(3)Bootstrap栅格布局系统
好处：语义正确，渲染效率高，简单容易控制，实现了响应式
不足：没有！
栅格布局系统的使用方法：
(1)栅格系统的父元素必须是：
div.container - 定宽容器
LG:1170px MD:970px SM: 750px XS:100%
div.container-fluid - 变宽容器
width:100%
(2)在容器中声明“行”
div.container > div.row
(3)在“行”中声明“列”
div.container > div.row > div.col-*-*
(4)列根据不同的屏幕尺寸分为四组：
.col-lg-*
.col-md-*
.col-sm-*
.col-xs-*
(5)一行均分为12等份，每个列必须指定自己的占比：
.col-lg-1
.col-lg-2
.col-lg-3
.col-lg-...
.col-lg-12
(6)列可以向后“偏移”指定的宽度
.col-lg-offset-1
.col-lg-offset-2
.col-lg-offset-....
.col-lg-offset-12
午间练习：使用栅格系统实现如下页面布局：
<input class="form-control">
课后练习：
(1)面试题：Bootstrap为什么把一行等分为12份？
复习：
Bootstrap是一个HTML/CSS/JS框架，适用于响应式Web项目，内容涉及到：
HTML: 基于H5已有标签添加了data-*属性
CSS: (1)CSSReset (2)千个class
JS: 基于jQuery提供了十几个插件函数
分为五部分：
(1)起步
下载、模板、实例、Bootlint、兼容性
(2)全局CSS样式
按钮、图片、列表、文本、辅助类、表格、栅格系统、表单(默认、行内、水平)
(3)组件
下拉菜单、警告框
(4)JS插件
(5)定制
<div class="dropdown">
<a data-toggle="dropdown">触发元素</a>
<ul class="dropdown-menu"></ul>
</div>
<div class="alert alert-颜色 alert-dismissible">
<span class="close" data-dismiss="alert">×</span>
任意文字
</div>
今日目标
(1)组件 —— 难点在响应式导航条
(2)插件 ——
1.补充知识点：Bootstrap全局CSS样式——栅格系统
列偏移(offset)：
控制某列向右错位，并影响后续所有的列
.col-lg/md/sm/xs-offset-*
作用：列左右留白、列右对齐、列居中
列排序：
控制某列向右/左移动，并不影响其他列
.col-lg-push-1/2/.../12
.col-lg-pull-1/2/.../12
作用：在特定屏幕下临时调整列的出现位置
2.Bootstrap第三部分：组件——下拉菜单
3.Bootstrap第三部分：组件——警告框
4.Bootstrap第三部分：组件——图标字体
图标字体：本质是文字，不是图片，可以随意变大、添加下划线、变斜体、改颜色。
Web应用中常用图标字体： FontAwesome、Glyphicons
因为客户端都没有上述字体文件，必须应用服务器端字体：
@font-face {
font-family: ‘Glyphicon‘; /*声明服务器端字体*/
src: url(../fonts/glyphicons....ttf) /*服务器端字体下载位置*/
}
.glyphicon {
font-family: ‘Glyphicon‘; /*使用服务器端字体*/
}
.glyphicon-alert:before {
content: ‘\9fc3‘;
}
Bootstrap提供了200+个Glyphicons图标，使用方法：
<span class="glyphicon glyphicon-*"></span>
提示：使用图标字体的HTML标签中不能有任何子元素或内容！
练习：使用如下的常用图标：
首页、配置、用户、定位、刷新、搜索、邮件、星星、心形、加号、减号、对勾、叉号、上一张、下一张、前进、后退、播放、暂停、快进、快退
5.Bootstrap第三部分：组件——按钮组
把多个按钮放在一起组成小组
.btn-group > .btn*n
.btn-group.btn-group-justified > .btn*n
.btn-group-vertical > .btn*n
6.Bootstrap第三部分：组件——导航(nav)
Boostrap提供了三种形式的导航组件：
(1)标签页式导航（页签组件）
(2)胶囊式导航
(3)导航条专用导航
午间自学——非常简单：
面包屑(路径导航)、分页条、分页器、标签、徽章、巨幕、水井(well)、页头、进度条
复习：
见思维导图
今日目标：
(1)Bootstrap第四部分：插件 —— 掌握
(2)Less语言 —— 重点
(3)Bootstrap第五部分：定制 —— 难点
1.Bootstrap插件概述
Bootstrap一共提供了十几个插件函数，可以单个引入，也可以一次性全部引入(bootstrap.js)
使用方法有两种：
(1)使用JS方式调用
$(‘div‘).modal( );
(2)使用data-*方式调用 —— 推荐写法
<div data-toggle="modal">
2.Bootstrap第四部分：插件 —— 下拉插件
1)JS方式调用：
$(‘.dropdown a‘).dropdown( );
2)data-*方式调用：
<a data-toggle="dropdown">
3.Bootstrap第四部分：插件 —— 警告框
2)data-*方式调用：
<div class="alert alert-四种颜色">
<span class="close" data-dismiss="alert">×</span>
文字内容
</div>
3.Bootstrap第四部分：插件 ——折叠效果
2)data-*方式调用：
<a data-toggle="collapse" href="target">触发元素</a>
<div id="target" class="collapse"></div>
|
Model： 数据模型 Modal： 模态对话框 Module： 模块 |
4.Bootstrap第四部分：插件 —— 模态框
modal：模态对话框，在父窗口中打开了一个子窗口，只要子窗口不关闭，则父窗口无法获得输入焦点——该子窗口就称为“模态子窗口”。浏览器中默认： window.alert()/confirm()/prompt() 都是模态子窗口，但无法定制。
一般项目中，使用DIV模拟出模态子窗口的效果：
<a data-toggle="modal" href="#modal-login">弹出模态对话框</a>
<div id="modal-login" class="modal"> <!--半透明的遮罩层-->
<div class="modal-dialog"> <!--尺寸和定位-->
<div class="modal-content"> <!--背景/边框/倒角/阴影-->
<div class="modal-header">
<span class="close" data-dismiss="modal">×</span>
头部
</div>
<div class="modal-body">主体</div>
<div class="modal-footer">尾部</div>
</div>
</div>
</div>
午间练习：修改intel项目首页，点击“登录”后弹出模态对话框：
课后任务：
(1)仿写Bootstrap起步中的“示例”