移动端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 声明响应式图片,是一个样式类,直接加给图片即可