領先的實用技能——打造前端開發工程師

科學的訓練模式——授人以漁而不只是作品臨摹

真實的項目驅動——行業知識與專業設計相呼應

便捷的學習體驗——傳統教材與二維碼革命性攜手

隨著互聯網技術的飛速發展，“互聯網+”時代已經悄然到來，這自然催生了互聯網行業工種的細分，前端開發工程師這個職業應運而生，各行業、企業對前端設計開發人才的需求也日益增長。與傳統網頁開發設計人員相比，新“互聯網+”時代對前端開發工程師提出了更高的要求，傳統網頁開發設計人員已無法勝任。在這樣的大環境下，這套“前端開發工程師系列”教材應運而生，它旨在幫助讀者朋友快速成長為符合“互聯網+”時代企業需求的優秀的前端開發工程師。

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

課工場為培養互聯網前端設計開發人才，特別推出“前端開發工程師系列”教育產品，提供各種學習資源和支持，包括：

 現場面授課程

 在線直播課程

 錄播視頻課程

 案例素材下載

 學習交流社區

 QQ討論組（技術，就業，生活）

以上所有資源請訪問課工場www.kgc.cn。

本套教材特點

（1）科學的訓練模式

 科學的課程體系。

 創新的教學模式。

 技能人脈，實現多方位就業。

 隨需而變，支持終身學習。

（2）真實的項目驅動

 覆蓋80%的網站效果制作。

 幾十個實訓項目，涵蓋電商、金融、教育、旅游、游戲等行業。

（3）便捷的學習體驗

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

 課工場開辟教材配套版塊，提供素材下載、學習社區等豐富的在線學習資源。

讀者對象

（1）初學者：本套教材將幫助你快速進入互聯網前端開發行業，從零開始逐步成長為專業前端開發工程師。

（2）初級前端開發者：本套教材將帶你進行全面、系統的互聯網前端設計開發學習，幫助你梳理全面、科學的技能理論，提供實用開發技巧和項目經驗。

課工場出品（kgc.cn）

前言
課程設計說明
關于引用作品版權說明

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

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