Bootstrap响应式网站开发实战PDF电子书下载

第1章 认识Bootstrap 1

1.1 为什么要学习Bootstrap 2

1.2 Bootstrap为何如此流行 3

1.2.1 功能强大和样式美观的强强联合 3

1.2.2 高度可定制性 3

1.2.3 丰富的生态圈 4

1.2.4 布局兼容性良好 5

1.3 Bootstrap的版本发展 5

1.3.1 Bootstrap 1 5

1.3.2 Bootstrap 2 5

1.3.3 Bootstrap 3 7

1.3.4 Bootstrap 4 8

本章总结 8

本章作业 8

第2章 Bootstrap框架基础 9

2.1 引入Bootstrap 10

2.1.1 在自己的项目中引入Bootstrap 10

2.1.2 添加Bootstrap的class实现基本样式 11

2.2 Bootstrap的通用组件调用 12

2.3 添加JavaScript动态效果 13

本章总结 14

本章作业 14

第3章 Bootstrap栅格系统 15

3.1 固定布局的概念 16

3.2 固定布局的栅格系统 17

3.3 流式布局的栅格系统 18

3.4 响应式布局的栅格系统 18

本章总结 20

本章作业 21

第4章 Bootstrap的基本样式 22

4.1 字体版式 23

4.1.1 标题 23

4.1.2 全局设置 24

4.2 表格 24

4.3 按钮 26

4.4 表单 27

4.5 图片 29

本章总结 30

本章作业 31

第5章 使用Bootstrap的组件 32

5.1 下拉菜单 33

5.2 按钮组 34

5.3 input控件组 35

5.4 导航 35

5.5 头部导航 36

5.6 列表组 39

5.7 分页 40

5.8 标签与徽章 41

5.9 缩略图 42

5.10 面板 43

5.11 进度条 45

5.12 多媒体对象 47

本章总结 48

本章作业 48

第6章 LESS和SASS 51

6.1 为什么要用CSS预处理程序 52

6.1.1 CSS不能设置变量 52

6.1.2 冗余重复的代码 52

6.1.3 无法实现计算功能 52

6.1.4 命名空间与作用域 53

6.1.5 CSS缺陷总结 54

6.2 LESS的应用 54

6.2.1 LESS介绍 54

6.2.2 LESS使用基础 55

6.2.3 使用变量 55

6.2.4 使用混合 56

6.2.5 嵌套规则 57

6.2.6 函数和运算 57

6.2.7 LESS语言总结 58

6.3 SASS的应用 58

6.3.1 SASS介绍 58

6.3.2 SASS安装和使用 59

6.3.3 使用变量 59

6.3.4 计算 60

6.3.5 嵌套 60

6.3.6 代码重用 60

6.3.7 高级用法 62

6.3.8 SASS总结 62

6.4 使用SASS的扩展库Compass 63

6.4.1 Reset模块 64

6.4.2 CSS3模块 64

6.4.3 Utilities模块 66

6.4.4 Helpers函数 67

6.4.5 Compass总结 68

本章总结 68

第7章 使用Bootstrap插件 69

7.1 概述 70

7.2 过渡插件 70

7.3 模态对话框 70

7.3.1 用法 71

7.3.2 对话框结构 71

7.4 标签页切换 72

7.4.1 标签页用法 73

7.4.2 用jQuery实现标签页切换 73

7.5 工具提示条 73

7.5.1 用法 73

7.5.2 用js使标签页生效 74

7.6 弹出框 74

7.6.1 用法 74

7.6.2 用js使弹出框生效 74

7.7 提示信息 74

7.7.1 用法 75

7.7.2 选项 75

7.8 按钮 75

7.8.1 按钮的Loading状态 75

7.8.2 按钮组的状态设置 76

7.9 折叠 76

7.9.1 用法 77

7.9.2 选项 78

7.10 幻灯片 78

7.10.1 用法 79

7.10.2 选项 79

本章总结 80

本章作业 80

第8章 定制及优化Bootstrap 81

8.1 在官方网站进行Bootstrap定制 81

8.2 修改源代码定制Bootstrap 83

8.3 其他Bootstrap资源 86

本章总结 87

本章作业 88

第9章 开发响应式企业网站 89

9.1 布局企业站首页 90

9.1.1 准备SASS 91

9.1.2 构建页面框架 91

9.2 设计首页 91

9.2.1 设计index页面导航 91

9.2.2 设计安全展示区 94

9.2.3 添加搜索栏 94

9.2.4 主体内容区块 95

9.2.5 添加另一主体内容区块 96

9.2.6 添加一个两栏图文区块 97

9.2.7 添加另一个两栏图文区块 98

9.2.8 添加footer区块 99

9.2.9 添加页面样式 100

9.3 设计about.html页面 112

9.3.1 保留页面通用部分，添加about.html页面区块 112

9.3.2 添加页面主体区块 112

9.3.3 添加团队展示区块 115

9.3.4 添加另一标题区块 116

9.3.5 为about.html页面添加样式 116

9.4 设计services.html页面 118

9.4.1 保留页面通用部分，修改主体页面区块 118

9.4.2 添加what we do区块 122

9.4.3 添加scss样式 124

9.5 设计blog.html页面 126

9.5.1 保留页面通用部分，修改主体页面区块 126

9.5.2 添加blog.html样式 129

9.6 设计contact.html页面 130

9.6.1 保留页面通用部分，添加公司地址 130

9.6.2 添加用户表单 131

9.7 用媒体查询进行移动端优化设计 132

本章总结 133

本章作业 133

第10章 网站后台管理系统 135

10.1 项目开始 136

10.2 页面布局 136

10.2.1 引入Bootstrap 3框架 137

10.2.2 编写布局代码 137

10.3 实现导航栏 138

10.3.1 构建导航的框架代码 138

10.3.2 填写标题和导航链接 139

10.3.3 添加管理员和退出系统按钮 139

10.3.4 添加管理员登录信息 140

10.3.5 为导航添加图标并设置响应式导航 141

10.4 实现左侧边栏 143

10.5 实现主功能部分 143

10.5.1 主功能的头部 143

10.5.2 内容管理的文章列表 145

本章总结 149

本章作业 149

第11章 使用Bootstrap实现电商网站 151

11.1 设计电商首页index.html 152

11.1.1 搭建Bootstrap框架 152

11.1.2 为商城创建导航菜单 153

11.1.3 向导航添加目录和导航链接 154

11.1.4 为页面添加Banner 156

11.1.5 添加产品目录 157

11.1.6 为网站添加底部Footer 158

11.1.7 添加产品列表及产品介绍 159

11.2 设计购买页面buy.html 162

11.3 设计列表页category.html 166

11.4 设计产品详情页product.html 166

本章总结 173

本章作业 174

第12章 Bootstrap内核解码 175

12.1 Bootstrap设计思想 176

12.1.1 12列栅格系统 176

12.1.2 样式类型化 177

12.1.3 代码松散与耦合的处理 178

12.1.4 继承可扩展性 179

12.2 Bootstrap框架解析 180

12.2.1 源码结构 180

12.2.2 类定义 181

12.2.3 插件定义 183

12.2.4 命名冲突的解决 184

12.2.5 数据接口 184

12.3 定义jQuery插件 185

12.3.1 jQuery插件形式 185

12.3.2 jQuery插件规范 185

12.3.3 jQuery插件封装 187

本章总结 189

本章作业 189