領(lǐng)先的實(shí)用技能——打造前端開發(fā)工程師

科學(xué)的訓(xùn)練模式——授人以漁而不只是作品臨摹

真實(shí)的項(xiàng)目驅(qū)動(dòng)——行業(yè)知識(shí)與專業(yè)設(shè)計(jì)相呼應(yīng)

便捷的學(xué)習(xí)體驗(yàn)——傳統(tǒng)教材與二維碼革命性攜手

隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，“互聯(lián)網(wǎng)+”時(shí)代已經(jīng)悄然到來，這自然催生了互聯(lián)網(wǎng)行業(yè)工種的細(xì)分，前端開發(fā)工程師這個(gè)職業(yè)應(yīng)運(yùn)而生，各行業(yè)、企業(yè)對(duì)前端設(shè)計(jì)開發(fā)人才的需求也日益增長(zhǎng)。與傳統(tǒng)網(wǎng)頁(yè)開發(fā)設(shè)計(jì)人員相比，新“互聯(lián)網(wǎng)+”時(shí)代對(duì)前端開發(fā)工程師提出了更高的要求，傳統(tǒng)網(wǎng)頁(yè)開發(fā)設(shè)計(jì)人員已無法勝任。在這樣的大環(huán)境下，這套“前端開發(fā)工程師系列”教材應(yīng)運(yùn)而生，它旨在幫助讀者朋友快速成長(zhǎng)為符合“互聯(lián)網(wǎng)+”時(shí)代企業(yè)需求的優(yōu)秀的前端開發(fā)工程師。

“前端開發(fā)工程師系列”教材是由課工場(chǎng)（kgc.cn）的教研團(tuán)隊(duì)研發(fā)的。課工場(chǎng)是北京大學(xué)下屬企業(yè)北京課工場(chǎng)教育科技有限公司推出的互聯(lián)網(wǎng)教育平臺(tái)，專注于互聯(lián)網(wǎng)企業(yè)各崗位人才的培養(yǎng)。平臺(tái)匯聚了數(shù)百位來自知名培訓(xùn)機(jī)構(gòu)、高校的頂級(jí)名師和互聯(lián)網(wǎng)企業(yè)的行業(yè)專家，面向大學(xué)生以及需要“充電”的在職人員，針對(duì)與互聯(lián)網(wǎng)相關(guān)的產(chǎn)品設(shè)計(jì)、開發(fā)、運(yùn)維、推廣和運(yùn)營(yíng)等崗位，提供在線的直播和錄播課程，并通過遍及全國(guó)的幾十家線下服務(wù)中心提供現(xiàn)場(chǎng)面授以及多種形式的教學(xué)服務(wù)，并同步研發(fā)出版最新的課程教材。參與本書編寫的院校老師還有吳振宇、任春華、宋麗萍、禹晨等。

課工場(chǎng)為培養(yǎng)互聯(lián)網(wǎng)前端設(shè)計(jì)開發(fā)人才，特別推出“前端開發(fā)工程師系列”教育產(chǎn)品，提供各種學(xué)習(xí)資源和支持，包括：

 現(xiàn)場(chǎng)面授課程

 在線直播課程

 錄播視頻課程

 案例素材下載

 學(xué)習(xí)交流社區(qū)

 QQ討論組（技術(shù)，就業(yè)，生活）

以上所有資源請(qǐng)?jiān)L問課工場(chǎng)www.kgc.cn。

本套教材特點(diǎn)

（1）科學(xué)的訓(xùn)練模式

 科學(xué)的課程體系。

 創(chuàng)新的教學(xué)模式。

 技能人脈，實(shí)現(xiàn)多方位就業(yè)。

 隨需而變，支持終身學(xué)習(xí)。

（2）真實(shí)的項(xiàng)目驅(qū)動(dòng)

 覆蓋80%的網(wǎng)站效果制作。

 幾十個(gè)實(shí)訓(xùn)項(xiàng)目，涵蓋電商、金融、教育、旅游、游戲等行業(yè)。

（3）便捷的學(xué)習(xí)體驗(yàn)

 每章提供二維碼掃描，可以直接觀看相關(guān)視頻講解和案例操作。

 課工場(chǎng)開辟教材配套版塊，提供素材下載、學(xué)習(xí)社區(qū)等豐富的在線學(xué)習(xí)資源。

讀者對(duì)象

（1）初學(xué)者：本套教材將幫助你快速進(jìn)入互聯(lián)網(wǎng)前端開發(fā)行業(yè)，從零開始逐步成長(zhǎng)為專業(yè)前端開發(fā)工程師。

（2）初級(jí)前端開發(fā)者：本套教材將帶你進(jìn)行全面、系統(tǒng)的互聯(lián)網(wǎng)前端設(shè)計(jì)開發(fā)學(xué)習(xí)，幫助你梳理全面、科學(xué)的技能理論，提供實(shí)用開發(fā)技巧和項(xiàng)目經(jīng)驗(yàn)。

課工場(chǎng)出品（kgc.cn）

前言
課程設(shè)計(jì)說明
關(guān)于引用作品版權(quán)說明

第1章 Bootstrap入門 1
1 Bootstrap簡(jiǎn)介 2
1.1 Bootstrap簡(jiǎn)介 2
1.2 Bootstrap文件結(jié)構(gòu)和標(biāo)準(zhǔn)模板 3
操作案例：在頁(yè)面中使用Bootstrap 5
2 Bootstrap功能介紹 6
2.1 Bootstrap構(gòu)成模塊 6
2.2 Bootstrap的特色和功能介紹 8
2.2.1 Bootstrap的特色 8
2.2.2 媒體查詢 9
2.2.3 Bootstrap主要功能 11
2.3 Bootstrap優(yōu)秀插件 16
2.4 Bootstrap版本變化 16
3 Bootstrap優(yōu)秀網(wǎng)站示例 18
本章總結(jié) 20
本章作業(yè) 20
第2章 Bootstrap布局 21
1 Bootstrap的結(jié)構(gòu) 22
1.1 使用柵格系統(tǒng) 22
1.1.1 繪制柵格 23
1.1.2 柵格系統(tǒng)的列偏移 29
操作案例1：制作音樂網(wǎng)站首頁(yè) 31
1.1.3 柵格系統(tǒng)的列交換 32
1.1.4 柵格系統(tǒng)的嵌套 34
1.2 響應(yīng)式柵格 36
操作案例2：組合柵格系統(tǒng) 40
2 CSS布局概要 42
2.1 CSS布局簡(jiǎn)介 42
2.2 基礎(chǔ)排版 43
2.2.1 標(biāo)題 44
2.2.2 主體內(nèi)容 46
2.2.3 對(duì)齊方式 47
2.2.4 列表 48
3 禁用響應(yīng)式布局 51
本章總結(jié) 52
本章作業(yè) 52
第3章 Bootstrap組件 53
1 按鈕 54
操作案例1：制作Bootstrap官網(wǎng)案例頁(yè)面 59
2 表格 61
3 CSS組件 63
3.1 表單 63
3.2 輸入框組 66
3.3 圖標(biāo) 70
3.4 下拉菜單 71
操作案例2：制作收集用戶信息頁(yè)面 75
3.5 按鈕組 76
3.6 導(dǎo)航和導(dǎo)航條 82
操作案例3：制作導(dǎo)航欄 87
3.7 縮略圖 89
3.8 媒體對(duì)象 91
本章總結(jié) 93
本章作業(yè) 94
第4章 Bootstrap插件 95
1 動(dòng)畫過渡 96
2 Bootstrap中的JS插件 98
2.1 模態(tài)框 98
操作案例1：利用模態(tài)窗體制作百度
登錄框 103
2.2 輪播圖 105
操作案例2：利用Bootstrap制作攜程網(wǎng)
首頁(yè)的輪播圖 109
2.3 選項(xiàng)卡 111
2.4 折疊 112
操作案例3：利用Bootstrap制作導(dǎo)航菜單 114
本章總結(jié) 116
本章作業(yè) 116
第5章 jQuery Mobile入門 119
1 jQuery Mobile入門 120
1.1 jQuery Mobile簡(jiǎn)介 120
1.2 jQuery Mobile準(zhǔn)備文檔 121
1.3 jQuery Mobile架構(gòu) 123
1.3.1 jQuery Mobile屬性 123
1.3.2 jQuery Mobile主題 127
1.3.3 jQuery Mobile視圖 128
操作案例1：制作jQuery Mobile基本頁(yè)面 129
1.3.4 jQuery Mobile對(duì)話框 130
1.4 與電話整合 132
操作案例2：制作商家信息展示頁(yè)面 133
2 jQuery Mobile UI組件 134
2.1 網(wǎng)格系統(tǒng) 134
2.2 格式化內(nèi)容 137
2.3 可折疊的內(nèi)容 138
2.4 工具欄 140
操作案例3：制作影視介紹頁(yè)面 143
2.5 按鈕 145
操作案例4：制作音樂播放器頁(yè)面 148
本章總結(jié) 150
本章作業(yè) 150
第6章 jQuery Mobile基礎(chǔ) 153
1 列表 154
1.1 整頁(yè)列表與插入列表 154
1.2 視覺分隔符 155
1.3 交互行 157
1.4 圖片 159
1.4.1 圖標(biāo) 159
1.4.2 縮略圖 159
1.4.3 計(jì)數(shù)氣泡 162
2 表單組件 164
2.1 表單動(dòng)作 165
2.2 表單元素 165
2.2.1 文本標(biāo)簽和容器標(biāo)簽 165
2.2.2 文本輸入框 166
2.2.3 textarea輸入?yún)^(qū)域 166
2.2.4 HTML5新增標(biāo)簽 167
操作案例：制作信息收集頁(yè)面 173
3 jQuery Mobile API 174
3.1 jQuery Mobile API 174
3.2 jQuery Mobile事件 176
3.2.1 頁(yè)面事件 176
3.2.2 方向事件 177
3.2.3 觸摸事件 177
本章總結(jié) 181
本章作業(yè) 181

1. Python語(yǔ)言程序設(shè)計(jì)教程 [郭其標(biāo) 房宜汕]
2. Python程序設(shè)計(jì) [李國(guó)燕 王新強(qiáng) 劉佳 等編著]
3. Python程序設(shè)計(jì)項(xiàng)目化教程（活頁(yè)式） [主編　盧鳳偉]
4. Java編程基礎(chǔ)案例式教程 [主編 陳艷華 唐春蘭]
5. Python語(yǔ)言同步案例習(xí)題精解 [主編 肖朝暉]
6. Web用戶界面設(shè)計(jì)與制作 [主編 趙娟]
7. Unity應(yīng)用開發(fā)與實(shí)戰(zhàn)（微課版） [主 編 程永恒]
8. PHP程序設(shè)計(jì)項(xiàng)目化教程 [主 編 杜海穎]
9. 簡(jiǎn)單易懂的Python入門教程 [［日］大澤文孝　著]
10. Python數(shù)據(jù)分析之道——Thinking in Pandas [[美]漢娜·斯捷潘內(nèi)克（Hannah S]
11. 深入淺出OpenHarmony——架構(gòu)、內(nèi)核、驅(qū)動(dòng)及應(yīng)用開發(fā)全棧 [李傳釗 著]
12. MySQL數(shù)據(jù)庫(kù)項(xiàng)目化教程（第二版） [主編　鄭小蓉]
13. python青少年趣味編程 [千鋒教育 編著]
14. 程序員5天修煉 [施游 鄒月平 曾哲軍 編著]
15. Python程序設(shè)計(jì)應(yīng)用教程 [王敏 李光正]
16. Java面向?qū)ο蟪绦蛟O(shè)計(jì)（微課版） [主編　謝先偉　王海洋]
17. Java面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 張立敏 鄒海濤]
18. 工業(yè)機(jī)器人編程及應(yīng)用 [主編 向艷芳 胡月霞]
19. C語(yǔ)言程序設(shè)計(jì)（微課版） [主編　夏啟壽]
20. C語(yǔ)言程序設(shè)計(jì)實(shí)踐教程 [夏啟壽]
21. 單片機(jī)應(yīng)用技術(shù)項(xiàng)目教程（C語(yǔ)言版）（第三版） [主編　郭志勇]
22. Python語(yǔ)言程序設(shè)計(jì) [張雙獅]
23. 火球-UML大戰(zhàn)需求分析（第二版） [張傳波 著]
24. HTML5+CSS3前端開發(fā)項(xiàng)目式教程（微課版） [主編 譚衛(wèi) 徐文義]
25. Python 程序設(shè)計(jì)（微課版） [楊智勇　廖丹]
26. 數(shù)據(jù)結(jié)構(gòu)——C語(yǔ)言（微課版） [主編 梁海英]
27. UI界面設(shè)計(jì)與制作教程 [主 編 黎 婭 任勁松]
28. UML系統(tǒng)建模及系統(tǒng)分析與設(shè)計(jì)（第二版） [王欣 張毅 編著]
29. Android高級(jí)程序設(shè)計(jì) [主編　周雯　舒松]
30. C程序設(shè)計(jì)簡(jiǎn)明教程 [黃能耿 黃致遠(yuǎn) 編著]