Bootstrap Web设计与开发实战PDF电子书下载

第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相对单位还是固定单位 5

1.4 Bootstrap设计目标 5

1.4.1优先针对移动设备 5

1.4.2浏览器支持 6

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特效 16

2.5实战：一个Bootstrap实现的响应式页面 17

2.6本章小结 19

第3章Bootstrap脚手架 20

3.1 Bootstrap全局样式 20

3.1.1什么是全局样式 20

3.1.2基于HTML5文档类型 20

3.1.3屏幕、排版与链接 21

3.1.4用Normalize重置样式 22

3.2栅格系统 22

3.2.1默认栅格系统 22

3.2.2流式栅格系统 26

3.3页面布局 29

3.3.1固定布局 29

3.3.2流式布局 30

3.4响应式设计 30

3.4.1启用响应式特性 30

3.4.2响应式Bootstrap特点 31

3.4.3 Bootstrap支持的设备 31

3.4.4响应式布局辅助类 32

3.4.5如何应用响应式布局 32

3.5本章小结 32

第4章Bootstrap样式设计 33

4.1 Bootstrap排版 33

4.1.1标题 33

4.1.2页面主体 36

4.1.3强调 37

4.1.4缩略语 39

4.1.5地址 40

4.1.6引用 40

4.1.7列表 42

4.1.8描述 45

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禁用 64

5.1.4子下拉菜单 65

5.2 Bootstrap按钮组 69

5.2.1基本按钮组 69

5.2.2工具栏按钮组 69

5.2.3垂直按钮组 71

5.3 Bootstrap按钮式下拉菜单 71

5.4 Bootstrap导航 75

5.4.1默认标签导航 75

5.4.2 pills标签导航 76

5.4.3堆叠式标签导航 76

5.4.4下拉菜单式标签导航 77

5.4.5导航列表 78

5.4.6标签页式导航 80

5.5 Bootstrap导航条 81

5.5.1默认样式导航条 81

5.5.2导航条表单 82

5.5.3响应式导航条 84

5.6 Bootstrap分页 86

5.6.1标准分页方式 86

5.6.2翻页分页方式 87

5.7 Bootstrap标签与徽章 88

5.8 Bootstrap进度条 89

5.8.1基本样式进度条 89

5.8.2斜条纹样式进度条 90

5.8.3堆叠样式进度条 91

5.9 Glyphicons字体图标 92

5.10本章小结 93

第6章Bootstrap插件设计 94

6.1 Bootstrap插件概述 94

6.1.1单个或全部引入 94

6.1.2 data属性 95

6.1.3事件 95

6.2 Bootstrap模态对话框 95

6.2.1模态对话框说明 96

6.2.2静态模态对话框 96

6.2.3动态模态对话框 97

6.3 Bootstrap下拉菜单（高级版） 100

6.4 Bootstrap滚动监听 103

6.5 Bootstrap可切换式标签页 106

6.6 Bootstrap提示框 109

6.6.1工具提示框 109

6.6.2弹出框 112

6.6.3警告框 116

6.7 Bootstrap按钮 117

6.7.1状态按钮 118

6.7.2复选按钮 119

6.7.3单选按钮 120

6.8 Bootstrap折叠 122

6.9 Bootstrap幻灯 125

6.10本章小结 126

第7章Bootstrap响应式多媒体 127

7.1 Bootstrap图标的响应式 127

7.2 Bootstrap图像的响应式 129

7.2.1可适配的图像 129

7.2.2图像网格 131

7.3 Bootstrap视频的响应式 137

7.4本章小结 137

第8章Bootstrap扁平化风格页面 138

8.1扁平化设计概述 138

8.1.1介绍 138

8.1.2设计理念 139

8.1.3页面架构 139

8.2页眉设计 141

8.2.1导航条 141

8.2.2导航条图标 141

8.2.3导航条功能菜单 143

8.2.4页眉标题 147

8.3左侧导航设计 148

8.4页面主体设计 151

8.4.1图片列表 151

8.4.2提交表单 153

8.4.3文本列表 156

8.5页脚设计 158

8.6本章小结 159

第9章Bootstrap图片幻灯页面 160

9.1图片幻灯风格页面设计概述 160

9.2页眉设计 161

9.3页面主体设计 163

9.3.1图片幻灯 163

9.3.2图标列表 166

9.3.3图片特辑 167

9.4本章小结 168

第10章Bootstrap风格按钮 169

10.1风格按钮设计概述 169

10.2形状与尺寸风格按钮 170

10.3边框风格按钮 172

10.4下拉菜单风格按钮 174

10.5按钮组风格 176

10.6本章小结 177

第11章Bootstrap响应式表格设计 178

11.1表格设计概述 178

11.2 Bootstrap基本表格 180

11.3 Bootstrap数组表格 182

11.4 Bootstrap Ajax表格 183

11.5本章小结 185

第12章Bootstrap响应式图表设计 186

12.1图表设计概述 186

12.2柱状图图表 188

12.3折线图图表 190

12.4饼状图图表 195

12.5本章小结 198

第13章jQuery UI Bootstrap工具 199

13.1 jQuery UI Bootstrap工具概述 199

13.1.1 jQuery UI工具 199

13.1.2 jQuery UI Bootstrap工具 200

13.1.3 jQuery UI Bootstrap应用 200

13.2按钮（Button） 201

13.2.1基本样式按钮 202

13.2.2 Set样式按钮 203

13.2.3工具条样式按钮 205

13.3折叠面板（Accordion） 206

13.4对话框（Dialog） 209

13.4.1非模态对话框 209

13.4.2模态对话框 211

13.5标签页（Tabs） 214

13.5.1基本样式标签页 214

13.5.2可编辑样式标签页 217

13.6 Overlay与Shadow 223

13.7 Highlight与Error 224

13.8日期选择器（Datepicker） 226

13.9滑块（Slider） 227

13.9.1水平滑块（Horizontal Slider） 227

13.9.2垂直滑块（Vertical Slider） 228

13.10自动完成（Autocomplete） 230

13.11下拉菜单（Menu） 232

13.12提示信息（Tooltip ） 234

13.13微调按钮（Spinner） 236

13.14本章小结 239

第14章jQuery Mobile框架与Bootstrap主题风格 240

14.1 jQuery Mobile＋Bootstrap概述 240

14.1.1 jQuery Mobile框架 240

14.1.2 Bootstrap主题风格 241

14.1.3应用开发基础 241

14.2主页设计 243

14.3按钮设计 245

14.4列表设计 248

14.5导航设计 251

14.6表单设计 255

14.6.1输入框 255

14.6.2滑块 258

14.6.3切换开关 260

14.6.4复选框 262

14.6.5单选框 264

14.6.6下拉菜单 267

14.6.7提交按钮 269

14.7本章小结 273

第15章 实战：应用Bootstrap实现一个贴吧管理页面 274

15.1项目设计概述 274

15.2页面布局设计 275

15.2.1引入Bootstrap框架 275

15.2.2实现页面布局代码 276

15.3页面导航栏设计 277

15.3.1构建导航的整体架构 277

15.3.2设计标题和导航链接 278

15.3.3设计搜索框和通知系统 279

15.3.4设计管理员登录系统 280

15.3.5设计响应式导航 282

15.4左侧边栏设计 284

15.5页面主体设计 285

15.5.1页面主体功能的头部 286

15.5.2页面主体功能的帖子列表 287

15.6本章小结 290

附录CSS选择器速览 291