响应式

Day 01

复习：

(1)AJAX

数据库、Web服务器、HTTP、原生AJAX、jQuery中的AJAX

(2)HTML5

表单、视音频、Canvas、SVG、地理定位、拖放、WebWorker、WebStorage、WebSocket

(3)Bootstrap

今日目标：

(1)响应式网页 —— 重点

(2)Bootstrap起步 —— 掌握

2G——不能上网

2.5G——GRPS——只能浏览WML网页

3G——智能操作系统——浏览HTML网页

1.什么是响应式网页？

Responsive Web Page，一个网页，可以根据浏览设备的不同，而自动更改布局、图片、文字效果，不会影响用户的浏览体验。

响应式网页的构成：

(1)布局：不能固定宽度，必须是流式

(2)文字和图片大小随着容器大小而改变

(3)CSS3 Media Query

2.如何测试响应式网页？

(1)使用真实的物理设备来测试

优势：测试效果真实可靠

不足：测试任务量太大

(2)使用设备模拟软件来测试

优势：快速，不需要准备大量的物理设备

不足：测试结果有待进一步验证

(3)使用Chrome自带的设备模拟器

优势：简单直观，功能比较丰富

不足：测试结果有待进一步验证

viewport：iOS诞生时网页都是为PC编写，只能进行强制缩放后才能在手机中显示——后果是所有的图片、文字都小到无法看清。苹果公司提出了Viewport（视口）的概念——可以在远比物理屏幕更宽的范围内浏览网页，不经缩放。后果是用户不得不左右滑动屏幕。后来的Android也借鉴了视口的概念。

3.如何编写响应式网页？——重点

手写响应式网页必须注意的六点：

(1)必须声明viewport元标签

避免用户左右滑动屏幕，禁止浏览器初始时缩放显示

(2)容器的宽度尽量不使用固定值(px)，使用相对宽度(%或auto)

(3)文字尽量不使用绝对尺寸(px)，使用相对尺寸(em或rem)

(4)图片要指定大小，如下方式：

img {

/*width: 400px;*/

/*width: 100%; 可随容器无限缩放*/

max-width: 100%; 可随容器缩小，但最大不会超过图片的原始大小——防止马赛克

}

(5)页面布局时不能固定，而要用流式布局，如浮动、inline-block

(6)灵活的使用CSS3 Media Query技术——响应式网页必备元素！

4.使用CSS3 Media Query技术——重中之重

Media：指浏览网页的设备，如screen、tv、projection、tty(字符终端)、print、braille、speech等

Query：指自动获取当前浏览设备物理特性，如色彩深度、orientation、width、height等

CSS3媒体查询技术：可以自动根据浏览设备的类型及特性，执行不同的CSS代码。

CSS3MediaQuery有两种具体用法：

(1)根据媒体查询的结果，执行不同的外部CSS文件

不足：即使当前设备不执行的CSS文件，也会被浏览器加载；每个CSS文件中可能存在很多重复代码

(2)在一个CSS片段中，有选择的执行某些选择器

@media screen and (min-width: 768px) and (max-width:991px) {

选择器 { 名: 值； }

}

午间练习：使用媒体查询的第二种用法，实现下面的响应式网页

PC下的布局效果 PAD下的布局效果 PHONE

5.Twitter Bootstrap框架

Bootstrap：起步

Twitter Bootstrap，是一个HTML/CSS/JS框架，用于简化响应式网页的编写。

官网：http://getbootstrap.com/

中文镜像：http://www.bootcss.com/

主要内容分为5部分：

(1)起步

(2)全局CSS样式

(3)组件

(4)jQuery插件

(5)定制

提示：Bootstrap学习没有难以理解的知识点，但难点在1)词汇量偏大，记忆方面有难度 2)常用的class特别的使用要求，需要熟练应用。

6.Bootstrap第一部分：起步

下载

基本模板

HTML标签的lang属性(language)，用于指定当前网页的自然语言。作用：1)为浏览器翻译功能指名原始语言 2)为屏幕阅读软件指明应该使用的发音

HTTP响应消息头部：X-UA-Compatible

Cross-UserAgent-Compatible：IE浏览器专用头部，告诉新版本的IE兼容其中的哪个版本的内核，edge表示启用能够使用的最新的版本内核

IE6：内核6

IE7：内核7/6

IE8：内核8/7/6

IE9：内核9/8/7/6

IE10：内核10/9/8/7/6

IE11：内核11/10/9/8/7/6

html5shiv.js：由第三方提供的通用JS，让老IE识别HTML5新的语义标签。

respond.js：由第三方提供的通用JS，让老IE支持响应式网页——CSS3 Media Query

练习：查找bootstrap.css对HTML基本标签做了哪些样式重置：

* { box-sizing: border-box; }

html { font-size: 10px;}

body { font-size: 14px; margin:0; background:#fff; color:#333;}

h1 { font-size: 36px; margin-top:20px; margin-bottom:10px;}

...

h6 { font-size: 12px; margin-top:10px; margin-bottom:10px; }

p { margin: 0 0 10px; }

a { color: #337ab7; text-decoration: none; }

img { border: 0; }

table { border-spacing:0; border-collapse: collapse; }

div { ... }

span { ... }

7.Bootstrap第二部分——全局CSS样式

按钮相关class： 17:13

.btn 按钮基础样式

.btn-default 白底黑字的按钮

.btn-danger 红色按钮

.btn-warning 黄色按钮

.btn-success 绿色按钮

.btn-info 浅蓝色按钮

.btn-primary 深蓝色按钮

.btn-lg

.btn-sm

.btn-xs

.btn-block 块级按钮

图片相关class：

.img-circle 圆形图片

.img-rounded 圆角图片

.img-thumbnail 缩略图片

.img-responsive 响应式图片

文本相关class：

.text-五种颜色文本颜色

.bg-五种颜色文本背景颜色

.text-uppercase 文本转换为大写形式

.text-lowercase 文本转换为小写形式

.text-capitalize 文本转换为首字母与大写形式

.text-left 文本左对齐

.text-center 文本居中对齐

.text-right 文本右对齐

.text-justify 文本两端调整对齐

课下任务：

(1)自学“全局样式”—— 辅助类、排版、代码

(2)仿写如下的响应式网页 ——手写媒体查询，不直接使用bootstrap.css，但可以借鉴其中的class

PC下的布局效果：

PAD下的布局效果：

PHONE下的布局效果：

*****************************************************************************************************Day 02

复习：

响应式网页：

概念：

如何编写：六条原则

如何测试：三种方法

Bootstrap框架：

是一个HTML/CSS/JS框架，适用于创建响应式Web页面。主要内容分为五部分：

(1)起步

下载、模板、实例、Bootlint、兼容性

(2)全局CSS样式

按钮、图片、文本、辅助类

(3)组件

(4)JS插件

(5)定制

今日目标：

(1)全局CSS样式

表格

栅格系统——重点

表单——难点

(2)组件

Boostrap指定的四种屏幕尺寸：

(1)超大PC屏幕——lg(large)：

w>=1200px

(2)中等PC屏幕——md(medium):

1200px>w>=992px

(3)PAD屏幕——sm(small)

992px>w>=768px

(4)PHONE屏幕——xs(extra small)

768px>w

1.Boostrap中的两种容器

定宽容器：

.container:

1170px //lg

970px //md

750px //sm

100% //xs

变宽容器：

.container-fluid

100%

此外，两种容器都有:before和:after，可以清除子元素margin和float造成的影响。

2.全局CSS样式——表格 —— 小重点

.table 基础表格

.table-bordered 带边框的表格

.table-striped 隔行变色的表格

.table-hover 带鼠标悬停效果的表格

.table-responsive 响应式表格，必须使用在TABLE的父元素DIV上!

练习：如何给某个td或者tr变为红色/绿色...背景？ .table-responsive的正确使用方法？

3.Bootlint

Bootlint 是 Bootstrap 官方所提供的 HTML/CS 检测工具。在使用了 Bootstrap 的页面上，它能自动检查某些常见的 HTML和class的使用错误——浏览器本身不具备这样的检查功能。

4.全局CSS样式——栅格布局系统——重点

前端页面可用的布局方法：

(1)使用TABLE实现页面布局

优势：简单，容易控制

问题：语义表达错误，渲染呈现的效果不友好

(2)使用DIV+CSS实现页面布局

优势：语义正确，渲染效果好

问题：不容易控制，尤其是响应式页面中

(3)使用Bootstrap提供栅格布局系统(Grid Layout)

优势：简单，容易控制，语义正确，支持响应式

问题：没有！

特点：类似于表格，有行(.row)和列(.col)的概念，底层实现却是DIV+CSS。

栅格布局系统使用方法：

(1)最外层必须是容器类： .container或.container-fluid

(2)容器中放置行： .row

(3)行中放置列： .col

(4)针对不同的屏幕有不同的列：

.col-lg-* 适用于超大PC屏幕

.col-md-* 适用于中等PC屏幕

.col-sm-* 适用于PAD屏幕

.col-xs-* 适用于PHONE屏幕

一个div可以同时声明多个不同屏幕下的列宽

(5)一行均分为12份，每个列都需要指定自己所占的份数

(6)每个列都可以指定向右的偏移量，可以实现右错位的效果

.col-lg/md/sm/xs-offset-1/2/3...

(7)不同的列在不同的屏幕下有不同的适用性

col-lg-* 只适用于LG屏幕

col-md-* 适用于MD/LG屏幕

col-sm-* 适用于SM/MD/LG屏幕

col-xs-* 适用于XS/SM/MD/LG屏幕

列的偏移适用同样的规则，对当前屏幕以及更大的屏幕有效；

(8)可以指定某列在特定尺寸的屏幕下隐藏

.hidden-lg

.hidden-md

.hidden-sm

.hidden-xs

隐藏只对当前指定的屏幕有效！

(9)栅格系统可以嵌套，如：

<div class="row">

<div class="col-xs-6"></div>

</div>

</div>

午间练习：

(1)一行中如何分出1:3:1(2:6:2)的三列？

(2)使用栅格布局系统实现如下布局：

input class="form-control"

练习：适用栅格布局系统实现：

PC下的布局效果 PAD下的布局效果 PHONE

导航条： 4/12 4/12 6/12 6/12 12/12 12/12

主体： 1:2:1 1:2:0 100%:100%:0

5.全局CSS样式——表单——难点

HTML5标准有几个表单相关的推荐写法：

1)button必须指定type

2)输入组件都必须有对应的label——为无障碍阅读准备

<label>

<input type="radio/checkbox">男

</label>

Bootstrap提供了几种形式的表单？

(1)默认表单

<form>

</div>

</form>

(2)行内表单

</div>

</form>

(3)水平表单 —— 最难点

提示：水平表单 = 栅格布局（变种） + 表单

	标准栅格系统	表单中的栅格系统
容器	div.container	form.form-horizontal
行	div.row	div.form-group
列	div.col--	div.col--

</div>

</div>

</form>

6.Bootstrap第三部分：组件 —— 图标字体

图标字体是字体，可以无限缩放、修改文本颜色、背景颜色、阴影...，显示的内容却是图形图标。

前端领域常用的图标字体：

(1)FontAwesome —— 免费的

(2)Glyphicons Halfling —— 收费的

图标字体在Web项目中都是作为服务器端字体来使用——当客户端在访问网页时，即时从服务器上下载必需的字体文件：

@font-face {

font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');

}

.glyphicon {

position: relative;

top: 1px;

display: inline-block;

font-family: 'Glyphicons Halflings';

}

===================================

具体使用方法：

注意：span中不能有任何文本或子标签！

课后练习：

(1)创建按钮，上面有如下的常用图标：

主页、配置、汉堡包、定位、后退、前进、加号、减号、对勾、叉号、上一张、下一张、发邮件、星星、心形、播放、暂停、停止、上一首、下一首、放大镜

(2)自己参考手册，实现如下效果：

还有搜索框——在输入框中有个放大镜

PC下的布局效果：

PAD下的布局效果：

PHONE下的布局效果：

*****************************************************************************************************

Day 03

复习：

见思维导图

练习：为音乐播放器创建一系列的按钮：

上一首快退播放/暂停停止快进下一首

1.Bootstrap第三部分：组件——图标字体

2.Bootstrap第三部分：组件——按钮组

.btn-group > .btn * 5

.btn-group-justified

.btn-group-lg/sm/xs

.btn-group-vertical 竖直按钮组

3.Bootstrap第三部分：组件——下拉菜单

下拉菜单必需的三级结构：

</ul>

</div>

4.Bootstrap第三部分：组件——导航

Bootstrap提供了三种形式的导航(nav)：

(1)标签页式导航

</li>

</ul>

(2)胶囊式导航

</li>

</ul>

(3)导航条中的导航

</li>

</ul>

5.Bootstrap第三部分：组件——警告框

<p></p>

</div>

6.Bootstrap第三部分：组件——进度条

</div>

练习：使用定时器修改进度条宽度，让它真正的动起来

午间任务：

自学手册中的组件：路径导航(面包屑)-breadcrumb、分页条-pagination、分页器-pager、徽章-badge、标签-label、巨幕-jumbotron、页头-pager-header、水井(well)

7.Bootstrap第三部分：组件——列表组

使用ul>li实现的列表组

</ul>

使用div>a实现的列表组

</div>

8.Bootstrap第三部分：组件——缩略图

缩略图一般配合栅格系统使用，实现批量的商品展示

</a>

<img>

</div>

练习：商品展示，PC中一行四列，PAD中两行两列，PHONE中四行一列

9.Bootstrap第三部分：组件——媒体对象

左中右结构的商品/帖子展示：左边/右边有一幅图像，中央是说明文本

10.Bootstrap第三部分：组件——面板和面板组

面板组件把内容分为三部分：头、主体、尾部；

多个面板组合(称为面板组)可以实现“手风琴”组件。

</div>

11.Bootstrap第四部分：JS插件 —— 折叠效果

折叠效果(collpase)本身很简单，

--------------------------------------------------------

折叠效果有两个重要的扩展应用：

(1)手风琴 —— 重点

面板组 + 折叠效果插件

(2)响应式导航条 —— 重点&难点

12.Bootstrap第三部分：组件——响应式导航条

“响应式导航条”必须配合折叠效果插件使用。

响应式导航条在PHONE中只显示一个LOGO + 一个汉堡包按钮，其他菜单项全在折叠下拉菜单中；PAD和PC中，下拉菜单要实现绝对对位，定位到LOGO后面去。

Bootstrap中导航条分类：

(1)按颜色分：

白底黑字： .navbar-default

黑底白字： .navbar-inverse

(2)按定位方式分：

相对定位：默认

固定定位： .navbar-fixed-*

(3)按所在位置分：

固定在顶部： .navbar-fixed-top

固定在底部： .navbar-fixed-bottom

</div>

</div>

晚间练习：英特尔中文官网首页

注意：只完成页面布局和内容，不做自定义样式设置！！

难点提示：

(1)响应式导航条 —— 尤其是导航菜单中的下拉菜单。

(2)主体中的“大小小”的第二行如何实现——参考手册“栅格系统”中“列排序”相关知识。

*****************************************************************************************************

Day 04

复习：

见思维导图

今日目标：

(1)Boostrap插件函数 —— 掌握

(2)Less语言 —— 重点

(3)Bootstrap定制 —— 比较乱

1.补充：列偏移 vs 列排序

列偏移：控制一列出现的位置，某列偏移后，后续的列都会随之偏移——只能往右偏移

col-lg/md/sm/xs-offset-*

列排序：控制一列出现的位置，某列可以往左拉或往右推——可以往右往左调整——某列排序后，其他列没有任何影响！

col-lg/md/sm/xs-push-*

col-lg/md/sm/xs-pull-*

定义jquery对象插件：

jQuery.fn.函数名 = function(){ }

调用jquery对象插件：

$('选择器').函数名( );

2.Boostrap第四部分：jQuery插件

Bootstrap基于jQuery提供了十几个插件函数，可以有两种调用方法：

(1)JS调用方式： $('a').dropdown( );

(2)data-*调用方式： <a data-toggle="dropdown"></a>

提示：官方推荐使用方式2！但有两个插件提交特别：需要方式1和2同时使用才能奏效。

3. Boostrap第四部分：jQuery插件——下拉菜单

</div>

4. Boostrap第四部分：jQuery插件——导航

<li class="active"><a href="#">二十元套餐</a></li>

<li><a data-toggle="tab" href="#">二十元套餐</a></li>

</ul>

5. Boostrap第四部分：jQuery插件——警告框

</div>

6. Boostrap第四部分：jQuery插件——折叠

7. Boostrap第四部分：jQuery插件——工具提示

对HTML元素的title属性的呈现效果加以改观。

$('[data-toggle="tooltip"]').tooltip();

</script>

注意：此插件必须同时声明data-*和js调用！还有一些可选参数，参考手册即可。

8. Boostrap第四部分：jQuery插件——弹出框

$('[data-toggle="popover"]').popover();

</script>

注意：此插件必须同时声明data-*和js调用！还有一些可选参数，参考手册即可。

Module：模块

Model：模型

Modal：模态对话框

9. Boostrap第四部分：jQuery插件—— 模态框 —— 重点

Modal：模态对话框——在父窗口中弹出的子窗口，只要不关闭，则父窗口无法再获得输入焦点。

<a data-toggle="modal" href="#mid">打开模态框</a>

<button data-toggle="modal" data-target="#mid">打开模态框</button>

模态框必需的HTML结构：

<div id="mid" class="modal"> 半透明遮罩层

<div class="modal-dialog"> 尺寸位置

<div class="modal-content"> 背景/边框/倒角/阴影

</div>

</div>

午间练习：

(1)如何一刷新页面立即显示模态框——使用已经学过的技术

$('a').click(); $('a').trigger('click');

(2)完成一个完整的登录摸态框——包含表单和按钮

10. Boostrap第四部分：jQuery插件——轮播广告 —— 重点

提示：轮播广告的结构比较复杂！只要记得根元素 div.carousel（旋转木马），剩余的全靠Bootlint的错误提示。

<img>

</div.

</div>

练习：

(1)为每个广告添加说明文字

(2)添加“上一条”、“下一条”按钮

(3)添加序号指示器

11.样式语言的分类

静态样式语言：CSS，可以直接被浏览器所理解；但是作为一门语言，CSS不称职，缺少语言必需的基本要素：数据类型、变量、运算、逻辑结构、函数、继承等。导致CSS可维护性低。

动态样式语言/样式预处理语言：在CSS基础之上添加了动态语言必需的要素，如：数据类型、变量、运算、逻辑结构、函数、继承等，从而极大的提高了样式的可维护性和可修改性。常见动态样式语言有三种：

(1)Sass / SCSS

(2)Stylus

(3)Less

注意：浏览器只能理解CSS！所有的动态样式代码必需转换为CSS才能被浏览器所解析！ x.less => x.css 必需有相应的转换程序——动态样式预处理器/编译器。

12.Less语言概述

官网：http://lesscss.org/

中文教程：http://www.bootcss.com/p/lesscss/

浏览器不能直接理解Less样式！

必需使用编译程序(Compiler)，把Less内容转换为CSS内容！

具体有两种使用形式：

(1)在客户端使用Less —— 效率低，仅做了解

1)编写.less文件

2)编写.html文件，引入.less文件

3).html中继续引入lessc.js文件

4)当浏览器下载html文件时，同时下载.less和lessc.js，自动执行lessc.js，把.less编译为CSS内容

(2)在服务器端使用Less —— 重点掌握

1)编写.less文件

2)程序员在自己的电脑上安装一款less编译器，把.less文件编译得到.css文件

3)编写.html文件，引入.css文件

4)客户端浏览html下载css即可

========================================

在自己的电脑上安装Less编译环境的步骤：

(1)下载并安装独立的JS解释器： Node.js

确保命令中 node -v 有正确的版本提示

(2)下载并解压缩less编译器： lessc.js

比如保存在 e:/npm/node_modules/less/bin/lessc

(3)运行JS解释器，执行lessc.js文件，把.less转换为.css

可以在命令中直接运行；

node e:/npm/node_modules/less/bin/lessc e:/x.less e:/x.css

也可以在WebStorm中配置“文件监视器”自动运行；

配置好后，新建的或者修改后的.less文件都会自动被编译为.css文件

使用WebStorm“文件监视器”需要注意：项目路径中不允许有中文和空格！项目文件编码必须为UTF-8！Less必须新建或修改后才能自动编译！

13.Less语法学习

(1)Less支持所有的CSS语法，即可以把.css重名为.less都是可以的！

(2)Less支持单行/多行注释，只有多行注释会被编译到.css中——推荐多多使用单行注释。

(3)Less中支持变量（variable）的概念：

定义变量： @变量名: 变量值;

使用变量：选择器 { color: @变量名; }

变量的值可以是任意合法的CSS属性值。

(4)变量和常量可以进行算术运算：加、减、乘、除、取余；

以及比较运算： > < >= <= !=

(5)Less中支持样式混入(mixin)的概念：

选择器1 { 样式; }

选择器2 { 选择器1; 样式; }

(6)混入其它样式时可以带参

选择器1(@参1 , @参2) { 样式; }

选择器2 { 选择器1(值1, 值2); }

(7)Less支持选择器的嵌套

选择器1 {

样式1;

选择器2 {

样式2;

}

编译后的结果为：

选择器1 { 样式1; }

选择器1 选择器2 { 样式2; }

(8)Less内置了几十个样式操作函数：

image-width() 返回图片的宽

image-height() 返回图片的高

ceil() 上取整

floor() 下取整

lighten() 颜色变亮

darken() 颜色变暗

(9)Less支持文件导入，

CSS中也支持文件导入的概念，由于会增加文件请求次数，不推荐使用；Less中的文件导入，则强烈推荐使用——被包含的.less会与当前文件进行拼接！

@import "xx.less";

@import "xx"; //可以省略.less后缀名

14.Bootstrap第五部分：定制

定制Bootstrap有三个目标：

(1)减肥瘦身：删除不需要的组件相关样式 —— 删除bootstrap.less不必要的@import即可；

(2)全局定制：定制大体的样式 —— 修改variables.less中变量的值，400+变量；

(3)细节定制：修改某个组件细节样式 —— 修改组件对应的.less的样式。

课下任务：

(1)自学插件——Affix(附加导航)

(2)自学插件——ScrollSpy(滚动监听)

(3)按照最新的Intel官网的效果，定制导航条组件、摸态框组件

(4)“我的大项目”中必须有一个响应式项目

posted @ 2016-12-22 10:51 寒霜27 阅读(597) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

寒霜27

响应式

公告