移動端js事件
移動端的操作方式和PC端是不同的髓考，移動端主要用手指操作部念，所以有特殊的touch事件，touch事件包括如下幾個事件：
1氨菇、touchstart: //手指放到屏幕上時觸發(fā)
2儡炼、touchmove: //手指在屏幕上滑動式觸發(fā)
3、touchend: //手指離開屏幕時觸發(fā)
4查蓉、touchcancel: //系統(tǒng)取消touch事件的時候觸發(fā)乌询，比較少用
移動端一般有三種操作，點擊豌研、滑動妹田、拖動，這三種操作一般是組合使用上面的幾個事件來完成的鹃共，所有上面的4個事件一般很少單獨使用鬼佣，一般是封裝使用來實現(xiàn)這三種操作，可以使用封裝成熟的js庫霜浴。
zeptojs
Zepto是一個輕量級的針對現(xiàn)代高級瀏覽器的JavaScript庫晶衷， 它與jquery有著類似的api。 如果你會用jquery阴孟，那么你也會用zepto晌纫。Zepto的一些可選功能是專門針對移動端瀏覽器的；它的最初目標(biāo)是在移動端提供一個精簡的類似jquery的js庫永丝。
zepto官網(wǎng)：http://zeptojs.com/
zepto中文api：http://www.css88.com/doc/zeptojs_api/
- zepto包含很多模塊锹漱，默認(rèn)下載版本包含的模塊有Core, Ajax, Event, Form, IE模塊，如果還需要其他的模塊类溢，可以自定義構(gòu)建凌蔬。
- touch模塊封裝了針對移動端常用的事件露懒，可使用此模塊進(jìn)行移動端特定效果開發(fā)，這些事件有：
- tap 元素tap的時候觸發(fā)砂心，此事件類似click懈词，但是比click快。
- longTap 當(dāng)一個元素被按住超過750ms觸發(fā)辩诞。
- swipe, swipeLeft, swipeRight, swipeUp, swipeDown 當(dāng)元素被劃過時觸發(fā)坎弯。(可選擇給定的方向)
swiper
- swiper.js是一款成熟穩(wěn)定的應(yīng)用于PC端和移動端的滑動效果插件，一般用來觸屏焦點圖译暂、觸屏整屏滾動等效果抠忘。 swiper分為2.x版本和3.x版本，2.x版本支持低版本瀏覽器(IE7)外永，3.x放棄支持低版本瀏覽器崎脉，適合應(yīng)用在移動端。
2.x版本中文網(wǎng)址：http://2.swiper.com.cn/
3.x版本中文網(wǎng)地址：http://www.swiper.com.cn/
- swiper使用方法：
<script type="text/javascript" src="js/swiper.min.js"></script>
......
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......
<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>
<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使用參數(shù)：
1伯顶、initialSlide：初始索引值囚灼，從0開始
2、direction：滑動方向 horizontal | vertical
3祭衩、speed：滑動速度灶体，單位ms
4、autoplay：設(shè)置自動播放及播放時間
5掐暮、autoplayDisableOnInteraction：用戶操作swipe后是否還自動播放蝎抽，默認(rèn)是true，不再自動播放
6路克、pagination：分頁圓點
7樟结、paginationClickable：分頁圓點是否點擊
8、prevButton：上一頁箭頭
9衷戈、nextButton：下一頁箭頭
10狭吼、loop：是否首尾銜接
11、onSlideChangeEnd：回調(diào)函數(shù)殖妇，滑動結(jié)束時執(zhí)行
bootstrap
- 簡單、直觀破花、強(qiáng)悍的前端開發(fā)框架谦趣，讓web開發(fā)更迅速、簡單座每。 來自Twitter前鹅，是目前很受歡迎的前端框架之一。 Bootrstrap是基于HTML峭梳、CSS舰绘、JavaScript的蹂喻，讓書寫代碼更容易。 移動優(yōu)先捂寿，響應(yīng)式布局開發(fā)口四。
- bootstrap 容器
- container-fluid 流體
- container
- 1170
- 970
- 750
- 100%
- bootstrap 柵格系統(tǒng)
bootstrap將頁面橫向分為12等分，按照12等分定義了適應(yīng)不同寬度等分的樣式類秦陋，這些樣式類組成了一套響應(yīng)式蔓彩、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)：
1、col-lg- 2驳概、col-md-
3赤嚼、col-sm- 4、col-xs-
- bootstrap響應(yīng)式查詢區(qū)間：
1顺又、大于等于768
2更卒、大于等于992
3、大于等于1200
- bootstrap 表單
1稚照、form 聲明一個表單域
2蹂空、form-inline 內(nèi)聯(lián)表單域
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 表單控件組物件為按鈕的樣式
10琉苇、form-group-lg 大尺寸表單
11嘲玫、form-group-sm 小尺寸表單
- bootstrap 按鈕
1、btn 聲明按鈕
2并扇、btn-default 默認(rèn)按鈕樣式
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 聲明響應(yīng)式圖片
- bootstrap 隱藏類
1谓着、hidden-xs
2、hidden-sm
3崩侠、hidden-md
4漆魔、hidden-lg
- bootstrap 字體圖標(biāo)
通過字體代替圖標(biāo)，font文件夾需要和css文件夾在同一目錄
- bootstrap 下拉菜單
1却音、dropdown-toggle
2改抡、dropdown-menu
- bootstrap 選項卡
1、nav
2系瓢、nav-tabs
3阿纤、nav-pills
4、tab-content
- bootstrap 導(dǎo)航條
1夷陋、navbar 聲明導(dǎo)航條
2欠拾、navbar-default 聲明默認(rèn)的導(dǎo)航條樣式
3、navbar-inverse 聲明反白的導(dǎo)航條樣式
4骗绕、navbar-static-top 去掉導(dǎo)航條的圓角
5藐窄、navbar-fixed-top 固定到頂部的導(dǎo)航條
6、navbar-fixed-bottom 固定到底部的導(dǎo)航條
7酬土、navbar-header 申明logo的容器
8荆忍、navbar-brand 針對logo等固定內(nèi)容的樣式
11、nav navbar-nav 定義導(dǎo)航條中的菜單
12撤缴、navbar-form 定義導(dǎo)航條中的表單
13刹枉、navbar-btn 定義導(dǎo)航條中的按鈕
14、navbar-text 定義導(dǎo)航條中的文本
9屈呕、navbar-left 菜單靠左
10微宝、navbar-right 菜單靠右
- bootstrap 模態(tài)框
1、modal 聲明一個模態(tài)框
2虎眨、modal-dialog 定義模態(tài)框尺寸
3蟋软、modal-lg 定義大尺寸模態(tài)框
4、modal-sm 定義小尺寸模態(tài)框
5嗽桩、modal-header
6钟鸵、modal-body
7、modal-footer
