Bootstrap与jQuery UI框架设计

领先的实用技能——打造前端开发工程师

科学的训练模式——授人以渔而不只是作品临摹

真实的项目驱动——行业知识与专业设计相呼应

便捷的学习体验——传统教材与二维码革命性携手

随着互联网技术的飞速发展，“互联网+”时代已经悄然到来，这自然催生了互联网行业工种的细分，前端开发工程师这个职业应运而生，各行业、企业对前端设计开发人才的需求也日益增长。与传统网页开发设计人员相比，新“互联网+”时代对前端开发工程师提出了更高的要求，传统网页开发设计人员已无法胜任。在这样的大环境下，这套“前端开发工程师系列”教材应运而生，它旨在帮助读者朋友快速成长为符合“互联网+”时代企业需求的优秀的前端开发工程师。

“前端开发工程师系列”教材是由课工场（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程序设计简明教程 [黄能耿 黄致远 编著]