书籍详情
Bootstrap 4 Web设计与开发实战
作者:杨旺功 著
出版社:清华大学出版社
出版时间:2020-07-01
ISBN:9787302554660
定价:¥59.00
购买这本书可以去
内容简介
本书由浅入深,全面、系统、详尽地介绍了Bootstrap 4框架相关技术在Web和移动Web开发领域的应用。书中提供了大量的代码示例,读者可以通过这些示例深入理解Bootstrap框架相关的知识点,同时还可以举一反三,将这些示例应用到实战项目之中。本书从基本原理到实战应用,几乎涉及Bootstrap框架Web开发领域的绝大部分内容,是一本集理论与实战的综合性参考书。 本书共15章,分为3部分。第一部分为Bootstrap基础,主要介绍Bootstrap框架的基础知识与开发入门等内容;第二部分为Bootstrap框架,主要介绍Bootstrap脚手架、Bootstrap样式设计、Bootstrap组件设计、Bootstrap插件设计与Bootstrap多媒体设计等相关的内容;第三部分为Bootstrap实战,详细讲解如何基于Bootstrap框架开发Web应用的过程与方法,同时还包括整合jQuery UI框架和jQuery Mobile框架开发移动应用的案例。 本书适合所有想全面深入学习Bootstrap框架开发技术的人员阅读,尤其适合正在应用Bootstrap框架做移动应用开发的人员阅读。对于大中专院校相关专业的学生和培训机构的学员,本书也是一本不可多得的参考书。
作者简介
杨旺功,北京印刷学院新媒体学院数字媒体艺术专业教师,主要研究方向是信息与交互设计、虚拟现实、数字娱乐和新媒体艺术等,具有丰富的数字媒体交互产品设计和移动应用UI设计的教学经验。在数字艺术与设计领域成果显著,发表数字艺术论文8篇,出版著作6部。
目录
第1章 Bootstrap从何而来 // 1
1.1 初识Bootstrap // 1
1.2 什么是响应式设计 // 2
1.3 响应式设计四大原则 // 3
1.3.1 移动优先还是PC优先 // 3
1.3.2 内容流 // 4
1.3.3 位图还是矢量图 // 4
1.3.4 相对单位还是固定单位 // 4
1.4 Bootstrap设计目标 // 5
1.4.1 优先针对移动设备 // 5
1.4.2 浏览器支持 // 5
1.4.3 响应式设计 // 6
1.5 本章小结 // 6
第2章 Bootstrap开发环境 // 7
2.1 Bootstrap开发环境概述 // 7
2.1.1 下载Bootstrap开发包 // 7
2.1.2 Bootstrap开发包目录结构 // 9
2.1.3 在网站中使用Bootstrap框架 // 10
2.2 调用Bootstrap样式 // 11
2.3 调用Bootstrap组件 // 14
2.4 调用Bootstrap JS特效 // 15
2.5 实战:一个Bootstrap实现的响应式页面 // 16
2.6 本章小结 // 18
第3章 Bootstrap脚手架 // 19
3.1 Bootstrap全局样式 // 19
3.1.1 什么是全局样式 // 19
3.1.2 基于HTML5文档类型 // 19
3.1.3 屏幕、排版与链接 // 20
3.2 栅格系统 // 21
3.2.1 默认栅格系统 // 21
3.2.2 流式栅格系统 // 24
3.3 页面布局 // 26
3.3.1 固定布局和流式布局 // 27
3.3.2 Bootstrap 4弹性布局(FlexBox) // 27
3.4 响应式设计 // 28
3.4.1 启用响应式特性 // 28
3.4.2 响应式Bootstrap特点 // 28
3.4.3 Bootstrap支持的设备 // 29
3.4.4 响应式布局辅助类 // 29
3.4.5 响应式FlexBox的重要类 // 30
3.5 从Less到Sass // 34
3.6 本章小结 // 34
第4章 Bootstrap样式设计 // 35
4.1 Bootstrap排版 // 35
4.1.1 标题 // 35
4.1.2 页面主体 // 38
4.1.3 强调 // 38
4.1.4 缩略语 // 41
4.1.5 地址 // 42
4.1.6 引用 // 42
4.1.7 列表 // 43
4.1.8 描述 // 47
4.1.9 代码 // 47
4.2 Bootstrap表格 // 49
4.2.1 默认样式表格 // 49
4.2.2 斑马纹样式表格 // 51
4.2.3 圆角边框样式表格 // 52
4.2.4 鼠标悬停样式表格 // 53
4.2.5 带行属性样式表格 // 55
4.3 Bootstrap按钮 // 56
4.3.1 默认样式按钮 // 56
4.3.2 按钮大小样式 // 58
4.3.3 特殊样式按钮 // 59
4.4 Bootstrap图片 // 61
4.5 本章小结 // 61
第5章 Bootstrap组件设计 // 62
5.1 Bootstrap下拉菜单 // 62
5.1.1 标签 // 62
5.1.2 对齐方式与弹出方向 // 63
5.1.3 禁用 // 65
5.2 Bootstrap按钮组 // 65
5.2.1 基本按钮组 // 66
5.2.2 工具栏按钮组 // 66
5.2.3 垂直按钮组 // 67
5.3 Bootstrap按钮式下拉菜单 // 68
5.4 Bootstrap导航 // 71
5.4.1 默认标签导航 // 71
5.4.2 pills标签导航 // 72
5.4.3 堆叠式标签导航 // 73
5.4.4 下拉菜单式标签导航 // 74
5.4.5 标签页式导航 // 75
5.4.6 菜单项的居中 // 77
5.5 Bootstrap导航条 // 78
5.5.1 默认样式导航条 // 78
5.5.2 导航条表单 // 79
5.5.3 小屏幕的折叠导航条 // 80
5.6 Bootstrap分页 // 82
5.6.1 标准分页方式 // 82
5.6.2 翻页分页方式 // 84
5.6.3 分页方式中的字体 // 84
5.7 Bootstrap标签与徽章 // 86
5.8 Bootstrap进度条 // 87
5.8.1 基本样式进度条 // 87
5.8.2 斜条纹样式进度条 // 88
5.8.3 堆叠样式进度条 // 89
5.9 被删除的Glyphicons字体图标 // 89
5.10 本章小结 // 91
第6章 Bootstrap插件设计 // 92
6.1 Bootstrap插件概述 // 92
6.1.1 单个或全部引入 // 92
6.1.2 data属性 // 93
6.1.3 事件 // 93
6.2 Bootstrap模态对话框 // 93
6.2.1 模态对话框说明 // 94
6.2.2 静态模态对话框 // 94
6.2.3 动态模态对话框 // 95
6.3 Bootstrap下拉菜单(高级版) // 98
6.4 Bootstrap滚动监听 // 101
6.5 Bootstrap可切换式标签页 // 104
6.6 Bootstrap提示框 // 107
6.6.1 工具提示框 // 107
6.6.2 弹出框 // 109
6.6.3 警告框 // 113
6.7 Bootstrap按钮 // 114
6.7.1 状态按钮 // 114
6.7.2 复选按钮 // 116
6.7.3 单选按钮 // 117
6.8 Bootstrap中的卡片与折叠 // 118
6.9 Bootstrap幻灯 // 121
6.10 本章小结 // 123
第7章 Bootstrap响应式多媒体 // 124
7.1 Bootstrap图标的响应式 // 124
7.2 Bootstrap图像的响应式 // 126
7.2.1 可适配的图像 // 126
7.2.2 图像网格 // 128
7.3 Bootstrap视频的响应式 // 133
7.4 本章小结 // 134
第8章 Bootstrap扁平化风格页面 // 135
8.1 扁平化设计概述 // 135
8.1.1 介绍 // 135
8.1.2 设计理念 // 136
8.1.3 页面架构 // 136
8.2 页眉设计 // 137
8.2.1 导航条 // 138
8.2.2 导航条图标 // 138
8.2.3 导航条功能菜单 // 139
8.2.4 页眉标题 // 144
8.3 左侧导航设计 // 145
8.4 页面主体设计 // 148
8.4.1 图片列表 // 148
8.4.2 提交表单 // 150
8.4.3 文本列表 // 153
8.5 页脚设计 // 155
8.6 本章小结 // 156
第9章 Bootstrap图片幻灯页面 // 157
9.1 图片幻灯风格页面设计概述 // 157
9.2 页眉设计 // 158
9.3 页面主体设计 // 160
9.3.1 图片幻灯 // 160
9.3.2 图标列表 // 162
9.3.3 图片特辑 // 164
9.4 本章小结 // 165
第10章 Bootstrap风格按钮 // 166
10.1 风格按钮设计概述 // 166
10.2 形状与尺寸风格按钮 // 167
10.3 边框风格按钮 // 169
10.4 下拉菜单风格按钮 // 171
10.5 按钮组风格按钮 // 172
10.6 本章小结 // 174
第11章 Bootstrap响应式表格设计 // 175
11.1 表格设计概述 // 175
11.2 Bootstrap基本表格 // 177
11.3 Bootstrap数组表格 // 179
11.4 Bootstrap Ajax表格 // 180
11.5 本章小结 // 182
第12章 Bootstrap响应式图表设计 // 183
12.1 图表设计概述 // 183
12.2 柱状图图表 // 185
12.3 折线图图表 // 187
12.4 饼状图图表 // 191
12.5 本章小结 // 195
第13章 jQuery UI Bootstrap工具 // 196
13.1 jQuery UI Bootstrap工具概述 // 196
13.1.1 jQuery UI工具 // 196
13.1.2 jQuery UI Bootstrap工具 // 197
13.1.3 jQuery UI Bootstrap应用 // 197
13.2 按钮(Button) // 198
13.2.1 基本样式按钮 // 199
13.2.2 Set样式按钮 // 200
13.2.3 工具条样式按钮 // 202
13.3 折叠面板(Accordion) // 203
13.4 对话框(Dialog) // 206
13.4.1 非模态对话框 // 206
13.4.2 模态对话框 // 208
13.5 标签页 // 211
13.5.1 基本样式标签页 // 211
13.5.2 可编辑样式标签页 // 213
13.6 Overlay与Shadow // 220
13.7 Highlight与Error // 221
13.8 日期选择器(Datepicker) // 223
13.9 滑块 // 224
13.9.1 水平滑块 // 224
13.9.2 垂直滑块 // 225
13.10 自动完成 // 227
13.11 下拉菜单 // 229
13.12 提示信息 // 231
13.13 微调按钮 // 233
13.14 本章小结 // 236
第14章 jQuery Mobile 框架与Bootstrap主题风格 // 237
14.1 jQuery Mobile Bootstrap概述 // 237
14.1.1 jQuery Mobile框架 // 237
14.1.2 Bootstrap主题风格 // 238
14.1.3 应用开发基础 // 238
14.2 主页设计 // 240
14.3 按钮设计 // 242
14.4 列表设计 // 245
14.5 导航设计 // 248
14.6 表单设计 // 252
14.6.1 输入框 // 252
14.6.2 滑块 // 254
14.6.3 切换开关 // 256
14.6.4 复选框 // 258
14.6.5 单选框 // 261
14.6.6 下拉菜单 // 263
14.6.7 提交按钮 // 265
14.7 本章小结 // 269
第15章 实战:应用Bootstrap实现一个贴吧管理页面 // 270
15.1 项目设计概述 // 270
15.2 页面布局设计 // 271
15.2.1 引入Bootstrap框架 // 271
15.2.2 实现页面布局代码 // 272
15.3 页面导航栏设计 // 273
15.3.1 构建导航的整体架构 // 273
15.3.2 设计标题和导航链接 // 274
15.3.3 设计搜索框和通知系统 // 275
15.3.4 设计管理员登录系统 // 276
15.3.5 设计响应式导航 // 278
15.4 左侧边栏设计 // 280
15.5 页面主体设计 // 281
15.5.1 页面主体功能的头部 // 282
15.5.2 页面主体功能的帖子列表 // 284
15.6 本章小结 // 287
附录 CSS选择器速览 // 288
1.1 初识Bootstrap // 1
1.2 什么是响应式设计 // 2
1.3 响应式设计四大原则 // 3
1.3.1 移动优先还是PC优先 // 3
1.3.2 内容流 // 4
1.3.3 位图还是矢量图 // 4
1.3.4 相对单位还是固定单位 // 4
1.4 Bootstrap设计目标 // 5
1.4.1 优先针对移动设备 // 5
1.4.2 浏览器支持 // 5
1.4.3 响应式设计 // 6
1.5 本章小结 // 6
第2章 Bootstrap开发环境 // 7
2.1 Bootstrap开发环境概述 // 7
2.1.1 下载Bootstrap开发包 // 7
2.1.2 Bootstrap开发包目录结构 // 9
2.1.3 在网站中使用Bootstrap框架 // 10
2.2 调用Bootstrap样式 // 11
2.3 调用Bootstrap组件 // 14
2.4 调用Bootstrap JS特效 // 15
2.5 实战:一个Bootstrap实现的响应式页面 // 16
2.6 本章小结 // 18
第3章 Bootstrap脚手架 // 19
3.1 Bootstrap全局样式 // 19
3.1.1 什么是全局样式 // 19
3.1.2 基于HTML5文档类型 // 19
3.1.3 屏幕、排版与链接 // 20
3.2 栅格系统 // 21
3.2.1 默认栅格系统 // 21
3.2.2 流式栅格系统 // 24
3.3 页面布局 // 26
3.3.1 固定布局和流式布局 // 27
3.3.2 Bootstrap 4弹性布局(FlexBox) // 27
3.4 响应式设计 // 28
3.4.1 启用响应式特性 // 28
3.4.2 响应式Bootstrap特点 // 28
3.4.3 Bootstrap支持的设备 // 29
3.4.4 响应式布局辅助类 // 29
3.4.5 响应式FlexBox的重要类 // 30
3.5 从Less到Sass // 34
3.6 本章小结 // 34
第4章 Bootstrap样式设计 // 35
4.1 Bootstrap排版 // 35
4.1.1 标题 // 35
4.1.2 页面主体 // 38
4.1.3 强调 // 38
4.1.4 缩略语 // 41
4.1.5 地址 // 42
4.1.6 引用 // 42
4.1.7 列表 // 43
4.1.8 描述 // 47
4.1.9 代码 // 47
4.2 Bootstrap表格 // 49
4.2.1 默认样式表格 // 49
4.2.2 斑马纹样式表格 // 51
4.2.3 圆角边框样式表格 // 52
4.2.4 鼠标悬停样式表格 // 53
4.2.5 带行属性样式表格 // 55
4.3 Bootstrap按钮 // 56
4.3.1 默认样式按钮 // 56
4.3.2 按钮大小样式 // 58
4.3.3 特殊样式按钮 // 59
4.4 Bootstrap图片 // 61
4.5 本章小结 // 61
第5章 Bootstrap组件设计 // 62
5.1 Bootstrap下拉菜单 // 62
5.1.1 标签 // 62
5.1.2 对齐方式与弹出方向 // 63
5.1.3 禁用 // 65
5.2 Bootstrap按钮组 // 65
5.2.1 基本按钮组 // 66
5.2.2 工具栏按钮组 // 66
5.2.3 垂直按钮组 // 67
5.3 Bootstrap按钮式下拉菜单 // 68
5.4 Bootstrap导航 // 71
5.4.1 默认标签导航 // 71
5.4.2 pills标签导航 // 72
5.4.3 堆叠式标签导航 // 73
5.4.4 下拉菜单式标签导航 // 74
5.4.5 标签页式导航 // 75
5.4.6 菜单项的居中 // 77
5.5 Bootstrap导航条 // 78
5.5.1 默认样式导航条 // 78
5.5.2 导航条表单 // 79
5.5.3 小屏幕的折叠导航条 // 80
5.6 Bootstrap分页 // 82
5.6.1 标准分页方式 // 82
5.6.2 翻页分页方式 // 84
5.6.3 分页方式中的字体 // 84
5.7 Bootstrap标签与徽章 // 86
5.8 Bootstrap进度条 // 87
5.8.1 基本样式进度条 // 87
5.8.2 斜条纹样式进度条 // 88
5.8.3 堆叠样式进度条 // 89
5.9 被删除的Glyphicons字体图标 // 89
5.10 本章小结 // 91
第6章 Bootstrap插件设计 // 92
6.1 Bootstrap插件概述 // 92
6.1.1 单个或全部引入 // 92
6.1.2 data属性 // 93
6.1.3 事件 // 93
6.2 Bootstrap模态对话框 // 93
6.2.1 模态对话框说明 // 94
6.2.2 静态模态对话框 // 94
6.2.3 动态模态对话框 // 95
6.3 Bootstrap下拉菜单(高级版) // 98
6.4 Bootstrap滚动监听 // 101
6.5 Bootstrap可切换式标签页 // 104
6.6 Bootstrap提示框 // 107
6.6.1 工具提示框 // 107
6.6.2 弹出框 // 109
6.6.3 警告框 // 113
6.7 Bootstrap按钮 // 114
6.7.1 状态按钮 // 114
6.7.2 复选按钮 // 116
6.7.3 单选按钮 // 117
6.8 Bootstrap中的卡片与折叠 // 118
6.9 Bootstrap幻灯 // 121
6.10 本章小结 // 123
第7章 Bootstrap响应式多媒体 // 124
7.1 Bootstrap图标的响应式 // 124
7.2 Bootstrap图像的响应式 // 126
7.2.1 可适配的图像 // 126
7.2.2 图像网格 // 128
7.3 Bootstrap视频的响应式 // 133
7.4 本章小结 // 134
第8章 Bootstrap扁平化风格页面 // 135
8.1 扁平化设计概述 // 135
8.1.1 介绍 // 135
8.1.2 设计理念 // 136
8.1.3 页面架构 // 136
8.2 页眉设计 // 137
8.2.1 导航条 // 138
8.2.2 导航条图标 // 138
8.2.3 导航条功能菜单 // 139
8.2.4 页眉标题 // 144
8.3 左侧导航设计 // 145
8.4 页面主体设计 // 148
8.4.1 图片列表 // 148
8.4.2 提交表单 // 150
8.4.3 文本列表 // 153
8.5 页脚设计 // 155
8.6 本章小结 // 156
第9章 Bootstrap图片幻灯页面 // 157
9.1 图片幻灯风格页面设计概述 // 157
9.2 页眉设计 // 158
9.3 页面主体设计 // 160
9.3.1 图片幻灯 // 160
9.3.2 图标列表 // 162
9.3.3 图片特辑 // 164
9.4 本章小结 // 165
第10章 Bootstrap风格按钮 // 166
10.1 风格按钮设计概述 // 166
10.2 形状与尺寸风格按钮 // 167
10.3 边框风格按钮 // 169
10.4 下拉菜单风格按钮 // 171
10.5 按钮组风格按钮 // 172
10.6 本章小结 // 174
第11章 Bootstrap响应式表格设计 // 175
11.1 表格设计概述 // 175
11.2 Bootstrap基本表格 // 177
11.3 Bootstrap数组表格 // 179
11.4 Bootstrap Ajax表格 // 180
11.5 本章小结 // 182
第12章 Bootstrap响应式图表设计 // 183
12.1 图表设计概述 // 183
12.2 柱状图图表 // 185
12.3 折线图图表 // 187
12.4 饼状图图表 // 191
12.5 本章小结 // 195
第13章 jQuery UI Bootstrap工具 // 196
13.1 jQuery UI Bootstrap工具概述 // 196
13.1.1 jQuery UI工具 // 196
13.1.2 jQuery UI Bootstrap工具 // 197
13.1.3 jQuery UI Bootstrap应用 // 197
13.2 按钮(Button) // 198
13.2.1 基本样式按钮 // 199
13.2.2 Set样式按钮 // 200
13.2.3 工具条样式按钮 // 202
13.3 折叠面板(Accordion) // 203
13.4 对话框(Dialog) // 206
13.4.1 非模态对话框 // 206
13.4.2 模态对话框 // 208
13.5 标签页 // 211
13.5.1 基本样式标签页 // 211
13.5.2 可编辑样式标签页 // 213
13.6 Overlay与Shadow // 220
13.7 Highlight与Error // 221
13.8 日期选择器(Datepicker) // 223
13.9 滑块 // 224
13.9.1 水平滑块 // 224
13.9.2 垂直滑块 // 225
13.10 自动完成 // 227
13.11 下拉菜单 // 229
13.12 提示信息 // 231
13.13 微调按钮 // 233
13.14 本章小结 // 236
第14章 jQuery Mobile 框架与Bootstrap主题风格 // 237
14.1 jQuery Mobile Bootstrap概述 // 237
14.1.1 jQuery Mobile框架 // 237
14.1.2 Bootstrap主题风格 // 238
14.1.3 应用开发基础 // 238
14.2 主页设计 // 240
14.3 按钮设计 // 242
14.4 列表设计 // 245
14.5 导航设计 // 248
14.6 表单设计 // 252
14.6.1 输入框 // 252
14.6.2 滑块 // 254
14.6.3 切换开关 // 256
14.6.4 复选框 // 258
14.6.5 单选框 // 261
14.6.6 下拉菜单 // 263
14.6.7 提交按钮 // 265
14.7 本章小结 // 269
第15章 实战:应用Bootstrap实现一个贴吧管理页面 // 270
15.1 项目设计概述 // 270
15.2 页面布局设计 // 271
15.2.1 引入Bootstrap框架 // 271
15.2.2 实现页面布局代码 // 272
15.3 页面导航栏设计 // 273
15.3.1 构建导航的整体架构 // 273
15.3.2 设计标题和导航链接 // 274
15.3.3 设计搜索框和通知系统 // 275
15.3.4 设计管理员登录系统 // 276
15.3.5 设计响应式导航 // 278
15.4 左侧边栏设计 // 280
15.5 页面主体设计 // 281
15.5.1 页面主体功能的头部 // 282
15.5.2 页面主体功能的帖子列表 // 284
15.6 本章小结 // 287
附录 CSS选择器速览 // 288
猜您喜欢