Bootstrap响应式网站开发实战

Bootstrap 是2011 年8 月Tiwtter 推出的开源前端框架，现在Bootstrap 已经成为流行的前端UI 框架，本书着力于Bootstrap 的内核开发原理，通过大量案例和讲解代码的方式，让读者能感受Bootstrap 的LESS 文件应用于自定义样式的强大威力，以及掌握用Bootstrap 的JavaScript 插件设计专业的用户交互。案例由浅入深，既各自独立，又环环相扣，丰富的代码加上细致的讲解，让读者极易上手。

第1 章 认识Bootstrap

1.1 为什么要学习Bootstrap

1.2 Bootstrap 为何如此流行

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

1.2.2 高度可定制性

1.2.3 丰富的生态圈

1.2.4 布局兼容性良好

1.3 Bootstrap 的版本发展

1.3.1 Bootstrap 1

1.3.2 Bootstrap 2

1.3.3 Bootstrap 3

1.3.4 Bootstrap 4

本章总结

本章作业

第2 章 Bootstrap 框架基础

2.1 引入Bootstrap

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

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

2.2 Bootstrap 的通用组件调用

2.3 添加JavaScript 动态效果

本章总结

本章作业

第3 章 Bootstrap 栅格系统

3.1 固定布局的概念

3.2 固定布局的栅格系统

3.3 流式布局的栅格系统

3.4 响应式布局的栅格系统

本章总结

本章作业

Bootstrap 响应式网站开发实战

第4 章 Bootstrap 的基本样式

4.1 字体版式

4.1.1 标题

4.1.2 全局设置

4.2 表格

4.3 按钮

4.4 表单

4.5 图片

本章总结

本章作业

第5 章 使用Bootstrap 的组件

5.1 下拉菜单

5.2 按钮组

5.3 input 控件组

5.4 导航

5.5 头部导航

5.6 列表组

5.7 分页

5.8 标签与徽章

5.9 缩略图

5.10 面板

5.11 进度条

5.12 多媒体对象

本章总结

本章作业

第6 章 LESS 和SASS

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

6.1.1 CSS 不能设置变量

6.1.2 冗余重复的代码

6.1.3 无法实现计算功能

6.1.4 命名空间与作用域

6.1.5 CSS 缺陷总结

6.2 LESS 的应用

6.2.1 LESS 介绍

6.2.2 LESS 使用基础

6.2.3 使用变量

6.2.4 使用混合

6.2.5 嵌套规则

?VII?

6.2.6 函数和运算

6.2.7 LESS 语言总结

6.3 SASS 的应用

6.3.1 SASS 介绍

6.3.2 SASS 安装和使用

6.3.3 使用变量

6.3.4 计算

6.3.5 嵌套

6.3.6 代码重用

6.3.7 高级用法

6.3.8 SASS 总结

6.4 使用SASS 的扩展库Compass

6.4.1 Reset 模块

6.4.2 CSS3 模块

6.4.3 Utilities 模块

6.4.4 Helpers 函数

6.4.5 Compass 总结

本章总结

第7 章 使用Bootstrap 插件

7.1 概述

7.2 过渡插件

7.3 模态对话框

7.3.1 用法

7.3.2 对话框结构

7.4 标签页切换

7.4.1 标签页用法

7.4.2 用jQuery 实现标签页切换

7.5 工具提示条

7.5.1 用法

7.5.2 用js 使标签页生效

7.6 弹出框

7.6.1 用法

7.6.2 用js 使弹出框生效

7.7 提示信息

7.7.1 用法

7.7.2 选项

7.8 按钮

7.8.1 按钮的Loading 状态

?VIII?

Bootstrap 响应式网站开发实战

7.8.2 按钮组的状态设置

7.9 折叠

7.9.1 用法

7.9.2 选项

7.10 幻灯片

7.10.1 用法

7.10.2 选项

本章总结

本章作业

第8 章 定制及优化Bootstrap

8.1 在官方网站进行Bootstrap 定制

8.2 修改源代码定制Bootstrap

8.3 其他Bootstrap 资源

本章总结

本章作业

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

9.1 布局企业站首页

9.1.1 准备SASS

9.1.2 构建页面框架

9.2 设计首页

9.2.1 设计index 页面导航

9.2.2 设计安全展示区

9.2.3 添加搜索栏

9.2.4 主体内容区块

9.2.5 添加另一主体内容区块

9.2.6 添加一个两栏图文区块

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

9.2.8 添加footer 区块

9.2.9 添加页面样式

9.3 设计about.html 页面

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

9.3.2 添加页面主体区块

9.3.3 添加团队展示区块

9.3.4 添加另一标题区块

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

9.4 设计services.html 页面

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

9.4.2 添加what we do 区块

?IX?

9.4.3 添加scss 样式

9.5 设计blog.html 页面

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

9.5.2 添加blog.html 样式

9.6 设计contact.html 页面

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

9.6.2 添加用户表单

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

本章总结

本章作业

第10 章 网站后台管理系统

10.1 项目开始

10.2 页面布局

10.2.1 引入Bootstrap 3 框架

10.2.2 编写布局代码

10.3 实现导航栏

10.3.1 构建导航的框架代码

10.3.2 填写标题和导航链接

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

10.3.4 添加管理员登录信息

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

10.4 实现左侧边栏

10.5 实现主功能部分

10.5.1 主功能的头部

10.5.2 内容管理的文章列表

本章总结

本章作业

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

11.1 设计电商首页index.html

11.1.1 搭建Bootstrap 框架

11.1.2 为商城创建导航菜单

11.1.3 向导航添加和导航链接 ??

11.1.4 为页面添加Banner

11.1.5 添加产品

11.1.6 为网站添加底部Footer

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

11.2 设计购买页面buy.html

11.3 设计列表页category.html

?X?

Bootstrap 响应式网站开发实战

11.4 设计产品详情页product.html

本章总结

本章作业

第12 章 Bootstrap 内核解码

12.1 Bootstrap 设计思想

12.1.1 12 列栅格系统

12.1.2 样式类型化

12.1.3 代码松散与耦合的处理

12.1.4 继承可扩展性

12.2 Bootstrap 框架解析

12.2.1 源码结构

12.2.2 类定义

12.2.3 插件定义

12.2.4 命名冲突的解决

12.2.5 数据接口

12.3 定义jQuery 插件

12.3.1 jQuery 插件形式

12.3.2 jQuery 插件规范

12.3.3 jQuery 插件封装

本章总结

本章作业

1.1 为什么要学习Bootstrap

随着移动设备的普及，如何让用户通过移动设备浏览网站时获得良好的视觉效果，已经是一个不可回避的问题。响应式Web 设计就是实现这个功能的有效方法。在这样的大趋势下，Bootstrap 应运而生。Bootstrap 是现在最流行的响应式UI 框架，它以移动设备优先，能够快速适应不同设备，如图1.1 所示，使用它编写响应式页面快捷、方便，解决了浏览器的兼容性问题。使用Bootstrap 后，很多开发者都会觉得自己再也不想回到使用原始的CSS 编写网页的日子。图1.1 响应式Web 适应不同设备Bootstrap 是Twitter 公司（www.twitter.com)于2011 年8 月开源的整体式前端框架，目的是帮助设计师和Web 前端开发人员快速有效地创建结构简单、性能优良、页面精致的Web 应用程序。经过短短几个月的时间就红遍全球，大量Bootstrap 风格的网站出现在互联网的信息浪潮之中，而应用更为广泛的是它的后台管理界面。笔者近两年接触的所有互

联网项目的后台均采用了Bootstrap 进行构建。

近年来，移动互联网、大数据、云计算、物联网、虚拟现实、机器人、无人驾驶、智能制造等新兴产业发展迅速，但国内人才培养却相对滞后，存在“基础人才多、骨干人才缺、战略人才稀，人才结构不均衡”的突出问题，这严重制约着我国战略新兴产业的快速发展。同时，“重使用、轻培养”的人才观依然存在，可持续性培养机制缺乏。因此，建立战略新兴产业人才培养体系，形成可持续发展的人才生态环境刻不容缓。

中关村作为我国高科技产业中心、战略新兴产业的策源地、创新创业的高地，对全国的战略新兴产业、创新创业的发展起着引领和示范作用，基于此，新迈尔（北京）科技有限公司依托中关村优质资源，聚集高新技术企业的技术总监、架构师、资深工程师，共同开发了与面向行业紧缺岗位相关的系列丛书，希望能缓解战略新兴产业需要快速发展与行业技术人才匮乏之间的矛盾，能改变企业需要专业技术人才与高校毕业生的技术水平不足之间的矛盾。

优秀的职业教育本质上是一种更直接面向企业、服务产业、促进就业的教育，是高等教育体系中与社会发展联系最密切的部分。而职业教育的核心是“教”“学”“习”的有机融合、互相驱动，要做好“教”必须要有优质的课程和师资，要做好“学”必须要有先进的教学和学生管理模式，要做好“习”必须要以案例为核心，注重实践和实习。新迈尔（北京）科技有限公司通过对当前国内高等教育现状的研究，结合国内外先进的教育教学理念，形成了科学的教育产品设计理念、标准化的产品研发方法、先进的教学模式和系统性的学生管理体系，在我国职业教育正在迅速发展、教学改革日益深入的今天，新迈尔（北京）科技有限公司将不断沉淀和推广先进的、行之有效的人才培养经验，以推动整个职业教育的改革向纵深发展。

通过大量企业调研，目前Web 前端架构与开发方向面临着人才供不应求的局面，很多具备该技能的工程师刚刚入职的起薪就可以达到其他行业平均工资的3～5 倍，本系列教材覆盖UI 设计、Web 前端开发、PHP 后台开发等模块，教学和学习目标是让学习者能够独立开发出商业网站。

任务导向、案例教学和注重实战经验传递是本系列丛书的显著特点，这改变了先教知识后学应用的传统学习模式，根治了初学者对技术类课程感到枯燥和茫然的学习心态，激发了学习者的学习兴趣，打造学习的成就感，建立对所学知识和技能的信心，是对传统学习模式的一次改进。

Web 前端架构与开发系列丛书有以下特点。

? 以就业为导向：根据企业岗位需求组织教学内容，就业目的非常明确。

? 以实用技能为核心：以企业实战技术为核心，确保技能的实用性。

? 以案例为主线：教材从实例出发，采用任务驱动教学模式，便于掌握，提升兴趣，本质上提高学习效 果。

? 以动手能力为合格目标：注重培养实践能力，以是否能够独立完成真实项目为检验学习效果的标准。

? 以项目经验为教学目标：以大量真实案例为教与学的主要内容，完成本课程的学习后，相当于在企业完成了多个真实的项目。

信息技术的快速发展正在不断改变人们的生活方式，新迈尔（北京）科技有限公司也希望通过我们全体同仁和您的共同努力，让您真正掌握实用技术，变成复合型人才，能够实现高薪就业和技术改变命运的梦想，在助您成功的道路上我们一路同行。

新迈尔（北京）科技有限公司