移动端js事件

移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：

touchstart 手指放到屏幕上时触发
touchmove 手指在屏幕上滑动时触发
touchend 手指离开屏幕时触发
touchcancel 系统取消touch事件时触发，比较少用

移动端一般有三种操作，点击、滑动，拖动，这三种操作一般是组合使用上面的几个事件来完成，所以上面的四个事件很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库

移动端的库

zeptojs

Zepto是一个轻量级的针对现代高级浏览器的javascript库，它与jquery有着类似的api。zepto的一些功能是专门针对移动端浏览器的，它的最初目标是在移动端提供一个精简的类似jquery的js库。基本可以当做jquery用

官网：http://zeptojs.com
zepto中文api：http://www.css88.com/doc/zeptojs_api/

简单案例：




    
    Document
    
    


    这是一个div元素

swiper

swipter.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件（库），一般用来触屏焦点图、触屏整屏滚动等效果。

中文网址：http://www.swiper.com.cn

详情暂略

框架之：bootstrap

简单、直观、强悍的前端开发框架，让web开发更迅速、简单。是目前很受欢迎的前代理人框架之一。bootstrap是基于html、css、javascript的，让书写代码更容易。移动优先，响应式（同时适配pc端、手机、平板）布局开发。基于jquery

ps：对于移动端，往往有个视口的问题，所以需要设置

由于js的阻塞加载，官网上的做法是将js的加载放在文件的尾部，但是由于在实际开发中往往是把头部独立出去供所有页面共享，所以还是写在文件开头部分

官网上面有很多现成的模板，可以直接去copy，非常好用

bootstrap中文网址：http://www.bootcss.com/

下载bootstrap

在这里插入图片描述

我们使用的通常是dist中的文件，其中的fonts是可用的字体图标（把图标当成字来用+）

容器

bootstrap的容器有两种：

contrainer-fluid 流体容器（宽度100%），有15px的padding
container 响应式容器（宽度按照查询的区间来变化的）
- 1170
- 970
- 750
- 100%

bootstrap响应式查询区间

大于1200，宽度就为1170
大于992，小于1200，宽度为970
大于768，小于992，宽度750
小于768的时候，宽度100%

ps：其实就是写好的样式，直接用即可

用法示例：




    
    
    bootstrap文档
    
    
    
    


    流体容器
    



    响应式容器

核心：栅格系统\

基本使用

bootstap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

col-lg- 大于1200排成一行，小于1200分别占一行
col-md- 大于992排成一行，小于1200分别占一行
col-sm- 大于768排成一行，小于768分别占一行
col-xs- 始终排成一行

最后的-跟数字，且必须能被12整除，eg：col-lg-4，表示这个标签占所在行的4/12

以上内容必须包含在row样式类的标签中

ps：row的左右有-15px的margin，以平衡container的15px的padding

用法示例：




    
    
    bootstrap文档
    
    
    
    


    
        
            栅格系统
        
    

         
           
            

            
            col-lg-3
            col-lg-4
            col-lg-2
            col-lg-3
        
        


        
            col-md-4
            col-md-4
            col-md-4
        
        


        
            col-sm-3
            col-sm-3
            col-sm-3
            col-sm-3
        
        


        
            col-xs-5
            col-xs-3
            col-xs-2
            col-xs-2

如果每行的分数超过12，自动换行，如果不足12，左对齐，右空出

可以同时使用多个col-标签：




    
    
    bootstrap文档

列偏移

col-lg-offset-n
col-md-offset-
col-sm-offset-
col-xs-offset-

其中n为要偏移的份数（每行按12等分划分的）

用法见下面的偏移、中间留白与隐藏类的综合应用

bootstrap隐藏类

即：满足了某种条件，就可以将栅格隐藏掉。应用情景：某装饰图片在大图时可以显示出来，而小图时希望将其隐藏掉

分别当其为xs、sm、mg、lg的时候隐藏：

hidden-xs
hidden-sm
hidden-md
hidden-lg

列偏移（以及利用列偏移实现中间留白）以及隐藏类的应用：




    
    
    bootstrap文档
    
    
    
    


    
        
        栅格偏移
        
    

         
        
            
            col-lg-5  col-lg-offset-1
            
            col-lg-5       
        
        



        
            
            
            
            
        
        



        
            1
            2
            3
            4

bootstrap按钮

ps：对于bootstrap中的样式，有很多都是已经写好的，要用的时候直接加在class里面即可（可以多看官方文档以有个大概了解），通常是用a标签和input标签创建

声明按钮：

按钮样式类：

btn-default 默认按钮样式
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link
btn-lg/md/xs 大/中/小按钮
btn-block 宽度是父级宽度100%的按钮，通常移动端会用到
active 当鼠标悬停在该按钮上面时会有响应的效果
disabled 当鼠标悬停在上面时，就不会再变成“手”，即不可点
btn-group 定义按钮组，该标签内可以放多个按钮，内部按钮之间没有margin，且各自的圆角消失，仿佛成了一个按钮，但是仍然是分开点击
btn-group-justified让按钮组占一行

注意：如果用input做group-justified，按钮可能会“缩”在一起，如下：

在这里插入图片描述

为此，可以在按钮组内的每个按钮外面再加一层按钮组

按钮的用法示例：




    
    
    bootstrap文档
    
    
    


    
        
        按钮
        
    

    
        
            
            
            
            
            这是一个div按钮
            a标签按钮
            a标签按钮
            a标签按钮
            a标签按钮
            a标签按钮
            a标签按钮
            a标签按钮
        
        


        
            
            大按钮
            中等按钮
            小按钮
            一般的按钮
        
        


        
            宽度是100%的按钮
        
        


        
            
                
                步骤一
                步骤二
                步骤三
            
        
        


        
            
                
                步骤一
                步骤二
                步骤三

效果图：

在这里插入图片描述

bootstrap表单

声明表单：

form 声明一个表单域（是一个标签），默认是每个标签占一行

表单样式类：

form-inline 内联表单域，可以多个表单排列在一行
form-horizontal 水平排列表单域，需要结合栅格使用
form-group 表单组，包括表单文字和表单控件
form-control 文本输入框，下拉列表控件样式
checkbox checkbox-inline 多选框样式
radio raio-inline 单选框样式
input-group 表单控件组
input-group-addon 表单控件组物件样式
input-group-btn 表单控件组物件为按钮的样式
form-group-lg 大尺寸的表单，加到form-group后面即可
form-group-sm 小尺寸表单，加到form-group后面即可

使用方法：

效果图：

在这里插入图片描述

字体图标

本质是字体，但是看起来是图标，也可以对其设置大小。

使用：直接使用样式的类名即可

注意：字体文件夹要和css文件夹在同一级目录下

示例：

效果图：

在这里插入图片描述

导航条

注意：导航条的写法是用导航条把container包进去，因为导航条一般是左右顶格的

导航条样式类：

navbar 声明导航条

样式类：

navbar-default 声明默认的导航条样式（灰色）
navbar-inverse 声明反白的导航条样式（黑色）
navbar-static-top 去掉导航条的圆角
navbar-fixed-top 固定到顶部的导航条
navbar-fixed-bottom 固定到底部的导航条
navbar-header 申明logo的容器
navbar-brand 针对logo等固定内容的样式
nav navbar-nav 定义导航条中的菜单
navbar-form 定义导航条中的表单
navbar-btn 定义导航条中的按钮
navbar-text 定义导航条中的文本
navbar-left 菜单靠左
navbar-right 菜单靠右

案例：导航栏及其在屏幕缩放时候的显示与隐藏

效果图：

在这里插入图片描述

模态框（弹框）

modal 声明一个模态框
modal-dialog 定义模态框尺寸
modal-lg 定义大尺寸模态框
modal-sm 定义小尺寸模态框（尺寸需要在modal-dialog处添加，即第二层）
modal-header
modal-body
modal-footer

案例：

效果图：

在这里插入图片描述

路径导航

案例：

效果图：

在这里插入图片描述

下拉菜单

dropdown-toggle
dropdown-menu

案例：

效果图：

在这里插入图片描述

巨幕

样式里面包容器，通常是将巨幕设置为背景

...

图片的响应式

img-responsive 声明响应式图片，是一个样式类，直接加给图片即可

移动端库（zepto、swiper）和框架（bootstrap）

移动端js事件

移动端的库

zeptojs

swiper

框架之：bootstrap

容器

核心：栅格系统\

基本使用

栅格系统

列偏移

bootstrap隐藏类

栅格偏移

bootstrap按钮

按钮

bootstrap表单

表单

字体图标

导航条

模态框（弹框）

路径导航

下拉菜单

巨幕

图片的响应式

你可能感兴趣的:(移动端库（zepto、swiper）和框架（bootstrap）)