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

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

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

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

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

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

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

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

 在線直播課程

 錄播視頻課程

 案例素材下載

 學習交流社區(qū)

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

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

本套教材特點

（1）科學的訓練模式

 科學的課程體系。

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

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

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

（2）真實的項目驅(qū)動

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

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

（3）便捷的學習體驗

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

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

讀者對象

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

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

課工場出品（kgc.cn）

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

第1章 Bootstrap入門 1
1 Bootstrap簡介 2
1.1 Bootstrap簡介 2
1.2 Bootstrap文件結(jié)構(gòu)和標準模板 3
操作案例：在頁面中使用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)站首頁 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布局簡介 42
2.2 基礎(chǔ)排版 43
2.2.1 標題 44
2.2.2 主體內(nèi)容 46
2.2.3 對齊方式 47
2.2.4 列表 48
3 禁用響應(yīng)式布局 51
本章總結(jié) 52
本章作業(yè) 52
第3章 Bootstrap組件 53
1 按鈕 54
操作案例1：制作Bootstrap官網(wǎng)案例頁面 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 導(dǎo)航和導(dǎo)航條 82
操作案例3：制作導(dǎo)航欄 87
3.7 縮略圖 89
3.8 媒體對象 91
本章總結(jié) 93
本章作業(yè) 94
第4章 Bootstrap插件 95
1 動畫過渡 96
2 Bootstrap中的JS插件 98
2.1 模態(tài)框 98
操作案例1：利用模態(tài)窗體制作百度
登錄框 103
2.2 輪播圖 105
操作案例2：利用Bootstrap制作攜程網(wǎng)
首頁的輪播圖 109
2.3 選項卡 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簡介 120
1.2 jQuery Mobile準備文檔 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基本頁面 129
1.3.4 jQuery Mobile對話框 130
1.4 與電話整合 132
操作案例2：制作商家信息展示頁面 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：制作影視介紹頁面 143
2.5 按鈕 145
操作案例4：制作音樂播放器頁面 148
本章總結(jié) 150
本章作業(yè) 150
第6章 jQuery Mobile基礎(chǔ) 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 計數(shù)氣泡 162
2 表單組件 164
2.1 表單動作 165
2.2 表單元素 165
2.2.1 文本標簽和容器標簽 165
2.2.2 文本輸入框 166
2.2.3 textarea輸入?yún)^(qū)域 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
本章總結(jié) 181
本章作業(yè) 181

1. C程序設(shè)計實踐教程 [劉衛(wèi)國]
2. C程序設(shè)計（慕課版） [劉衛(wèi)國]
3. 程序設(shè)計基礎(chǔ)實踐教程（C/C++語言版） [張桂芬 葛麗娜]
4. C++案例項目精講 [主編 楊國興]
5. SwiftUI完全開發(fā) [李智威 著]
6. MySQL數(shù)據(jù)庫項目式教程 [陳亞峰]
7. C語言程序設(shè)計習題與實驗指導(dǎo)（第二版） [主編 甄增榮 張賓]
8. C語言程序設(shè)計（第二版） [主編 甄增榮 田云霞]
9. Unity3D虛擬現(xiàn)實應(yīng)用開發(fā)實踐 [主 編 劉龍]
10. Python程序設(shè)計 [主編 姜春磊 陳虹潔]
11. C語言程序設(shè)計實踐教程（活頁式） [主編 鄭茵 陳巍 滕泓虬]
12. 面向?qū)ο蟪绦蛟O(shè)計 [主編 張勇 張平華 趙小龍]
13. Python程序設(shè)計基礎(chǔ)及實戰(zhàn) [主編　劉健]
14. C語言程序設(shè)計 [姜雪]
15. Python程序設(shè)計實踐教程 [王鶴琴 蔡正保]
16. C++程序設(shè)計實踐教程（第三版） [主編 劉衛(wèi)國 曹岳輝]
17. C++程序設(shè)計（第三版） [主編 曹岳輝 劉衛(wèi)國]
18. C語言程序設(shè)計項目化教程（活頁式） [主編 張利華 潘曉利]
19. 機器人流程自動化（RPA）實戰(zhàn)——基于UiPath [主編　金鑫]
20. Python 語言程序設(shè)計實踐指導(dǎo) [主編　張雙獅]
21. Python程序設(shè)計案例教程 [主編 毛錦庚 鐘肖英 周賢來 ]
22. 基于.NET Core框架的分布式系統(tǒng)架構(gòu)設(shè)計 [湯佳 著]
23. Python語言程序設(shè)計教程 [郭其標 房宜汕]
24. Python程序設(shè)計 [李國燕 王新強 劉佳 等編著]
25. Python程序設(shè)計項目化教程（活頁式） [主編　盧鳳偉]
26. Java編程基礎(chǔ)案例式教程 [主編 陳艷華 唐春蘭]
27. Python語言同步案例習題精解 [主編 肖朝暉]
28. Web用戶界面設(shè)計與制作 [主編 趙娟]
29. Unity應(yīng)用開發(fā)與實戰(zhàn)（微課版） [主 編 程永恒]
30. PHP程序設(shè)計項目化教程 [主 編 杜海穎]