移动端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
bootstrap按钮
ps：对于bootstrap中的样式，有很多都是已经写好的，要用的时候直接加在class里面即可（可以多看官方文档以有个大概了解），通常是用a标签和input标签创建
声明按钮：
- btn
按钮样式类：
- 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文档
按钮
效果图：
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后面即可
使用方法：
Document
表单
效果图：
字体图标
本质是字体，但是看起来是图标，也可以对其设置大小。
使用：直接使用样式的类名即可
注意：字体文件夹要和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 菜单靠右
案例：导航栏及其在屏幕缩放时候的显示与隐藏
Document
效果图：
模态框（弹框）
- modal 声明一个模态框
- modal-dialog 定义模态框尺寸
- modal-lg 定义大尺寸模态框
- modal-sm 定义小尺寸模态框（尺寸需要在modal-dialog处添加，即第二层）
- modal-header
- modal-body
- modal-footer
案例：
Document
效果图：
路径导航
案例：
Document
效果图：
下拉菜单
- dropdown-toggle
- dropdown-menu
案例：
Document
下拉菜单
效果图：
巨幕
样式里面包容器，通常是将巨幕设置为背景
...
图片的响应式
img-responsive 声明响应式图片，是一个样式类，直接加给图片即可