Bootstrap Web设计与开发实战

　　本书由浅入深，全面、系统、详尽地介绍了Bootstrap框架相关技术在Web和移动Web开发领域的应用。书中提供了大量的代码示例，读者可以通过这些示例深入理解Bootstrap框架相关的知识点，同时还可以举一反三，将这些示例应用到实战项目之中。本书从基本原理到实战应用，几乎涉及了Bootstrap框架Web开发领域的绝大部分内容，是一本集理论与实战的综合性参考书。本书共15章，分为三篇。*篇为Bootstrap基础，主要介绍Bootstrap框架的基础知识与开发入门等内容。第二篇为Bootstrap框架，主要介绍了Bootstrap脚手架、Bootstrap样式设计、Bootstrap组件设计、Bootstrap插件设计与Bootstrap多媒体设计等相关的内容。第三篇为Bootstrap实战，详细讲解了如何基于Bootstrap框架开发Web应用的过程与方法，同时还包括整合jQuery UI框架和jQuery Mobile框架开发移动应用的案例。本书适合所有想全面深入学习Bootstrap框架开发技术的人员阅读，尤其适合正在应用Bootstrap框架做移动应用开发的人员阅读。对于大中专院校相关专业的学生和培训机构的学员，本书也是一本不可多得的参考书。

　　杨旺功，男，博士在读，北京印刷学院新媒体学院数字媒体艺术专业教师，主要研究方向是信息与交互设计、虚拟现实、数字娱乐和新媒体艺术等，具有丰富的数字媒体交互产品设计和移动应用UI设计的教学经验。

目 录第1章 Bootstrap从何而来 11.1 初识Bootstrap 11.2 什么是响应式设计 21.3 响应式设计四大原则 31.3.1 移动优先还是PC优先 31.3.2 内容流 41.3.3 位图还是矢量图 41.3.4 相对单位还是固定单位 51.4 Bootstrap设计目标 51.4.1 优先针对移动设备 51.4.2 浏览器支持 61.4.3 响应式设计 61.5 本章小结 6第2章 Bootstrap开发环境 72.1 Bootstrap开发环境概述 72.1.1 下载Bootstrap开发包 72.1.2 Bootstrap开发包目录结构 92.1.3 在网站中使用Bootstrap框架 102.2 调用Bootstrap样式 112.3 调用Bootstrap组件 142.4 调用Bootstrap JS特效 162.5 实战：一个Bootstrap实现的响应式页面 172.6 本章小结 19第3章 Bootstrap脚手架 203.1 Bootstrap全局样式 203.1.1 什么是全局样式 203.1.2 基于HTML5文档类型 203.1.3 屏幕、排版与链接 213.1.4 用Normalize重置样式 223.2 栅格系统 223.2.1 默认栅格系统 223.2.2 流式栅格系统 263.3 页面布局 293.3.1 固定布局 293.3.2 流式布局 303.4 响应式设计 303.4.1 启用响应式特性 303.4.2 响应式Bootstrap特点 313.4.3 Bootstrap支持的设备 313.4.4 响应式布局辅助类 323.4.5 如何应用响应式布局 323.5 本章小结 32第4章 Bootstrap样式设计 334.1 Bootstrap排版 334.1.1 标题 334.1.2 页面主体 364.1.3 强调 374.1.4 缩略语 394.1.5 地址 404.1.6 引用 404.1.7 列表 424.1.8 描述 454.1.9 代码 474.2 Bootstrap表格 494.2.1 默认样式表格 494.2.2 斑马纹样式表格 514.2.3 圆角边框样式表格 524.2.4 鼠标悬停样式表格 534.2.5 带行属性样式表格 554.3 Bootstrap按钮 564.3.1 默认样式按钮 564.3.2 按钮大小样式 584.3.3 特殊样式按钮 594.4 Bootstrap图片 614.5 本章小结 61第5章 Bootstrap组件设计 625.1 Bootstrap下拉菜单 625.1.1 标签 625.1.2 对齐方式 635.1.3 禁用 645.1.4 子下拉菜单 655.2 Bootstrap按钮组 695.2.1 基本按钮组 695.2.2 工具栏按钮组 695.2.3 垂直按钮组 715.3 Bootstrap按钮式下拉菜单 715.4 Bootstrap导航 755.4.1 默认标签导航 755.4.2 pills标签导航 765.4.3 堆叠式标签导航 765.4.4 下拉菜单式标签导航 775.4.5 导航列表 785.4.6 标签页式导航 805.5 Bootstrap导航条 815.5.1 默认样式导航条 815.5.2 导航条表单 825.5.3 响应式导航条 845.6 Bootstrap分页 865.6.1 标准分页方式 865.6.2 翻页分页方式 875.7 Bootstrap标签与徽章 885.8 Bootstrap进度条 895.8.1 基本样式进度条 895.8.2 斜条纹样式进度条 905.8.3 堆叠样式进度条 915.9 Glyphicons字体图标 925.10 本章小结 93 第6章 Bootstrap插件设计 946.1 Bootstrap插件概述 946.1.1 单个或全部引入 946.1.2 data属性 956.1.3 事件 956.2 Bootstrap模态对话框 956.2.1 模态对话框说明 966.2.2 静态模态对话框 966.2.3 动态模态对话框 976.3 Bootstrap下拉菜单（高级版） 1006.4 Bootstrap滚动监听 1036.5 Bootstrap可切换式标签页 1066.6 Bootstrap提示框 1096.6.1 工具提示框 1096.6.2 弹出框 1126.6.3 警告框 1166.7 Bootstrap按钮 1176.7.1 状态按钮 1186.7.2 复选按钮 1196.7.3 单选按钮 1206.8 Bootstrap折叠 1226.9 Bootstrap幻灯 1256.10 本章小结 126第7章 Bootstrap响应式多媒体 1277.1 Bootstrap图标的响应式 1277.2 Bootstrap图像的响应式 1297.2.1 可适配的图像 1297.2.2 图像网格 1317.3 Bootstrap视频的响应式 1377.4 本章小结 137第8章 Bootstrap扁平化风格页面 1388.1 扁平化设计概述 1388.1.1 介绍 1388.1.2 设计理念 1398.1.3 页面架构 1398.2 页眉设计 1418.2.1 导航条 1418.2.2 导航条图标 1418.2.3 导航条功能菜单 1438.2.4 页眉标题 1478.3 左侧导航设计 1488.4 页面主体设计 1518.4.1 图片列表 1518.4.2 提交表单 1538.4.3 文本列表 1568.5 页脚设计 1588.6 本章小结 159第9章 Bootstrap图片幻灯页面 1609.1 图片幻灯风格页面设计概述 1609.2 页眉设计 1619.3 页面主体设计 1639.3.1 图片幻灯 1639.3.2 图标列表 1669.3.3 图片特辑 1679.4 本章小结 168第10章 Bootstrap风格按钮 16910.1 风格按钮设计概述 16910.2 形状与尺寸风格按钮 17010.3 边框风格按钮 17210.4 下拉菜单风格按钮 17410.5 按钮组风格 17610.6 本章小结 177第11章 Bootstrap响应式表格设计 17811.1 表格设计概述 17811.2 Bootstrap基本表格 18011.3 Bootstrap数组表格 18211.4 Bootstrap Ajax表格 18311.5 本章小结 185 第12章 Bootstrap响应式图表设计 18612.1 图表设计概述 18612.2 柱状图图表 18812.3 折线图图表 19012.4 饼状图图表 19512.5 本章小结 198第13章 jQuery UI Bootstrap工具 19913.1 jQuery UI Bootstrap工具概述 19913.1.1 jQuery UI工具 19913.1.2 jQuery UI Bootstrap工具 20013.1.3 jQuery UI Bootstrap应用 20013.2 按钮（Button） 20113.2.1 基本样式按钮 20213.2.2 Set样式按钮 20313.2.3 工具条样式按钮 20513.3 折叠面板（Accordion） 20613.4 对话框（Dialog） 20913.4.1 非模态对话框 20913.4.2 模态对话框 21113.5 标签页（Tabs） 21413.5.1 基本样式标签页 21413.5.2 可编辑样式标签页 21713.6 Overlay与Shadow 22313.7 Highlight与Error 22413.8 日期选择器（Datepicker） 22613.9 滑块（Slider） 22713.9.1 水平滑块（Horizontal Slider） 22713.9.2 垂直滑块（Vertical Slider） 22813.10 自动完成（Autocomplete） 23013.11 下拉菜单（Menu） 23213.12 提示信息（Tooltip） 23413.13 微调按钮（Spinner） 23613.14 本章小结 239第14章 jQuery Mobile 框架与Bootstrap主题风格 24014.1 jQuery Mobile Bootstrap概述 24014.1.1 jQuery Mobile框架 24014.1.2 Bootstrap主题风格 24114.1.3 应用开发基础 24114.2 主页设计 24314.3 按钮设计 24514.4 列表设计 24814.5 导航设计 25114.6 表单设计 25514.6.1 输入框 25514.6.2 滑块 25814.6.3 切换开关 26014.6.4 复选框 26214.6.5 单选框 26414.6.6 下拉菜单 26714.6.7 提交按钮 26914.7 本章小结 273第15章 实战：应用Bootstrap实现一个贴吧管理页面 27415.1 项目设计概述 27415.2 页面布局设计 27515.2.1 引入Bootstrap框架 27515.2.2 实现页面布局代码 27615.3 页面导航栏设计 27715.3.1 构建导航的整体架构 27715.3.2 设计标题和导航链接 27815.3.3 设计搜索框和通知系统 27915.3.4 设计管理员登录系统 28015.3.5 设计响应式导航 28215.4 左侧边栏设计 28415.5 页面主体设计 28515.5.1 页面主体功能的头部 28615.5.2 页面主体功能的帖子列表 28715.6 本章小结 290附录 CSS选择器速览 291