Bootstrap 4 Web设计与开发实战

图书标准信息

• 作者 杨旺功
• 出版社 清华大学出版社
• 出版时间 2020-07
• 版次 1
• ISBN 9787302554660
• 定价 59.00元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸
• 页数 289页
• 字数 517千字

【内容简介】

全书分为三篇，从目录能让读者一看就懂，*篇介绍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