Bootstrap Web设计与开发实战

内容简介

全书分为三篇,从目录能让读者一看就懂,第一篇介绍Bootstrap的环境搭建和创建第一个使用Bootstrap的网页;第二篇详细介绍Bootstrap中各个组件的使用,包括特效、多媒体、网页布局等等,这些能帮我们快速开发Web页面;第三篇是实战篇,利用网页中常见的一些表格、图表、问答案例,帮助我们更深入的学习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