移动端web开发（一）

最新推荐文章于 2024-07-11 13:45:07 发布

ANNENBERG

最新推荐文章于 2024-07-11 13:45:07 发布

阅读量505

点赞数 1

分类专栏： h5 移动端文章标签：移动端

本文链接：https://blog.csdn.net/ANNENBERG/article/details/90515010

版权

h5 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

移动端

3 篇文章 0 订阅

订阅专栏

适配问题（手机屏幕尺寸不一）
解决方案使用流式布局，也就是百分比自动适应布局，当然，光靠这一个远远不够，我们还要用到移动端的viewPort适口进行配置，这就能达到适配目的。
什么叫流式布局当屏幕尺寸发生改变时，其中内容会像液体一样填充改变后的屏幕，而不会消失。流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局
viewport 视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。承载关系：浏览器---->viewport---->网页

适配要求：
	1. 网页宽度必须和浏览器保持一致
	2. 默认显示的缩放比例和PC端保持（缩放比例1.0）
	3. 不允许用户自行缩放网页
	满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。

适配设置：
	如果任何设置都没有，默认走的就是viewport的默认设置
	去设置新的viewport设置,达到适配要求。
	<meta name="viewport"> 设置视口的标签在head里面并且应该紧接着编码设置
	viewport的功能：
	1. width 可以设置宽度 (device-width 当前设备的宽度)
	2. height 可以设置高度
	3. initial-scale 可以设置默认的缩放比例
	4. user-scalable 可以设置是否允许用户自行缩放
	5. maximum-scale 可以设置最大缩放比例
	6. minimum-scale 可以设置最小缩放比例
	在<meta name="viewport" content="" > content="" 使用以上参数
	1. width=device-width 宽度一致比例是1.0
	2. initial-scale=1.0 宽度一致比例是1.0
	3. user-scalable=no 不允许用户自行缩放（yes，no 1,0）
	标准适配方案：
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
	meta:vp + tab 快捷方式

非主流的适配方案：
	1.页面的真实尺寸会比在设备的上尺寸要大几倍
	2.假设设备是iphone4 -> 320px -> 网页尺寸 640px
	3.缩放操作，有2倍的有3倍和屏幕像素比有关系
	4.什么是屏幕像素（物理像素，像素点） px(页面的尺寸单位)
	5.物理像素是设备显示屏的最小可视颗粒的大小以前的手机（直板手机）
	6.现在有高清显示屏视网膜屏 retina屏
	7.显示的效果就提高了更细腻，但是在显示同等质量的图片的时候（模糊效果）

	8.在屏幕像素比（一个px宽的屏幕能放几个物理像素）高的设备图片（非矢量）显示会模糊
	9.提高网页的清晰度根据屏幕的像素比来缩放网页
	10.但是这样的适配方案成本非常高
	11.一般的企业开发当中使用的还是标准化设置

	在高清显示屏当中：图片可能会失真（模糊）

不建议在移动端使用jquery

1.可以使用jquery,但是不建议
	2.jquery 做了很多桌面浏览器的兼容问题特别是IE，但是移动端没有IE浏览器
	3.主流的浏览器：谷歌火狐（2016年停止了维护和更新） safari浏览器百度 360 qq ...
	4.特点：内核基本上都是 webkit 或者 blink 兼容 -webkit-
	5.使用H5的api 或者说使用一个叫做： zepto.js 的库（基于高版本浏览器开发）

box-sizing
```
 
```
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
6. <title>Title</title>
7. <style>
8. *{
9. margin: 0;
10. padding: 0;
11. }
12. .box{
13. width: 100%;
14. border: 20px solid pink;
15. height: 1000px;
16. /*防止内容溢出不出现滚动条提供用户体验*/
17. box-sizing: border-box;
18. }
19. </style>
20. </head>
21. <body>
22. 
28. <div class="box"></div>
29. </body>
30. </html>
点击高亮
```
 
```
2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
7. <title>Title</title>
8. <style>
9. a{
10. display: block;
11. width: 100px;
12. height: 100px;
13. /*轻击轻触*/
14. -webkit-tap-highlight-color: red;
16. }
17. </style>
18. </head>
19. <body>
20. <a href="javascript:;"></a>
21. </body>
22. </html>
一般移动端的css默认配置
```
 
```
1. /*=======reset css========*/
2. *,
3. *::before,
4. *::after{
5. /*所有的标签，和伪元素都选中*/
6. margin: 0;
7. padding: 0;
8. /*移动端常用布局是非固定像素*/
9. box-sizing: border-box;
10. -webkit-box-sizing: border-box;
11. /*点击高亮效果的清除*/
12. tap-highlight-color: transparent;
13. -webkit-tap-highlight-color: transparent;
14. }
15. body{
16. font-size: 14px;
17. font-family: "Microsoft YaHei",sans-serif;
18. color: #333;
19. }
20. ul,ol{
21. list-style: none;
22. }
23. a{
24. text-decoration: none;
25. color: #333;
26. }
27. input,textarea{
28. border: none;
29. outline: none;
30. /*不允许改变尺寸*/
31. resize: none;
32. /*元素的外观 none没有任何样式*/
33. -webkit-appearance: none;
34. }
35. /*=======common css========*/
36. .f_left{
37. float: left;
38. }
39. .f_right{
40. float: right;
41. }
42. .clearFix::before,
43. .clearFix::after{
44. content: "";
45. display: block;
46. visibility: hidden;
47. height: 0;
48. line-height: 0;
49. clear: both;
50. }
51. .m_l10{
52. margin-left:10px;
53. }
54. .m_r10{
55. margin-right:10px;
56. }
57. .m_t10{
58. margin-top:10px;
59. }
60. .m_b10{
61. margin-bottom:10px;
62. }
63. /*使用精灵图的公用样式*/
64. [class^="icon_"],[class*=" icon_"]{
65. background-repeat: no-repeat;
66. background-image: url("../images/sprites.png");
67. background-size: 200px 200px;
68. }
图片下间隙
```
 
```
2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <title>Title</title>
7. <style>
8. body{
9. /*font-size: 0px;*/
10. }
11. /*img{
12. display: block;
13. }*/
14. img{
15. vertical-align: middle;
16. }
17. </style>
18. </head>
19. <body>
20. <div>
21. <img src="../images/l1.jpg" alt="">
22. </div>
23. </body>
24. </html>

解释touch:
	1. touch是移动端的触摸事件而且是一组事件
	2. touchstart 当手指触摸屏幕的时候触发
	3. touchmove 当手指在屏幕来回的滑动时候触发
	4. touchend 当手指离开屏幕的时候触发
	5. touchcancel 当被迫终止滑动的时候触发（来电，弹消息）
	6. 利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件

使用touch:
	1.绑定事件：box.addEventListener('touchstart',function () { });
	2.事件对象：
	名字：TouchList------触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合
	changedTouches 改变后的触摸点集合
	targetTouches 当前元素的触发点集合
	touches 页面上所有触发点集合
	3.触摸点集合在每个事件触发的时候会不会去记录触摸
	changedTouches 每个事件都会记录
	targetTouches，touches 在离开屏幕的时候无法记录触摸点
	4.分析滑动实现的原理：
	4.1 就是让触摸的元素随着手指的滑动做位置的改变
	4.2 位置的改变：需要当前手指的坐标
	4.3 在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
	4.4 clientX clientY 基于浏览器窗口（视口）
	4.4 pageX pageY 基于页面（视口）
	4.4 screenX screenY 基于屏幕

手势事件
```
 
```
1. <script>
2. window.onload = function () {
3. /*1. 理解移动端的手势事件*/
4. /*2. swipe swipeLeft swipeRight swipeUp swipeDown */
5. /*3. 左滑和右滑手势怎么实现*/
6. var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
7. /*手势的条件*/
8. /*1.必须滑动过*/
9. /*2.滑动的距离50px*/
10. var isMove = false;
11. var startX = 0;
12. var distanceX = 0;
13. dom.addEventListener('touchstart',function (e) {
14. startX = e.touches[0].clientX;
15. });
16. dom.addEventListener('touchmove',function (e) {
17. isMove = true;
18. var moveX = e.touches[0].clientX;
19. distanceX = moveX - startX;
20. });
21. dom.addEventListener('touchend',function (e) {
22. /*滑动结束*/
23. if(isMove && Math.abs(distanceX) > 50){
24. if(distanceX > 0){
25. rightCallback && rightCallback.call(this,e);
26. }else{
27. leftCallback && leftCallback.call(this,e);
28. }
29. }
30. /*重置参数*/
31. isMove = false;
32. startX = 0;
33. distanceX = 0;
34. });
35. }
36. bindSwipeEvent(document.querySelector('.box'),function (e) {
37. console.log(this);
38. console.log(e);
39. console.log('左滑手势');
40. },function (e) {
41. console.log(this);
42. console.log(e);
43. console.log('右滑手势');
44. });
46. }
47. </script>

tap事件

1. tap事件轻击轻触（响应速度快）
	2. 移动端也有click事件（在移动为了区分是滑动还是点击，click点击延时300ms）
	3. 影响用户体验响应太慢了。
	4. 解决方案：
	4.1 使用tap事件（不是移动端原生事件，通过touch相关事件衍生过来）（zepto.js tap事件）了解其原理
	4.2 使用一个叫：fastclick.js 提供移动端click响应速度的
	4.2.1 下载：https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
	4.2.2 使用：

<script>
/*当页面的dom元素加载完成*/
document.addEventListener('DOMContentLoaded', function() {
/*初始化方法*/
FastClick.attach(document.body);
}, false);
/*正常使用click事件就可以了*/
</script>
<script>
window.onload = function () {
/*使用tap事件*/
/*1. 响应的速度比click要快 150ms */
/*2. 不能滑动*/
var bindTapEvent = function (dom, callback) {
/*事件的执行顺序*/
/*在谷歌浏览器模拟看不到300ms的效果*/
/*在真机上面才能看看到延时效果*/
var startTime = 0;
var isMove = false;
dom.addEventListener('touchstart', function () {
//console.log('touchstart');
startTime = Date.now();
/*Date.now();*/
});
dom.addEventListener('touchmove', function () {
//console.log('touchmove');
isMove = true;
});
dom.addEventListener('touchend', function (e) {
//console.log('touchend');
console.log((Date.now() - startTime));
if ((Date.now() - startTime) < 150 && !isMove) {
callback && callback.call(this, e);
}
startTime = 0;
isMove = false;
});
/*dom.addEventListener('click',function () {
//console.log('click');
});*/
}
bindTapEvent(document.querySelector('.box'), function (e) {
console.log(this);
console.log(e);
console.log('tap事件')
});
}
</script>

两栏自适应
```
 
```
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Title</title>
6. <style>
7. body{
8. margin: 0;
9. padding: 0;
10. }
11. .box1{
12. float: left;
13. width: 100px;
14. height: 100px;
15. background: pink;
16. }
17. .box2{
18. /*让这个元素绝对绝缘 bfc*/
19. /*不让其他浮动元素影响自己*/
20. /*不让自己的浮动去影响别的元素*/
21. overflow: hidden;
22. }
23. </style>
24. </head>
25. <body>
26. 
27. 
28. <div class="box1"></div>
29. <div class="box2">
30. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
31. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
32. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
33. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
34. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
35. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
36. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
37. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
38. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
39. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
40. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
41. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
42. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
43. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
44. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
45. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
46. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
47. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
48. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
49. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
50. 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
51. </div>
52. </body>
53. </html>
响应式开发
• 什么是响应式布局？

• 在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。

• 通常的做法是针对移动端单独做一套特定的版本。

• 但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。
• 那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。
大势所趋
• 为什么说是大势所趋呢？

• 现在的移动设备屏幕越来越大。

• 越来越多的设计师也采用了这种设计。
• 在新建站的一些网站现在普遍采用的响应式开发。
响应式的原理
• CSS3中的Media Query（媒体查询）

• 通过查询screen的宽度来指定某个宽度区间的网页布局。

• 超小屏幕（移动设备） 768px以下

• 小屏设备 768px-992px

• 中等屏幕 992px-1200px
• 宽屏设备 1200px以上

对比移动web开发

开发方式

移动web开发+PC开发

响应式开发

应用场景

一般在已经有PC端的网站，开发移动站的时候，只需单独开发移动端。

针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活。

开发

针对性强，开发效率高。

兼容各种终端，效率低，

适配

只适配移动设备，pad上体验相对较差。

可以适配各种终端

效率

代码简洁，加载快。

代码相对复杂，加载慢。

bootstrap 框架当下最流行的前端UI框架（有预制界面组件）。
bootstrap简介
• 作者：Twitter 公司两位前端工程师（mark otto && jacob thornton）在2011发起开发完成的。

• 特点：组件简洁大方，代码规范精简，界面自定义性强。
• 目的：提高web开发效率。
bootstrap官网
• http://getbootstrap.com/
• 中文官网 http://www.bootcss.com/
为什么使用它
• 优点：

• 有自己的生态圈，不断的更新迭代。

• 提供了一套简洁、直观、强悍的组件。

• 标准化的html+css编码规范。

• 让开发更简单，提高了开发的效率。
• 注意：虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式。
bootstrap版本
• 2.x.x 停止维护

优点：兼容性好

缺点：代码不够简洁，功能不够完善。

• 3.x.x 目前使用最多

稳定，但是放弃了IE6-IE7。对IE8支持但是界面效果不好。

偏向用于开发响应式布局、移动设备优先的 WEB 项目。

• 4.x.x 测试阶段
更偏响应式，移动设备。
媒体查询
```
 
```
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Title</title>
6. <style>
7. body{
8. margin: 0;
9. padding: 0;
10. }
11. .container{
12. width: 1000px;
13. margin: 0 auto;
14. height: 1000px;
15. background: pink;
16. }
17. /*使用媒体查询能针对不同屏幕区间设置不同的布局和样式*/
18. /*怎么使用媒体查询：关于媒体查询 @media */
19. /*语法： @media screen and (max-width: 768px) and (min-width: 320px){属性样式}*/
21. @media screen and (max-width: 768px) {
22. /*1. 在超小屏设备的时候 768px以下当前容器的宽度100% 背景蓝色*/
23. .container{
24. width: 100%;
25. background: blue;
26. }
27. }
28. @media screen and (min-width: 768px) and (max-width: 992px){
29. /*2. 在小屏设备的时候 768px-992px 当前容器的宽度750px 背景绿色*/
30. .container{
31. width: 750px;
32. background: green;
33. }
34. }
35. @media screen and (min-width: 992px) and (max-width: 1200px){
36. /*3. 在中屏设备的时候 992px-1200px 当前容器的宽度970px 背景红色*/
37. .container{
38. width: 970px;
39. background: red;
40. }
41. }
42. @media screen and (min-width: 1200px){
43. /*4. 在大屏设备的时候 1200px以上当前容器的宽度1170px 背景黄色*/
44. .container{
45. width: 1170px;
46. background: yellow;
47. }
48. }
49. </style>
50. </head>
51. <body>
52. 
59. <div class="container"></div>
60. </body>
61. </html>
基本模版
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. </head>
29. <body>
30. 
31. 
32. <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
33. Launch demo modal
34. </button>
36. 
37. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
38. <div class="modal-dialog" role="document">
39. <div class="modal-content">
40. <div class="modal-header">
41. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
42. <h4 class="modal-title" id="myModalLabel">Modal title</h4>
43. </div>
44. <div class="modal-body">
45. ...
46. </div>
47. <div class="modal-footer">
48. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
49. <button type="button" class="btn btn-primary">Save changes</button>
50. </div>
51. </div>
52. </div>
53. </div>
57. 
58. 
59. <script src="../lib/jquery/jquery.min.js"></script>
60. 
61. 
62. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
63. </body>
64. </html>

normalize&reset区别

共同点：都是重置样式库，增强浏览器的表现一致性
	不同点：
	举个例子：ul
	reset.css list-style:none ---因为需求
	normalize.css 不会重置ul样式 ---本身已经在每个浏览器表现一致的元素

	一句话：都是增强浏览器的表现一致性但是normalize不会重置已经一致的元素

基本样式
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. <style>
29. .container{
30. height: 100px;
31. background: pink;
32. }
33. .container-fluid{
34. height: 100px;
35. background: hotpink;
36. }
37. </style>
38. </head>
39. <body>
40. 
41. <div class="container">
43. </div>
44. 
45. <div class="container-fluid">
47. </div>
49. 
50. 
51. <script src="../lib/jquery/jquery.min.js"></script>
52. 
53. 
54. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
55. </body>
56. </html>
栅格系统
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. <style>
29. .container{
30. height: 100px;
31. background: pink;
32. }
33. .container > .row{
34. height: 50px;
35. background: green;
36. }
37. .container > .row > div{
38. height: 25px;
39. border: 1px solid #ccc;
40. }
41. </style>
42. </head>
43. <body>
44. 
45. <div class="container">
46. 
47. 
48. 
49. <div class="row">
50. 
51. 
60. <div class="col-xs-4"></div>
61. <div class="col-xs-4"></div>
62. <div class="col-xs-4"></div>
63. </div>
64. </div>
65. 
66. 
67. <script src="../lib/jquery/jquery.min.js"></script>
68. 
69. 
70. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
71. </body>
72. </html>
响应式栅格系统
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. <style>
29. .container{
30. height: 100px;
31. background: pink;
32. }
33. .container > .row{
34. height: 50px;
35. background: green;
36. }
37. .container > .row > div{
38. height: 25px;
39. border: 1px solid #ccc;
40. }
41. </style>
42. </head>
43. <body>
44. 
50. <div class="container">
51. <div class="row">
52. <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
53. <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
54. <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
55. <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
56. <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
57. <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
58. </div>
59. </div>
60. 
61. 
62. <script src="../lib/jquery/jquery.min.js"></script>
63. 
64. 
65. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
66. </body>
67. </html>
栅格系统-扩展功能
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. <style>
29. .container{
30. height: 100px;
31. background: pink;
32. }
33. .container > .row{
34. height: 50px;
35. background: green;
36. }
37. .container > .row > div{
38. height: 25px;
39. border: 1px solid #ccc;
40. }
41. .container > .row > div > .row > div{
42. height: 10px;
43. border: 1px solid red;
44. }
45. </style>
46. </head>
47. <body>
48. <div class="container">
49. <div class="row">
50. 
51. <div class="col-xs-4">
52. <div class="row">
53. <div class="col-xs-6"></div>
54. <div class="col-xs-6"></div>
55. </div>
56. </div>
57. 
58. <div class="col-xs-4">
59. <div class="row">
60. <div class="col-xs-3"></div>
61. <div class="col-xs-6 col-xs-offset-1"></div>
62. </div>
63. </div>
64. 
65. <div class="col-xs-4">
66. <div class="row">
67. 
71. <div class="col-xs-3 col-xs-push-9">col-xs-3</div>
72. <div class="col-xs-9 col-xs-pull-3">col-xs-9</div>
73. </div>
74. </div>
75. </div>
76. </div>
77. <button class="btn btn-default btn-primary btn-lg btn-block">按钮</button>
78. 
79. 
80. <script src="../lib/jquery/jquery.min.js"></script>
81. 
82. 
83. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
84. </body>
85. </html>
响应式工具-bootstrap
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. <style>
29. .container{
30. height: 100px;
31. background: pink;
32. }
33. .container-fluid{
34. height: 100px;
35. background: hotpink;
36. }
37. </style>
38. </head>
39. <body>
40. 
55. 
56. <div class="box hidden-md hidden-xs">内容</div>
57. 
58. 
59. <script src="../lib/jquery/jquery.min.js"></script>
60. 
61. 
62. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
63. </body>
64. </html>
导航条
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. </head>
29. <body>
30. 
31. <nav class="navbar navbar-default">
32. 
33. <div class="container">
34. 
35. <div class="navbar-header">
36. 
37. 
46. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
47. <span class="icon-bar"></span>
48. <span class="icon-bar"></span>
49. <span class="icon-bar"></span>
50. </button>
51. 
52. <a class="navbar-brand" href="#">Brand</a>
53. </div>
54. 
55. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
56. 
57. <ul class="nav navbar-nav">
58. <li class="active"><a href="#">Link</a></li>
59. <li><a href="#">Link</a></li>
60. <li><a href="#">Link</a></li>
61. <li><a href="#">Link</a></li>
62. <li><a href="#">Link</a></li>
63. <li><a href="#">Link</a></li>
64. </ul>
65. 
66. <ul class="nav navbar-nav navbar-right">
67. <li><a href="#">Link</a></li>
68. </ul>
69. </div>
70. </div>
71. </nav>
72. 
73. 
74. <script src="../lib/jquery/jquery.min.js"></script>
75. 
76. 
77. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
78. </body>
79. </html>
collapse组件
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. </head>
29. <body>
30. <button data-toggle="collapse" data-target=".box">切换</button>
31. <a href=".box" data-toggle="collapse" >切换</a>
32. <div class="box">
33. 内容<br>
34. 内容<br>
35. 内容<br>
36. 内容<br>
37. 内容<br>
38. </div>
39. 
40. 
41. <script src="../lib/jquery/jquery.min.js"></script>
42. 
43. 
44. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
45. </body>
46. </html>
轮播图
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. </head>
29. <body>
30. 
31. 
32. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
33. 
34. <ol class="carousel-indicators">
35. 
40. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
41. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
42. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
43. </ol>
44. 
45. 
46. <div class="carousel-inner">
47. 
48. <div class="item active">
49. 
50. <img src="..." alt="...">
51. 
52. <div class="carousel-caption">
53. ...
54. </div>
55. </div>
56. <div class="item">
57. <img src="..." alt="...">
58. <div class="carousel-caption">
59. ...
60. </div>
61. </div>
62. ...
63. </div>
65. 
66. 
71. <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
72. <span class="glyphicon glyphicon-chevron-left"></span>
73. </a>
74. <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
75. <span class="glyphicon glyphicon-chevron-right"></span>
76. </a>
77. </div>
78. 
79. 
80. <script src="../lib/jquery/jquery.min.js"></script>
81. 
82. 
83. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
84. </body>
85. </html>
轮播图-PC端
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. <style>
29. .pc_imgBox{
30. display: block;
31. height: 400px;
32. width: 100%;
33. background-size: cover;
34. background-position: center;
35. background-repeat: no-repeat;
36. }
37. </style>
38. </head>
39. <body>
40. 
44. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
45. <ol class="carousel-indicators">
46. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
47. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
48. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
49. <li data-target="#carousel-example-generic" data-slide-to="3"></li>
50. </ol>
51. <div class="carousel-inner">
52. <div class="item active">
53. <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_01_2000x410.jpg)"></a>
54. </div>
55. <div class="item">
56. <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
57. </div>
58. <div class="item">
59. <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_03_2000x410.jpg)"></a>
60. </div>
61. <div class="item">
62. <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_04_2000x410.jpg)"></a>
63. </div>
64. </div>
65. <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
66. <span class="glyphicon glyphicon-chevron-left"></span>
67. </a>
68. <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
69. <span class="glyphicon glyphicon-chevron-right"></span>
70. </a>
71. </div>
72. 
73. 
74. <script src="../lib/jquery/jquery.min.js"></script>
75. 
76. 
77. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
78. </body>
79. </html>
轮播图-M端
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. <style>
29. .m_imgBox{
30. display: block;
31. width: 100%;
32. }
33. .m_imgBox img{
34. display: block;
35. width: 100%;
36. }
37. </style>
38. </head>
39. <body>
40. 
43. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
44. <ol class="carousel-indicators">
45. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
46. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
47. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
48. <li data-target="#carousel-example-generic" data-slide-to="3"></li>
49. </ol>
50. <div class="carousel-inner">
51. <div class="item active">
52. <a href="#" class="m_imgBox"><img src="../images/slide_01_640x340.jpg" alt=""></a>
53. </div>
54. <div class="item">
55. <a href="#" class="m_imgBox"><img src="../images/slide_02_640x340.jpg" alt=""></a>
56. </div>
57. <div class="item">
58. <a href="#" class="m_imgBox"><img src="../images/slide_03_640x340.jpg" alt=""></a>
59. </div>
60. <div class="item">
61. <a href="#" class="m_imgBox"><img src="../images/slide_04_640x340.jpg" alt=""></a>
62. </div>
63. </div>
64. <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
65. <span class="glyphicon glyphicon-chevron-left"></span>
66. </a>
67. <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
68. <span class="glyphicon glyphicon-chevron-right"></span>
69. </a>
70. </div>
71. 
72. 
73. <script src="../lib/jquery/jquery.min.js"></script>
74. 
75. 
76. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
77. </body>
78. </html>
轮播图-响应式
```
 
```
1. 
2. <!DOCTYPE html>
3. 
4. <html lang="zh-CN">
5. <head>
6. 
7. <meta charset="utf-8">
8. 
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. 
11. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
12. 
13. 
15. <title>title</title>
17. 
18. <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
19. 
20. 
21. 
22. 
23. 
24. 
28. <style>
29. .pc_imgBox{
30. display: block;
31. height: 400px;
32. width: 100%;
33. background-size: cover;
34. background-position: center;
35. background-repeat: no-repeat;
36. }
37. .m_imgBox{
38. display: block;
39. width: 100%;
40. }
41. .m_imgBox img{
42. display: block;
43. width: 100%;
44. }
45. </style>
46. </head>
47. <body>
50. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
51. <ol class="carousel-indicators">
52. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
53. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
54. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
55. <li data-target="#carousel-example-generic" data-slide-to="3"></li>
56. </ol>
57. <div class="carousel-inner">
58. <div class="item active">
59. <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_01_2000x410.jpg)"></a>
60. <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_01_640x340.jpg" alt=""></a>
61. </div>
62. <div class="item">
63. <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
64. <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_02_640x340.jpg" alt=""></a>
65. </div>
66. <div class="item">
67. <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_03_2000x410.jpg)"></a>
68. <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_03_640x340.jpg" alt=""></a>
69. </div>
70. <div class="item">
71. <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_04_2000x410.jpg)"></a>
72. <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_04_640x340.jpg" alt=""></a>
73. </div>
74. </div>
75. <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
76. <span class="glyphicon glyphicon-chevron-left"></span>
77. </a>
78. <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
79. <span class="glyphicon glyphicon-chevron-right"></span>
80. </a>
81. </div>
83. 
84. 
85. <script src="../lib/jquery/jquery.min.js"></script>
86. 
87. 
88. <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
89. </body>
90. </html>
媒体查询-扩展
```
 
```
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Title</title>
6. <style>
7. body{
8. margin: 0;
9. padding: 0;
10. }
11. .container{
12. width: 100%;
13. margin: 0 auto;
14. height: 1000px;
15. background: blue;
16. }
19. @media (min-width: 768px) {
20. .container{
21. width: 750px;
22. background: green;
23. }
24. }
26. @media (min-width: 992px) {
27. .container{
28. width: 970px;
29. background: red;
30. }
31. }
33. @media (min-width: 1200px){
34. .container{
35. width: 1170px;
36. background: yellow;
37. }
38. }
41. </style>
42. </head>
43. <body>
44. 
51. <div class="container"></div>
52. </body>
53. </html>
阴影
```
 
```
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Title</title>
6. <style>
7. .box{
8. width: 200px;
9. height: 200px;
10. margin: 100px auto;
11. box-shadow: 0 0 10px 10px hotpink inset;
12. }
13. </style>
14. </head>
15. <body>
16. <div class="box"></div>
17. </body>
18. </html>
总结
• 移动web开发和响应式开发都是现在主流的开发模式。

• 使用的都是流式布局，来适配不同设备。
• 由于终端设备的多样化，新建站的站点会优先用响应式来开发。