前端开发课件：响应式网页设计与Bootstrap入门.pdfVIP

(1)AJAX：数据库、服务器、HTTP、原生AJAX、j

Query‑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月“ResponsiveWebPage”，即响应式网页、自适应式网页，一个页面可以根据浏览

设备的不同或使用环境的不同，自动修改布局、尺寸、文字大小，从而保证所有设备下都能获得良好

的浏览体验。

好处在各种设备下都能正常浏览

不足页面代码结构需要考虑到多种设备，编写难度更大，一般只适用于内容量不太多的页面。

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

(1)使用设备测试——测试效果但最

(2)使用第模拟器软件测试——测试效果有待进一步验证

(3)使用浏览器的设备模拟器进试——这是最简单的方法，但有时测试结果可能与实际设备有

所差异，需要进一步验证。

行业小知识:Viewport，视口，屏幕中浏览网页的窗口。早期的

浏览PC网页时只能把页面进行缩小，影响浏览体验：

(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月“ResponsiveWebPage”，响应式网页、自适应式网页，一个页面，可以根据浏

览设备的不同、或使用环境的不同，自动的修改布局、尺寸、文字大小，从而可以保证所有的设备下

都正常的浏览体验。

好处：各种设备下都正常浏览

不足：页面代码结构需要考虑到多种设备，编写难度更大，一般只适用于内容量不太多的页面。

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

(1)使用设备测试——测试效果但最

(2)使用第模拟器软件测试——测试效果有待