移动端的js事件
1、touchstart: //手指放到屏幕上时触发
2、touchmove: //手指在屏幕上滑动式触发
3、touchend: //手指离开屏幕时触发
4、touchcancel: //系统取消touch事件的时候触发，比较少用
这四个事件很少单独使用
移动端一般有三个操作：
点击
滑动
拖动
zeptojs
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。
swiper
swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果.
示例：
1、将swiper.min.js和swiper.min.css分别以外链的形式进行引入
2、在body中写入：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
3、在script中写入：
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
initialSlide :1,
paginationClickable: true,
loop: true,
autoplay:3000,
autoplayDisableOnInteraction:false
});
</script>
swiper使用参数：
1、initialSlide：
初始索引值，从0开始
2、direction：
滑动方向 horizontal | vertical
3、speed：
滑动速度，单位ms
4、autoplay：
设置自动播放及播放时间
5、autoplayDisableOnInteraction：
用户操作swipe后是否还自动播放，默认是true，不再自动播放
6、pagination：
分页圆点
7、paginationClickable：
分页圆点是否点击
8、prevButton：
上一页箭头
9、nextButton：
下一页箭头
10、loop：
是否首尾衔接
11、onSlideChangeEnd：
回调函数，滑动结束时执行
Bootstrap
bootstrap 容器
container-fluid 流体
container
- 1170
- 970
- 750
- 100%
Bootstrap栅格系统
bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
- 1、col-lg-
- 2、col-md-
- 3、col-sm-
- 4、col-xs-
bootstrap响应式查询区间
- 1、大于等于768
- 2、大于等于992
- 3、大于等于1200
bootstrap 表单
1、form
声明一个表单域
2、form-inline
内联表单域
3、form-horizontal
水平排列表单域
4、form-group
表单组、包括表单文字和表单控件
5、form-control
文本输入框、下拉列表控件样式
6、checkbox checkbox-inline
多选框样式
7、radio radio-inline
单选框样式
8、input-group
表单控件组
9、input-group-addon
表单控件组物件样式
10、input-group-btn
表单控件组物件为按钮的样式
11、form-group-lg
大尺寸表单
12、form-group-sm
小尺寸表单
bootstrap 按钮
1、btn
声明按钮
2、btn-default
默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block
宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group
定义按钮组
bootstrap 图片
img-responsive
声明响应式图片
bootstrap 隐藏类
- 1、hidden-xs
- 2、hidden-sm
- 3、hidden-md
- 4、hidden-lg
bootstrap 字体图标
通过字体代替图标，font文件夹需要和css文件夹在同一目录
bootstrap 下拉菜单
1、dropdown-toggle
2、dropdown-menu
bootstrap 选项卡
1、nav
2、nav-tabs
3、nav-pills
4、tab-content
bootstrap 导航条
1、navbar
声明导航条
2、navbar-default
声明默认的导航条样式
3、navbar-inverse
声明反白的导航条样式
4、navbar-static-top
去掉导航条的圆角
5、navbar-fixed-top
固定到顶部的导航条
6、navbar-fixed-bottom
固定到底部的导航条
7、navbar-header
申明logo的容器
8、navbar-brand
针对logo等固定内容的样式
11、nav navbar-nav
定义导航条中的菜单
12、navbar-form
定义导航条中的表单
13、navbar-btn
定义导航条中的按钮
14、navbar-text
定义导航条中的文本
9、navbar-left
菜单靠左
10、navbar-right
菜单靠右
bootstrap 模态框
1、modal
声明一个模态框
2、modal-dialog
定义模态框尺寸
3、modal-lg
定义大尺寸模态框
4、modal-sm
定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer
