第1章 初识Bootstrap 1
1.1 Bootstrap概述 1
1.1.1 Bootstrap发展历史 1
1.1.2 Bootstrap的版本 2
1.1.3 浏览器支持 4
1.2 Bootstrap特性 5
1.2.1 Bootstrap的构成 5
1.2.2 Bootstrap的特色 6
1.2.3 Bootstrap的功能 7
1.3 Bootstrap应用浏览 8
1.3.1 Bootstrap网站 8
1.3.2 Bootstrap插件 9
1.4 Bootstrap开发工具和资源 10
1.4.1 Bootstrap开发工具 10
1.4.2 Bootstrap资源 11
第2章 使用Bootstrap 12
2.1 下载和定制Bootstrap 12
2.1.1 下载Bootstrap 12
2.1.2 定制Bootstrap 14
2.2 认识Bootstrap结构 16
2.2.1 源码版Bootstrap文件结构 17
2.2.2 编译版Bootstrap文件结构 18
2.3 安装Bootstrap 19
2.3.1 本地安装 19
2.3.2 在线安装 20
2.4 实战案例 20
2.4.1 设计按钮 20
2.4.2 设计Tabs组件 22
2.4.3 设计企业首页 23
第3章 Bootstrap基本架构 27
3.1 响应式设计 27
3.1.1 认识响应式设计 27
3.1.2 响应式设计流程 29
3.1.3 设计响应式图片 29
3.1.4 设计响应式布局结构 31
3.1.5 自适应显示页面 35
3.1.6 设计响应式网站 39
3.2 使用Bootstrap栅格系统 42
3.2.1 网页栅格系统设计基础 43
3.2.2 认识Bootstrap栅格系统 47
3.2.3 Bootstrap响应设备类型 50
3.2.4 Bootstrap设备优先化栅格 51
3.2.5 Bootstrap固定栅格和流式栅格 52
3.2.6 Bootstrap栅格堆叠和水平排列 54
3.2.7 列偏移 57
3.2.8 列嵌套 60
3.2.9 列排序 61
第4章 CSS通用样式 64
4.1 版式 64
4.1.1 标题 64
4.1.2 文本 65
4.1.3 强调 67
4.1.4 对齐 68
4.1.5 缩略语 68
4.1.6 地址 69
4.1.7 引用 70
4.1.8 列表 71
4.1.9 代码 73
4.2 表格 76
4.2.1 优化结构 76
4.2.2 默认风格 76
4.2.3 个性风格 77
4.2.4 表格行风格 79
4.2.5 响应式表格 80
4.3 表单 81
4.3.1 可支持表单控件 81
4.3.2 默认风格 83
4.3.3 布局风格 84
4.3.4 外观风格 87
4.3.5 状态风格 90
4.4 按钮 91
4.4.1 默认风格 91
4.4.2 定制风格 91
4.4.3 状态风格 93
4.5 图片 94
4.6 工具类 95
4.6.1 小工具类 95
4.6.2 响应式工具 97
第5章 CSS组件(上) 100
5.1 正确使用CSS组件 100
5.2 下拉菜单 102
5.2.1 定义下拉菜单 102
5.2.2 设置下拉菜单 103
5.3 按钮组 105
5.3.1 定义按钮组 105
5.3.2 定义按钮导航条 106
5.3.3 设计按钮布局和样式 107
5.4 按钮式下拉菜单 109
5.4.1 定义按钮式下拉菜单 109
5.4.2 设计分隔样式 110
5.4.3 设计向上弹出式菜单 111
5.5 导航 112
5.5.1 定义导航组件 112
5.5.2 设置导航选项 113
5.5.3 绑定导航和下拉菜单 115
5.5.4 激活标签页 117
5.6 导航条 118
5.6.1 定义导航条 118
5.6.2 绑定对象 121
5.6.3 设计导航条 123
第6章 CSS组件(下) 128
6.1 面包屑和分页 128
6.1.1 定义面包屑 128
6.1.2 定义分页组件 129
6.1.3 设置分页选项 130
6.1.4 定义翻页组件 131
6.2 标签和徽章 132
6.3 缩略图 134
6.3.1 认识图像占位符 134
6.3.2 定义缩略图 135
6.4 警告框 137
6.4.1 定义警告框 137
6.4.2 添加关闭按钮 138
6.4.3 添加链接 139
6.5 进度条 140
6.5.1 定义进度条 140
6.5.2 设置个性进度条 141
6.6 媒体 142
6.6.1 媒体版式 142
6.6.2 媒体列表 143
6.7 版式 144
6.7.1 大屏幕区块 144
6.7.2 页面标题 145
6.7.3 列表组 146
6.7.4 面板 147
6.7.5 Well 151
6.8 输入框 152
6.8.1 修饰文本框 152
6.8.2 设计尺寸 153
6.8.3 按钮文本框 153
6.8.4 按钮式下拉菜单 154
6.8.5 定义分段按钮下拉菜单 155
6.9 字体图标 155
第7章 JavaScript插件(上) 157
7.1 插件概述 157
7.1.1 插件分类 157
7.1.2 安装插件 157
7.1.3 调用插件 158
7.1.4 共享插件 159
7.1.5 事件 159
7.1.6 过渡效果 159
7.2 模态框 160
7.2.1 定义模态框 160
7.2.2 调用模态框 163
7.2.3 控制模态框 164
7.2.4 添加用户行为 166
7.3 下拉菜单 167
7.3.1 调用下拉菜单 167
7.3.2 添加用户行为 168
7.4 滚动监听 169
7.4.1 定义滚动监听 169
7.4.2 调用滚动监听 172
7.4.3 添加用户行为 173
7.5 标签页 174
7.5.1 定义标签页 175
7.5.2 调用标签页 176
7.5.3 添加用户行为 176
7.6 工具提示 178
7.6.1 定义工具提示 178
7.6.2 调用工具提示 179
7.6.3 添加用户行为 181
第8章 JavaScript插件(下) 182
8.1 弹出框 182
8.1.1 定义弹出框 182
8.1.2 调用弹出框 184
8.1.3 添加用户行为 185
8.2 警告框 186
8.2.1 定义警告框 186
8.2.2 添加用户行为 187
8.3 按钮 188
8.3.1 定义按钮 189
8.3.2 设置状态 190
8.4.折叠 193
8.4.1 定义折叠 193
8.4.2 调用折叠 196
8.4.3 添加用户行为 198
8.5 轮播 199
8.5.1 定义轮播 199
8.5.2 调用轮播 202
8.5.3 添加用户行为 204
8.6 Affix 204
8.6.1 定义Affix 205
8.6.2 调用Affix 207
第9章 Bootstrap源码解析 208
9.1 CSS组件设计原则 208
9.1.1 类型 208
9.1.2 模块 211
9.1.3 扩展 213
9.1.4 设备优先 214
9.1.5 基于HTML5 214
9.2 全局样式 215
9.2.1 设计思路 215
9.2.2 样式重用 216
9.2.3 CSS重设 218
9.3 JavaScript插件 220
9.3.1 结构分析 220
9.3.2 公共类定义 221
9.3.3 插件定义 222
9.3.4 避免污染 223
9.3.5 Data接口 223
9.4 插件封装 224
9.4.1 基本套式 224
9.4.2 严格模式 225
9.4.3 this指针 228
第10章 扩展组件 230
10.1 组件扩展概述 230
10.1.1 CSS覆盖 230
10.1.2 在线定制 231
10.1.3 第三方生成器 231
10.1.4 LESS定制 233
10.1.5 模块化修改 234
10.1.6 扩展建议 234
10.2 案例:扩展分页组件 236
10.2.1 自定义形状 236
10.2.2 自定义颜色 238
第11章 开发插件 240
11.1 jQuery插件概述 240
11.1.1 jQuery插件形式 240
11.1.2 jQuery插件规范 240
11.1.3 封装代码 242
11.1.4 定义参数 244
11.1.5 扩展功能 245
11.1.6 保护隐私 246
11.1.7 避免破坏性 247
11.2 实战案例 248
11.2.1 设计思路 248
11.2.2 效果预览 249
11.2.3 配置参数 252
11.2.4 代码实现 253
第12章 使用第三方插件 257
12.1 Bsie 257
12.1.1 使用Bsie插件 258
12.1.2 手动修补Bsie 259
12.2 Bootstrap Metro 260
12.3 Color Picker 264
12.3.1 使用Color Picker 264
12.3.2 配置Color Picker 265
12.4 Date Picker 268
12.4.1 使用Date Picker 268
12.4.2 配置Date Picker 269
12.5 jQuery UI Bootstrap 274
12.6 Flat UI 280
第13章 配置Bootstrap样式 282
13.1 认识LESS 282
13.1.1 LESS概述 282
13.1.2 LESS基本特性 283
13.1.3 比较LESS和SASS 285
13.1.4 LESS参考网站和工具 285
13.2 使用LESS 286
13.3 LESS基本语法 290
13.3.1 变量 291
13.3.2 样式混合 291
13.3.3 参数混合 292
13.3.4 模式匹配 294
13.3.5 条件表达式 296
13.3.6 嵌套规则 298
13.3.7 运算 300
13.3.8 Color函数 300
13.3.9 Math函数 301
13.3.10 作用域 302
13.3.11 命名空间 302
13.3.12 注释 303
13.3.13 导入 304
13.3.14 字符串插值 304
13.3.15 转义字符 304
13.3.16 JavaScript表达式 304
13.4 在Bootstrap 3.0中使用LESS 306
第14章 案例开发:服装品牌网站 309
14.1 设计思路 309
14.1.1 内容 309
14.1.2 结构 309
14.1.3 效果 309
14.2 首页设计 310
14.2.1 编写结构 310
14.2.2 设计样式 311
14.2.3 设计图片焦点效果 315
14.2.4 设计设备响应样式 318
14.3 其他页设计 318
14.3.1 设计师展示 318
14.3.2 联系表单 321
14.3.3 关于我们 323
14.3.4 品牌展示 324
第15章 案例开发:酒店预定微信wap网站 326
15.1 设计思路 326
15.1.1 内容 326
15.1.2 结构 326
15.1.3 效果 327
15.2 设计首页 328
15.3 设计登录页 330
15.4 选择城市 331
15.5 选择酒店 335
15.6 预定酒店 335
第16章 案例开发:团队营销网站 340
16.1 设计思路 340
16.1.1 网站结构 340
16.1.2 设计效果 340
16.2 准备工作 343
16.3 设计导航条 345
16.4 设计主体内容 348
16.4.1 欢迎界面 348
16.4.2 服务项目 349
16.4.3 文件夹 349
16.4.4 关于我们 351
16.4.5 团队成员 352
16.4.6 交互表单 353
第17章 案例开发:个人摄影相册 355
17.1 设计思路 355
17.1.1 网站结构 355
17.1.2 设计效果 355
17.2 准备工作 356
17.3 设计单视图导航条 357
17.4 设计主体内容 359
17.4.1 焦点视图 359
17.4.2 关于我们 361
17.4.3 作品集 363
17.4.4 联系我们 365
第18章 案例开发:单词分享网站 367
18.1 准备工作 367
18.1.1 定制Bootstrap 367
18.1.2 初始化Bootstrap 368
18.2 首页设计 369
18.2.1 设计思路 369
18.2.2 设计结构 370
18.2.3 设计主菜单和按钮 371
18.2.4 设计轮播广告位 372
18.2.5 设计新闻区和版权区版式 375
18.3 阅读页设计 377
18.3.1 设计响应式主菜单 377
18.3.2 设计附加导航菜单 378
18.3.3 设计页面版式 379
18.4 小组页面设计 381
18.5 打卡页设计 384
18.5.1 设计页面网格系统 384
18.5.2 设计滚动监听和附加导航 385
18.6 词根页面设计 387
第19章 案例开发:企业网站 390
19.1 设计思路 390
19.1.1 网站结构 390
19.1.2 设计效果 390
19.2 准备工作 392
19.3 设计页头 393
19.4 设计实用导航 395
19.5 设计响应式布局 397
19.6 设计脚注 399