前端学习之路---移动端web开发（一）

最新推荐文章于 2024-05-14 16:13:23 发布
最新推荐文章于 2024-05-14 16:13:23 发布
阅读量1.9k 收藏 13
点赞数 1
分类专栏： 前端开发 web前端 文章标签： web 前端 web移动开发 web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40707650/article/details/82919263
版权

  • 移动端开发分为2大块：                              下一篇   移动端web开发（二）                           1、web网页开发  2、app开发                                                                                                这里主要倾向于web开发讲解，app的话后面会讲到 

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

    满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。

  6. 适配设置：
     如果任何设置都没有，默认走的就是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 快捷方式
  7. 非主流的适配方案：
     1.页面的真实尺寸会比在设备的上尺寸要大几倍
     2.假设设备是iphone4 -> 320px -> 网页尺寸 640px
     3.缩放操作，有2倍的 有3倍 和屏幕像素比有关系
     4.什么是屏幕像素（物理像素，像素点） px(页面的尺寸单位)
     5.物理像素 是设备显示屏的最小可视颗粒的大小 以前的手机（直板手机）
     6.现在有 高清显示屏 视网膜屏 retina屏
     7.显示的效果就提高了更细腻，但是在显示同等质量的图片的时候（模糊效果）
      
     8.在屏幕像素比（一个px宽的屏幕能放几个物理像素）高的设备 图片（非矢量）显示会模糊
     9.提高网页的清晰度 根据屏幕的像素比 来缩放网页
     10.但是这样的适配方案成本非常高
     11.一般的企业开发当中使用的还是标准化设置
      
     在高清显示屏当中：图片可能会失真（模糊）
  8. 不建议在移动端使用jquery                                                                                                                                                          
    1.可以使用jquery,但是不建议
     2.jquery 做了很多桌面浏览器的兼容问题 特别是IE，但是移动端没有IE浏览器
     3.主流的浏览器：谷歌 火狐（2016年停止了维护和更新） safari浏览器 百度 360 qq ...
     4.特点：内核基本上都是 webkit 或者 blink 兼容 -webkit-
     5.使用H5的api 或者说使用一个 叫做： zepto.js 的库（基于高版本浏览器开发）
  9. box-sizing 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            border: 20px solid pink;
            height: 1000px;
            /*防止内容溢出  不出现滚动条  提供用户体验*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<!--
1. 移动端以流式布局为主
2. 百分比布局
3. 非固定像素布局
4. 无法准确计算容器的尺寸
-->
<div class="box"></div>
</body>
</html>

     

  10. 点击高亮

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>Title</title>
    <style>
        a{
            display: block;
            width: 100px;
            height: 100px;
            /*轻击 轻触*/
            -webkit-tap-highlight-color: red;

        }
    </style>
</head>
<body>
<a href="javascript:;"></a>
</body>
</html>

     

  11. 一般移动端的css默认配置

    /*=======reset css========*/
*,
*::before,
*::after{
    /*所有的标签，和伪元素都选中*/
    margin: 0;
    padding: 0;
    /*移动端常用布局是非固定像素*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮效果的清除*/
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}
body{
    font-size: 14px;
    font-family: "Microsoft YaHei",sans-serif;
    color: #333;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333;
}
input,textarea{
    border: none;
    outline: none;
    /*不允许改变尺寸*/
    resize: none;
    /*元素的外观  none没有任何样式*/
    -webkit-appearance: none;
}
/*=======common css========*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.clearFix::before,
.clearFix::after{
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
}
.m_l10{
    margin-left:10px;
}
.m_r10{
    margin-right:10px;
}
.m_t10{
    margin-top:10px;
}
.m_b10{
    margin-bottom:10px;
}
/*使用精灵图的公用样式*/
[class^="icon_"],[class*=" icon_"]{
    background-repeat: no-repeat;
    background-image: url("../images/sprites.png");
    background-size: 200px 200px;
}

     

  12. 图片下间隙

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*font-size: 0px;*/
        }
        /*img{
            display: block;
        }*/
        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div>
    <img src="../images/l1.jpg" alt="">
</div>
</body>
</html>

     

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

     

  14. 使用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 基于屏幕
  15. 手势事件 
    <script>
    window.onload = function () {
        /*1. 理解移动端的手势事件*/
        /*2. swipe swipeLeft  swipeRight swipeUp swipeDown */
        /*3. 左滑和右滑手势怎么实现*/
        var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
            /*手势的条件*/
            /*1.必须滑动过*/
            /*2.滑动的距离50px*/
            var isMove = false;
            var startX = 0;
            var distanceX = 0;
            dom.addEventListener('touchstart',function (e) {
                startX = e.touches[0].clientX;
            });
            dom.addEventListener('touchmove',function (e) {
                isMove = true;
                var moveX = e.touches[0].clientX;
                distanceX = moveX - startX;
            });
            dom.addEventListener('touchend',function (e) {
                /*滑动结束*/
                if(isMove && Math.abs(distanceX) > 50){
                    if(distanceX > 0){
                        rightCallback && rightCallback.call(this,e);
                    }else{
                        leftCallback && leftCallback.call(this,e);
                    }
                }
                /*重置参数*/
                isMove = false;
                startX = 0;
                distanceX = 0;
            });
        }
        bindSwipeEvent(document.querySelector('.box'),function (e) {
            console.log(this);
            console.log(e);
            console.log('左滑手势');
        },function (e) {
            console.log(this);
            console.log(e);
            console.log('右滑手势');
        });

    }
</script>

     

  16. 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>

     

  17. 两栏自适应

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
        }
        .box2{
            /*让这个元素绝对绝缘  bfc*/
            /*不让其他浮动元素影响自己*/
            /*不让自己的浮动去影响别的元素*/
            overflow: hidden;
        }
    </style>
</head>
<body>
<!--1.小技巧-->
<!--2.文本环绕-->
<div class="box1"></div>
<div class="box2">
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>

     

  18. 响应式开发

    • 什么是响应式布局？

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

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

    • 但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。

    • 那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。
  19. 大势所趋

    • 为什么说是大势所趋呢？

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

    • 越来越多的设计师也采用了这种设计。

    • 在新建站的一些网站现在普遍采用的响应式开发。
  20. 响应式的原理

    • CSS3中的Media Query（媒体查询）

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

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

    • 小屏设备    768px-992px

    • 中等屏幕    992px-1200px

    • 宽屏设备    1200px以上
  21. 对比移动web开发

     

    开发方式

     

    移动web开发+PC开发

     

    响应式开发

     应用场景

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

     

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

                       

    开发

    针对性强，开发效率高。

     

    兼容各种终端，效率低，

     

     

    适配

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

    可以适配各种终端

     

    效率

     

    代码简洁，加载快。

     

    代码相对复杂，加载慢。

  22. bootstrap 框架                                                                                                                                                                        当下最流行的前端UI框架（有预制界面组件）。
  23. bootstrap简介

    • 作者：Twitter  公司两位前端工程师（mark otto && jacob thornton）在2011发起开发完成的。

    • 特点：组件简洁大方，代码规范精简，界面自定义性强。

    • 目的：提高web开发效率。
  24. bootstrap官网

    • http://getbootstrap.com/

    • 中文官网  http://www.bootcss.com/
  25. 为什么使用它

    • 优点：

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

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

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

    • 让开发更简单，提高了开发的效率。

    • 注意：虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式。
  26. bootstrap版本

    • 2.x.x  停止维护

                 优点：兼容性好

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

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

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

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

    • 4.x.x  测试阶段

        更偏响应式，移动设备。
  27. 媒体查询 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 1000px;
            margin: 0 auto;
            height: 1000px;
            background: pink;
        }
        /*使用媒体查询能针对不同屏幕区间设置不同的布局和样式*/
        /*怎么使用媒体查询：关于媒体查询 @media */
        /*语法： @media screen and (max-width: 768px) and (min-width: 320px){属性样式}*/

        @media screen and (max-width: 768px) {
            /*1. 在超小屏设备的时候 768px以下      当前容器的宽度100%     背景蓝色*/
            .container{
                width: 100%;
                background: blue;
            }
        }
        @media screen and (min-width: 768px) and (max-width: 992px){
            /*2. 在小屏设备的时候   768px-992px    当前容器的宽度750px    背景绿色*/
            .container{
                width: 750px;
                background: green;
            }
        }
        @media screen and (min-width: 992px) and (max-width: 1200px){
            /*3. 在中屏设备的时候   992px-1200px   当前容器的宽度970px    背景红色*/
            .container{
                width: 970px;
                background: red;
            }
        }
        @media screen and (min-width: 1200px){
            /*4. 在大屏设备的时候   1200px以上      当前容器的宽度1170px   背景黄色*/
            .container{
                width: 1170px;
                background: yellow;
            }
        }
    </style>
</head>
<body>
<!--
响应式容器：
1. 在超小屏设备的时候 768px以下      当前容器的宽度100%     背景蓝色
2. 在小屏设备的时候   768px-992px    当前容器的宽度750px    背景绿色
3. 在中屏设备的时候   992px-1200px   当前容器的宽度970px    背景红色
4. 在大屏设备的时候   1200px以上      当前容器的宽度1170px   背景黄色
-->
<div class="container"></div>
</body>
</html>

     

  28. 基本模版

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--TODO-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>



<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  29.  normalize&reset区别

    共同点：都是重置样式库，增强浏览器的表现一致性
     不同点：
     举个例子：ul
     reset.css list-style:none ---因为需求
     normalize.css 不会重置ul样式 ---本身已经在每个浏览器表现一致的元素
      
     一句话：都是增强浏览器的表现一致性但是normalize不会重置已经一致的元素
  30. 基本样式 
    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .container{
            height: 100px;
            background: pink;
        }
        .container-fluid{
            height: 100px;
            background: hotpink;
        }
    </style>
</head>
<body>
    <!--响应式布局容器-->
    <div class="container">

    </div>
    <!--流式布局容器-->
    <div class="container-fluid">

    </div>

<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  31. 栅格系统

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .container{
            height: 100px;
            background: pink;
        }
        .container > .row{
            height: 50px;
            background: green;
        }
        .container > .row > div{
            height: 25px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<!--响应式布局容器-->
<div class="container">
    <!--栅格系统：其实就是行和列的布局，网格状布局-->
    <!--行：row-->
    <!-- .container容器默认有15px的左右内间距  .row 填充父容器的15px的左右内间距   margin-left,margin-right -15px拉伸 -->
    <div class="row">
        <!--列：col-*-*  *不确定（参数） -->
        <!--
            col：列样式
            第一个*：屏幕的大小
            大屏设备     lg   大屏设备以上生效包含本身
            中屏设备     md   中屏设备以上生效包含本身
            小屏设备     sm   小屏设备以上生效包含本身
            超小屏设备   xs   超小屏设备以上生效包含本身
            第二个*：每一行的分等份，默认分成12等份 ，数字代表的是占多少份
        -->
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
    </div>
</div>
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  32. 响应式栅格系统

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .container{
            height: 100px;
            background: pink;
        }
        .container > .row{
            height: 50px;
            background: green;
        }
        .container > .row > div{
            height: 25px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<!--
大屏设备   让div平均分成6等份
中屏设备   让div平均分成4等份
小屏设备   让div平均分成3等份
超小屏设备 让div平均分成2等份
-->
<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    </div>
</div>
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  33. 栅格系统-扩展功能

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .container{
            height: 100px;
            background: pink;
        }
        .container > .row{
            height: 50px;
            background: green;
        }
        .container > .row > div{
            height: 25px;
            border: 1px solid #ccc;
        }
        .container > .row > div > .row > div{
            height: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <!--栅格嵌套-->
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
        </div>
        <!--列的偏移-->
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-3"></div>
                <div class="col-xs-6 col-xs-offset-1"></div>
            </div>
        </div>
        <!--列的排序-->
        <div class="col-xs-4">
            <div class="row">
                <!--
                push 往后推
                pull 往前拉
                -->
                <div class="col-xs-3 col-xs-push-9">col-xs-3</div>
                <div class="col-xs-9 col-xs-pull-3">col-xs-9</div>
            </div>
        </div>
    </div>
</div>
<button class="btn btn-default btn-primary btn-lg btn-block">按钮</button>
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  34. 响应式工具-bootstrap

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .container{
            height: 100px;
            background: pink;
        }
        .container-fluid{
            height: 100px;
            background: hotpink;
        }
    </style>
</head>
<body>
<!--
大屏设备    显示
中屏设备    隐藏
小屏设备    显示
超小屏设备  隐藏
visible-lg     大屏显示其他隐藏
visible-md
visible-sm
visible-xs
3.2版本以后  建议使用hidden
hidden-lg
hidden-md
hidden-sm
hidden-xs
-->
<!--<div class="box visible-lg visible-sm">内容</div>-->
<div class="box hidden-md hidden-xs">内容</div>
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  35. 导航条

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- navbar 导航模块  navbar-default 默认样式  -->
<nav class="navbar navbar-default">
    <!-- 导航的内容容器 -->
    <div class="container">
        <!-- 包含 商标区域 和 切换按钮（在移动端显示） -->
        <div class="navbar-header">
            <!--切换按钮-->
            <!--
            类名：collapsed  样式
            属性：
            data-toggle="collapse"  申明是什么组件=折叠组件
            data-target="#bs-example-navbar-collapse-1" 控制的目标元素=选择器
            其他：
            aria-expanded="false"  aria-* 代表提供给屏幕阅读器使用的（盲人阅读器）
            class="sr-only" screen read only  代表提供给屏幕阅读器使用的（盲人阅读器）
            -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--商标区域-->
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- 导航连接  表单  其他内容  被切换 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!--默认的导航-->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <!--右对齐的导航-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  36. collapse组件

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<button data-toggle="collapse" data-target=".box">切换</button>
<a href=".box" data-toggle="collapse" >切换</a>
<div class="box">
    内容<br>
    内容<br>
    内容<br>
    内容<br>
    内容<br>
</div>
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  37. 轮播图

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- carousel 轮播图的模块  slide是否加上滑动效果 -->
<!-- data-ride="carousel" 初始化轮播图属性-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 点盒子 -->
    <ol class="carousel-indicators">
        <!--
            data-target="#carousel-example-generic" 控制目标轮播图
            data-slide-to="0" 控制的是轮播图当中的第几张 （索引）
            class="active" 当前选中的点
        -->
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!-- 图片盒子 -->
    <!-- role="listbox" 提供给屏幕阅读器使用 -->
    <div class="carousel-inner">
        <!--需要轮播的容器-->
        <div class="item active">
            <!--图片-->
            <img src="..." alt="...">
            <!--说明-->
            <div class="carousel-caption">
                ...
            </div>
        </div>
        <div class="item">
            <img src="..." alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        ...
    </div>

    <!-- 上一张下一张按钮 -->
    <!--
     data-slide="prev"
     data-slide="next"
     href="#carousel-example-generic"   控制目标轮播图
    -->
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  38. 轮播图-PC端

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .pc_imgBox{
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<!--
需求：高度固定，图片居中，容器铺满
怎么设置不同图片：使用css选择器来设置不太好（html内容动态改变不利于维护）
-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_01_2000x410.jpg)"></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_03_2000x410.jpg)"></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_04_2000x410.jpg)"></a>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  39. 轮播图-M端

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .m_imgBox{
            display: block;
            width: 100%;
        }
        .m_imgBox img{
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>
<!--
需求：宽度自适应，高度自动变化
-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <a href="#" class="m_imgBox"><img src="../images/slide_01_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="m_imgBox"><img src="../images/slide_02_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="m_imgBox"><img src="../images/slide_03_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="m_imgBox"><img src="../images/slide_04_640x340.jpg" alt=""></a>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  40. 轮播图-响应式

    <!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .pc_imgBox{
            display: block;
            height: 400px;
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .m_imgBox{
            display: block;
            width: 100%;
        }
        .m_imgBox img{
            display: block;
            width: 100%;
        }
    </style>
</head>
<body>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_01_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_01_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_02_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_03_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_03_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_04_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_04_640x340.jpg" alt=""></a>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

     

  41. 媒体查询-扩展

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 100%;
            margin: 0 auto;
            height: 1000px;
            background: blue;
        }


        @media (min-width: 768px) {
            .container{
                width: 750px;
                background: green;
            }
        }

        @media (min-width: 992px) {
            .container{
                width: 970px;
                background: red;
            }
        }

        @media (min-width: 1200px){
            .container{
                width: 1170px;
                background: yellow;
            }
        }


    </style>
</head>
<body>
<!--
响应式容器：
1. 在超小屏设备的时候 768px以下      当前容器的宽度100%     背景蓝色
2. 在小屏设备的时候   768px-992px    当前容器的宽度750px    背景绿色
3. 在中屏设备的时候   992px-1200px   当前容器的宽度970px    背景红色
4. 在大屏设备的时候   1200px以上      当前容器的宽度1170px   背景黄色
-->
<div class="container"></div>
</body>
</html>

     

  42. 阴影

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            box-shadow: 0 0 10px 10px hotpink inset;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

     

  43. 总结

    • 移动web开发和响应式开发都是现在主流的开发模式。 

    • 使用的都是流式布局，来适配不同设备。

    • 由于终端设备的多样化，新建站的站点会优先用响应式来开发。
胡哥居士
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（一）移动端前端开发-移动端基础
m0_56517198的博客
02-12 1901
移动web、运行在移动设备上的产品。适配平台：安卓、IOS；H5运行环境分类：移动端浏览器 - 原生APP的webview中（hyBrid模式）- 开发的H5页面镶嵌入到app的webview中显示。移动端屏幕PPI；代表屏幕每英寸的像素数量，即**像素密度**。高PPI屏幕显示的元素会比较精细（看起来会比较小），低PPI屏幕显示的元素相对来说就比较粗糙（看起来会比较大）。DPR设备像素比DPR（devicePixelRatio）是默认缩放为100%的情况下，设备像素和CSS像素的比值。
移动端WEB开发
a_xia_o的博客
02-12 1225
由于 Retina 的出现，对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情。meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽(乔布斯提出的哟)
2024年最全前端基础知识第一章---移动端WEB开发之流式布局(1)，面试简历模板
最新发布
2401_84620191的博客
05-14 948
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
移动前端开发
晴宇
03-16 2096
移动前端的开发笔记
前端学习之移动端
weixin_53105591的博客
07-22 584
前端学习之移动端
移动端Web开发 基础知识
YuLong的博客
09-26 4846
文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图SVG矢量图 移动端Web开发 移动Web开发的两种主流方案，一种是单独制作移动端页面，另一种是制作响应式页面 移动端页面： 单独制作移动端页面的优势和劣势： 单独制作移动端页面，通常的做法是不改变原有的PC端页面，然后针对移动端单独开发出一套特定的版本。 如果是移动设备（iPhone 6/7/8 Plus），则跳转到移动端页面 如果是PC端设备，则跳转到PC端页面 响应式页面： 响应式页面指的是同一页面在不同屏幕尺寸下实现
thebootstrapthemes-portfolio_前端开发_移动端web_移动Web_
09-30
Bootstrap作为一款强大的前端开发工具，以其易用性、灵活性和强大的功能，在移动端Web开发中占据了重要地位。 首先，Bootstrap框架的响应式设计是移动端Web开发的关键。响应式设计允许网页根据不同的设备屏幕尺寸...
基于umi+antd-mobile的移动端项目模板
02-22
总的来说，"基于umi+antd-mobile的移动端项目模板"是一个强大且高效的移动端开发起点，它整合了umi的高级特性与antd-mobile的优秀UI设计，旨在帮助开发者快速构建出符合现代前端标准的移动Web应用。无论是初创项目...
Mobile-Web-Tech:移动端前端开发资料库
07-01
移动端前端开发资料库 基于 mobileTech 上完善，感谢前期，后期名 筛选了一些基础知识和新的知识,去掉了一些老旧的方案.定期更新. 来自的一些移动端经验总结干货 本资料很多引用了指尖上的js系列，在此向作者表示...
03web前端进阶教程-移动端
07-04
"03web前端进阶教程-移动端"是一个专门针对移动设备优化的前端学习资源，旨在帮助开发者掌握移动端的前端开发技能。 【移动端前端开发的重要性】 移动设备的普及使得移动端前端开发成为不可或缺的技能。移动设备的...
WEB前端开发-案例源码汇总（适合初学者）.rar
11-26
【标题】"WEB前端开发-案例源码汇总（适合初学者）.rar"是一个针对初学者的前端开发学习资源包，包含了多个实际的WEB前端开发案例的源代码。这个压缩包旨在帮助初学者通过实例来理解和掌握前端开发的基础知识。 ...
移动端开发之Web App开发
吉帅振博客
06-26 8118
写在前面：本人刚刚接触移动端开发，希望自己的见解能够帮助到他人，不足之处还望提醒。1 移动端开发分类1.1 Native App 原生App开发优点：（1）用户体验好（2）性能稳定（3）操作速度快（4）能够访问本地资源（通讯录，相册）（5）能够设计出色的动效，转场（6）拥有系统级别的贴心通知或提醒（7）用户留存率高缺点：（1）开发成本高（2）维护成本高（3）更新缓慢，根据不同平台，提交–审核–上线...
Html5shiv与Respond JS的作用
weixin_30901729的博客
09-26 337
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]> <scr...
移动端web开发学习归纳
EricYep的博客
10-01 256
1、视口 视口分为三种视口，分别是布局视口，视觉视口和理想视口。 布局视口（layoutviewport）： 大部分移动端默认有一个布局视口，用于解决早些时候pc端界面在手机上的显示问题，这个视口通常情况下分辨率设置为980px，所以pc上的页面大多都能在手机呈现,只是元素看上去很小，一般默认用户可以通过手动缩放页面。 视觉视口（visualviewport）： 通过字面意思的理解就是用户正在看到的网站区域，用户可以通过缩放去操作视觉视口，但是不会影响布局视口，布局视口任然保持原来的宽度。 ...
前端与移动开发学习
sinat_38881141的博客
02-10 2978
1.学习html2.学习css3.学习javascript4.学习webAPI5.学习jquery6.学习PHP7.学习Ajax8.学习H5C39.学习canvas10.学习移动web11.学习Nodejs12.学习Vue13.学习Angular14.学习React15.微信小程序、移动App...
Web前端学习JS篇之“移动端”
weixin_38159245的博客
09-17 225
触摸事件： touchstart:触摸到一个DOM时触发 touchmove:手指在DOM上滑动时触发 touchend:手指在DOM上移开时触发 触摸事件对象TouchEvent： touches:可以检测到屏幕上有几个手指触摸 targetTouches:可以检测到DOM上有几个手指触摸 changedTouches:检测手指是否触摸或离开 拖动事件： 使用上述三个...
移动端web学习总结
weixin_30527323的博客
07-30 443
前言： 　　一直想做一个移动端的阶段性学习总结，但是工作太忙总是加班。现在总算可以抽出一点时间来写一写，把知道的都写下来，这样就算忘掉了，也能很快想起来，不要太机智啊，哈哈哈！ 一、移动端页面常识 1.常见操作系统：Android、IOS、Firefox、os 2.使用内核：webkit（Android、IOS）,greasemonkey（Firefox、os） 3.在移动端上，...
前端学习（285）：移动端简单知识
歌谣的博客
01-01 124
前端（移动端）开发利器Vconsole
weixin_42307129的博客
04-19 4377
Vconsole其实就是一个移动端的前端调试工具，因为手机的浏览器没有像电脑一样的控制台，有时候在真机上查看调试信息用Vconsole就非常的方便、 使用起来也非常简单 1，引入Vconsole （ps:我自己找js文件常用的网址https://www.bootcdn.cn/） <script src="https://cdn.bootcss.com/vConsole/3.3....
Web应用前端安全策略：深度解析与防范方案
"Web前端-Web应用前端安全策略研究及应用.pdf" 随着Web技术的快速发展，Web应用已经成为构建网站和移动应用的主要方式。W3C标准的成熟和浏览器环境的不断优化，使得Web应用不仅在桌面端，也在移动端通过混合应用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值