123,123

內(nèi)容簡(jiǎn)介

　　本書圍繞Bootstrap框架和移動(dòng)端網(wǎng)頁(yè)開發(fā)兩條主線展開介紹。在Bootstrap框架部分，講解Flex布局與響應(yīng)式布局，Bootstrap核心CSS組件與JavaScript插件，以任務(wù)案例為驅(qū)動(dòng)，讓讀者快速上手制作出響應(yīng)式網(wǎng)頁(yè)。在移動(dòng)端網(wǎng)頁(yè)開發(fā)部分，除了介紹移動(dòng)端頁(yè)面布局，移動(dòng)端事件和移動(dòng)端開發(fā)技巧，還加入了對(duì)Zepto庫(kù)的介紹，最后通過移動(dòng)端網(wǎng)站“愛旅行”的開發(fā)進(jìn)行知識(shí)整合，漸進(jìn)式地完成項(xiàng)目開發(fā)。本書示例豐富，側(cè)重于實(shí)戰(zhàn)，適合剛接觸或即將接觸移動(dòng)端開發(fā)的開發(fā)者，也適合有過移動(dòng)端開發(fā)經(jīng)驗(yàn)、但要進(jìn)一步提升的開發(fā)者。

作者簡(jiǎn)介

　　肖睿任職于北京課工場(chǎng)教育科技有限公司。課工場(chǎng)是專注互聯(lián)網(wǎng)教育的生態(tài)平臺(tái)，匯聚了中國(guó)和北美數(shù)百位來(lái)自知名互聯(lián)網(wǎng)企業(yè)的行業(yè)大咖，向?qū)で缶蜆I(yè)和技術(shù)提升的人群提供直播、錄播、面授等多模式教學(xué)場(chǎng)景，并通過遍布全國(guó)的線下服務(wù)中心提供成熟的學(xué)習(xí)服務(wù)，形成完善的“互聯(lián)網(wǎng)+教育”解決方案。同時(shí)，課工場(chǎng)也為高校、企業(yè)、行業(yè)提供教育技術(shù)賦能，依托Transformer智能教育生態(tài)平臺(tái)，打造智慧校園、企業(yè)大學(xué)、行業(yè)培訓(xùn)的教育場(chǎng)景，提供一站式教育解決方案。

圖書目錄

第 1章　Flex布局與響應(yīng)式布局　1
任務(wù)1　認(rèn)識(shí)Flex彈性盒布局　2
1．1．1　為什么要使用彈性布局　2
1．1．2　實(shí)現(xiàn)彈性布局的方法　4
1．1．3　上機(jī)訓(xùn)練　15
任務(wù)2　實(shí)現(xiàn)響應(yīng)式布局　16
1．2．1　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)　16
1．2．2　媒體查詢　17
1．2．3　上機(jī)訓(xùn)練　23
1．2．4　響應(yīng)式布局的應(yīng)用　24
1．2．5　響應(yīng)式布局的優(yōu)缺點(diǎn)　26
本章作業(yè)　26
第　2章初識(shí)Bootstrap　27
任務(wù)1　認(rèn)識(shí)Bootstrap　28
2．1．1　Bootstrap概述　28
2．1．2　Bootstrap使用方法　29
2．1．3　Bootstrap整體結(jié)構(gòu)　32
任務(wù)2　使用Bootstrap柵格系統(tǒng)進(jìn)行頁(yè)面布局　33
2．2．1　柵格系統(tǒng)簡(jiǎn)介　33
2．2．2　實(shí)現(xiàn)原理　33
2．2．3　柵格系統(tǒng)的使用　34
2．2．4　響應(yīng)式柵格　38
2．2．5　上機(jī)訓(xùn)練　42
任務(wù)3　使用Bootstrap CSS全局樣式　42
2．3．1　Bootstrap排版　43
2．3．2　Bootstrap表單　46
2．3．3　Bootstrap按鈕　49
2．3．4　Bootstrap圖片　50
2．3．5　上機(jī)訓(xùn)練　50
本章作業(yè)　51
第3章　Bootstrap CSS組件　55
任務(wù)1　使用圖標(biāo)組件　56
3．1．1　使用方法　57
3．1．2　應(yīng)用場(chǎng)景　58
3．1．3　實(shí)現(xiàn)方式　59
任務(wù)2　使用下拉菜單組件　59
3．2．1　基本下拉菜單　59
3．2．2　分離式下拉菜單　61
3．2．3　上機(jī)訓(xùn)練　62
任務(wù)3　使用輸入框組件　63
3．3．1　基本的輸入框組件　63
3．3．2　輸入框組件的大小　64
3．3．3　按鈕插件　64
任務(wù)4　使用導(dǎo)航和導(dǎo)航欄組件　65
3．4．1　導(dǎo)航　65
3．4．2　導(dǎo)航欄　68
3．4．3　上機(jī)訓(xùn)練　74
任務(wù)5　使用縮略圖　75
任務(wù)6　使用媒體對(duì)象　77
任務(wù)7　使用列表組　78
任務(wù)8　使用分頁(yè)導(dǎo)航　80
3．8．1　分頁(yè)（Pagination）　80
3．8．2　翻頁(yè)（Pager）　81
3．8．3　上機(jī)訓(xùn)練　81
本章作業(yè)　82
第4章　Bootstrap JavaScript插件　85
任務(wù)1　認(rèn)識(shí)JavaScript插件　86
4．1．1　JavaScript插件的引入方式　86
4．1．2　data屬性概述　87
任務(wù)2　實(shí)現(xiàn)動(dòng)畫過渡效果　87
任務(wù)3　使用Modal插件實(shí)現(xiàn)模態(tài)框效果　89
4．3．1　基礎(chǔ)布局與樣式　89
4．3．2　尺寸設(shè)置　91
4．3．3　常用屬性　92
4．3．4　動(dòng)態(tài)設(shè)置模態(tài)框?qū)傩浴?2
4．3．5　上機(jī)訓(xùn)練　93
任務(wù)4　使用Tab插件實(shí)現(xiàn)選項(xiàng)卡效果　94
4．4．1　基礎(chǔ)布局與樣式　94
4．4．2　動(dòng)態(tài)操作選項(xiàng)卡插件的屬性及方法　96
4．4．3　上機(jī)訓(xùn)練　96
任務(wù)5　使用Carousel插件實(shí)現(xiàn)輪播圖　97
4．5．1　基礎(chǔ)布局與樣式　97
4．5．2　自定義屬性　100
4．5．3　動(dòng)態(tài)調(diào)用　100
4．5．4　上機(jī)訓(xùn)練　101
任務(wù)6　使用ScrollSpy插件實(shí)現(xiàn)滾動(dòng)監(jiān)聽　102
4．6．1　基礎(chǔ)布局與使用　102
4．6．2　動(dòng)態(tài)調(diào)用　104
4．6．3　上機(jī)訓(xùn)練　105
任務(wù)7　Bootstrap總結(jié)　106
本章作業(yè)　107
第5章　移動(dòng)端頁(yè)面布局　111
任務(wù)1　移動(dòng)Web概述　112
5．1．1　什么是移動(dòng)Web　112
5．1．2　移動(dòng)Web的現(xiàn)狀　113
5．1．3　PC與移動(dòng)Web開發(fā)的區(qū)別　113
任務(wù)2　移動(dòng)端開發(fā)、測(cè)試瀏覽器　114
5．2．1　移動(dòng)端瀏覽器的類型　114
5．2．2　測(cè)試瀏覽器　115
任務(wù)3　移動(dòng)端視口及視口標(biāo)簽　119
5．3．1　移動(dòng)端的三種視口　119
5．3．2　視口標(biāo)簽　123
任務(wù)4　設(shè)備像素比　125
任務(wù)5　實(shí)現(xiàn)移動(dòng)端布局　126
5．5．1　使用em布局網(wǎng)頁(yè)內(nèi)容　126
5．5．2　使用rem布局網(wǎng)頁(yè)內(nèi)容　129
5．5．3　上機(jī)訓(xùn)練　133
本章作業(yè)　134
第6章　移動(dòng)端事件與Zepto框架　137
任務(wù)1　使用移動(dòng)端事件　138
6．1．1　click事件　138
6．1．2　touch（觸摸）事件　139
6．1．3　上機(jī)訓(xùn)練　142
任務(wù)2　使用Zepto框架　143
6．2．1　初識(shí)Zepto　143
6．2．2　Zepto和jQuery的區(qū)別　144
6．2．3　Zepto框架常用選擇器　145
6．2．4　Zepto框架常用方法和屬性　148
6．2．5　上機(jī)訓(xùn)練　153
本章作業(yè)　154
第7章　移動(dòng)端開發(fā)技巧　157
任務(wù)1　開發(fā)技巧　158
任務(wù)2　常見問題　159
任務(wù)3　移動(dòng)端優(yōu)化　160
7．3．1　加載優(yōu)化　161
7．3．2　圖片優(yōu)化　162
7．3．3　腳本優(yōu)化　163
本章作業(yè)　164
第8章　項(xiàng)目實(shí)戰(zhàn)——制作“愛旅行”網(wǎng)站　165
任務(wù)1　開發(fā)流程制訂及角色分工　167
任務(wù)2　項(xiàng)目分析　168
8．2．1　需求概述　169
8．2．2　問題分析　171
任務(wù)3　項(xiàng)目實(shí)現(xiàn)　173
8．3．1　公用部分　174
8．3．2　網(wǎng)站首頁(yè)——輪播圖　176
8．3．3　網(wǎng)站首頁(yè)——圖文混排　177
8．3．4　旅游首頁(yè)　179
8．3．5　列表頁(yè)　181
8．3．6　詳情頁(yè)　182
8．3．7　選擇日期和人數(shù)頁(yè)　184
8．3．8　選擇資源頁(yè)　185
8．3．9　訂單填寫頁(yè)　185
8．3．10　目的地頁(yè)　186
8．3．11　登錄頁(yè)　186
8．3．12　注冊(cè)頁(yè)　187
8．3．13　瀏覽歷史頁(yè)　187
8．3．14　我的頁(yè)面　188
8．3．15　訂單頁(yè)　188
本章作業(yè)　189