作者：和凌志
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
全栈开发之道：MongoDB+Express+AngularJS+Node.js试读：
前言
为何写一本全栈的书
为什么写一本以全栈为主题的书呢？这还得从我的工作经历说起。
在过去的十多年，我一直在从事与移动互联网相关的工作，从早期的手机软件开发到今天的移动应用，都离不开架构的支撑。在智能机出现之前，手机的软件架构群雄并起，各家手机厂商都在打造自己软件平台，直到iOS、Android、Windows Phone的出现，形成三足鼎立的时代。在经历了近五年的洗礼之后，进入移动互联网的巅峰时代。而今，iOS、Android 两大平台平分天下。
开发一款移动互联网产品，从表面上来说，似乎只需要做一个APP，包括iOS和Android APP；其实，如果想让上线的产品运营起来，就没这么简单了。通常，一个活跃度很高的产品，都是一款具有生态系统支撑的平台，它包括iOS APP、Android APP、微信公众号、PC网页、强大的后台管理，一个都不能少。如果采用传统的开发技术，打造这样的一款产品，需要组建一支十几人的开发团队，人员一多，沟通的成本可想而知。
移动互联网产品的一个最大特点是，一旦产品投放市场得到了用户的认可，其版本迭代更新非常之频繁。无形中，对团队的开发效率提出了更高的要求。
无论是iOS还是Android，APP原生开发模式的最大弊端是版本的迭代与升级的任务繁重。为了解决这个问题，才引入了HTML5的技术。从开发的技术工种来看，分为APP（iOS、Android）工程师、前端工程师、后端工程师。这三个角色中，前端工程师直接面向终端用户，是产品的“门面”。如果后台选用 PHP、Java 之类的技术，前端工程师除了网页的制作之外，其他可做的非常有限，毕竟前端技术局限于HTML、CSS和JavaScript。因为角色的分工比较发散，以致开发效率难以提升。为了解决开发效率和运维灵活性的问题，我们希望从前端寻求到一个突破口。
众所周知，前端工程师身怀三大法宝：HTML、CSS 和 JavaScript。这些前端开发语言既偏离APP的原生开发语言（Objective-C或Swift），又与后台的开发语言（常用的Java）有着明显的差异。虽然JavaScript带有“Java”一词，但JavaScript与Java之间的关系如同雷锋与雷峰塔之间的关系，二者相去甚远。那么，有没有一种框架可以让前端开发人员“通吃”后台呢？
一个偶然机会，我接触到了全栈（Full Stack）的概念，并瞬间被它的理念所吸引。这里说的全栈，不是传统的 LAMP（Linux、Apache、MySQL、PHP），而是一种全新的以前端为主导的框架，所谓“大前端”、“全端”，就是指以前端为核心的框架。最终，我们把框架选型聚焦在 MEAN（MongoDB、Express、AngularJS、Node.js）上。MEAN 全栈技术框架所用到的每个组件（MongoDB、Express、AngularJS和Node.js），都是基于JavaScript开发语言的。原本JavaScript是为网页设计的语言，但自从有了Node.js之后，JavaScript的春天来了，前端工程师也可以写后台了。Node.js让前端开发像子弹一样飞！
开发一个产品之前，我们总会纠结应该选择怎样的技术框架。的确，框架的选型很重要，它直接决定了这个产品未来的走向，技术的选择需要考虑几个主要因素，其中包括自身所掌握的技能、软/硬件环境、生产环境的部署、产品上线后的运维等。
选用MEAN全栈技术，可以快速地实现敏捷开发，尤其是到了产品的运营阶段，其优势表现得非常明显。我们知道，今天的任何一款移动互联网产品，都离不开微信公众号的推广，大多出彩的产品，在它的微信公众号内，所展示的是一套完整的业务逻辑，而不是几个简单的页面。这就是说，一个运营成功的产品，对前端技术的依赖非常之高，更何况 APP 也可以采用混合开发模式（Native+HTML5）。
全栈工程师并不是“全能”工程师，它是通过一种全栈的框架，从繁重的技术中解脱了出来。正所谓：工欲善其事，必先利其器。这里的“器”，就是全栈框架，具体到这本书所推荐的，就是MEAN全栈框架。
践行全栈之路
用了MEAN全栈，它到底能带来什么好处呢？这里，以我们发布的一款产品——“点时”为例。“点时”APP是一款轻量级的知识分享平台，以语音分享为主。这样的一款产品，从生态上讲，该平台包括：iOS APP、Android APP、微信、后台的课程发布与运维管理。传统的做法是项目开发组分为前端与后台两套人马，因为进度不一，要么前端等后端，要么后端等前端，而我们采用的是 MEAN 全栈架构，不再区分前端与后台，开发效率得到了明显提升。用了MEAN全栈框架，它带来的最大好处是减少了前、后端之间的依赖。
读者对象
这是一本讲述MEAN全栈入门的书，而不是一本从入门到精通的书。MEAN全栈蕴涵的组件有多个，每一个组件都可以独立成书。书中的每一个知识点都是为后面章节中的实例铺垫的，泛泛的基础知识并不在本书讲解范围之内。
本书自始至终延续这样的一个主题：如何通过一种框架（MEAN全栈），将前端和后台（端）贯穿起来，让前端工程师快速上手。
MEAN全栈技术涉及的技术点很多，它是前端（Front-end）技术向后台（Back-end）的延伸。只有具备了前端的基础，才能更好地理解全栈架构的思想。如果尚未接触过HTML、CSS、JavaScript，那么，有必要“恶补”一些前端的基础知识。
具体来说，这本书适宜的读者有：
想学前端技术的APP（iOS、Android）开发工程师。随着APP多年的发展，APP的优势和短板日益明显，原生技术无法解决的问题，需要前端技术（HTML5）来弥补，二者结合相得益彰，所以混合开发模式越来越受欢迎。如果一个 APP 开发工程师同时具备了原生与全端的技能，由“单翼”变成了“双翼”，其技术路线的前景将越来越广！
想学习后台技术的前端工程师。传统的互联网开发，分为前端和后台，在职场上也就出现了前端工程师和后端工程师。借助Node.js平台和Express后端框架，前端工程师可以无缝地延伸到后台技术。
如何阅读本书
既然是全栈技术，其蕴含的知识点无疑有多个方面。为此，本书分为入门篇、基础篇、实战篇。
入门篇：
这里没有讲述HTML的基础，也没有谈论CSS概念，而是直接切入CSS框架，一款主流的CSS框架——Bootstrap。在我所经历的互联网项目中，Bootstrap是应用最为广泛的。这里还讲述了 JavaScript 特有的编程模式——函数表达式与函数式编程，在 Node.js 开发中，JavaScript把这些特有的闪光点发挥得淋漓尽致。MEAN全栈中所用到的数据交互格式和存储格式均为JSON，学习全栈技术，必须掌握JSON的应用。
在入门篇中，没有讲述 jQuery 技术及其 AJAX，这是因为，在 MEAN 全栈中用到的AngularJS前端框架本身就兼具jQuery和AJAX的功能。
基础篇：
从这篇开始，我们将正式进入Node.js的世界。尽管Node.js功能很强大，但其生态系统的构建还要借助Express、AngularJS、MongoDB及模板引擎。
在市面上，我们会看到很多权威指南系列的图书，比如 Node.js 权威指南、AngularJS 权威指南、MongoDB权威指南。这些书对每个专业技能都讲得很透彻，但很少谈及它们之间的关系。既然 Express 是基于 Node.js 之上的后端框架，对初学者来说，我们更希望在 Express基础之上开发。
那么，为何要选用 AngularJS 呢？在吹响“全端”号角的今天，我们越来越强调前端框架的重要性。在前端的世界，AngularJS 可谓“玉树临风”。在 MEAN 全栈中，Node.js和Express负责后端处理，而与网页交互的正是AngularJS。因此，可以想象AngularJS在本书中所占比重之高。
关于AngularJS，这里要特别说明一点：本书讲述的AngularJS、示例中所引用的AngularJS均为1.x版本，具体来说是1.4.6版本。AngularJS最新版本是2.x。或许读者产生疑问，为何不用AngularJS最新的2.x版本呢？这是因为，它的2.x并不是在原有1.x上的升级，而是一个全新的版本，两者谈不上兼容之说。业内普遍认为，AngularJS 1.x版本更成熟、应用更广泛、可参考的资料更多。在项目开发时，选择一个成熟的框架，十分重要！
把MongoDB数据库应用到MEAN全栈中，可谓相得益彰。通过MongoDB，你会对全栈开发有一个完整的、全新的认知。
实战篇：
学习一门编程技术，最有效的途径还是实践。对于书中出现的每个知识点，都辅以相关的代码实例。每个篇章中的实例都不是独立的，而是沿用从易到难的线索。
实战篇演示了四个实例，每个实例并不是独立的，从知识衔接上看，是一环扣一环的。通常，一个完整的应用包括：数据与页面之间的绑定、网络请求、路由的分发、数据库的增删改查。我曾试着通过一个完整的应用讲述以上知识点，发现越到工程的后期越发臃肿，前后逻辑关系太复杂，以至于理解起来颇费周折。最终采取一个折中的方案：借用国外网站的经典MEAN 全栈示例，在原示例的基础之上，对一些不易理解的地方，添加了补充的知识，正所谓“见招拆招”。
实战篇中示例，都是基于MEAN全栈的演练，只是侧重点有所不同，每个示例均附有完整的工程源码。
本书的源码
在学习本书示例代码时，可以按照书中讲解的步骤，一步一步地手工敲入所有代码，也可以下载本书的源码，本书所有的源代码都可以从GitHub下载。
源码下载地址：https：//github.com/leopard168/MEAN-Full-Stack。
勘误和支持
我尽最大的努力确保正文和代码没有错误，但随着开发环境版本的变化，错误在所难免。如果读者发现书中的任何错误，如错别字或代码片段无法运行等，希望您能及时反馈给我。您提交的勘误不仅能帮助自己，还能让其他读者受益。
读者可以在下载源码的地方（GitHub）进行反馈，也可以通过后面的联系方式与笔者沟通。
致谢
参与本书编写的还有袁芳、和凌群、徐明志、胥方文、江美双、和凌云、马钧君、林志红、刘晓波。在本书成稿的过程中，我得到了很多人的指点和帮助，客套话不再讲太多。这里，特别感谢MEAN全栈的开源者，向开源精神致敬！每次赏析那些原创的示例，都能得到一次心灵的升华。
在本书出版之前，我曾以本书的书稿，给临沂大学本科生讲授全栈开发课程。令人欣慰的是，通过MEAN全栈框架，学生们很快完成了一个从前端到后端的项目。
感谢电子工业出版社，正是你们卓有成效的工作使我保持了敲击代码的激情。
作者交流方式：
作者的QQ及邮件：2385911707@qq.com。
作者的微信号：leopard2385911707。
作者
2017年8月为什么选择MEAN全栈技术
概述
开发一个功能性的网站并不容易，它要借助很多种技术，需要一套组合拳，单纯的某一项技术是不够的。在描述网站构建时，常听到一个词语，这就是“技术栈”。比如，Linux、Apache、MySQL和PHP，把它们的首字母组合在一起，被称为LAMP栈。MongoDB的工程师Valeri Karpov发明了一个缩略语MEAN，指的是MongoDB、Express、AngularJS和Node.js。的确，这是一个很不错的技术组合，而且读上去朗朗上口。MEAN全栈（MEAN Full Stack）框架日益成熟，在网上可以找到大量的MEAN全栈示例。
如果想开发一个功能性网站，MEAN 全栈技术框架是一个不错的选择，但它不是唯一的选择。就拿数据库来说，即便基于Node.js开发，也不是非选MongoDB不可，用其他关系型数据库（如MySQL）也是可以的；同样，作为前端框架的选择，也不见得必须用AngularJS，用Vue.js也是可以的。这就是说，MEAN全栈无法体现Node.js生态系统的多样性。MEAN这个缩略词漏掉了一个重要的组件——模板引擎。模板引擎的类型有多种，我们完全可以通过手动方式来配置。
在 MEAN 这个缩略词中，毋庸置疑，其中无可替代的组件当然是 Node.js 了。作为运行JavaScript 语言的服务端，Node.js 是其中的执牛耳者，尽管也有类似的服务端，但与 Node.js比起来，难以望其项背。
起初，JavaScript 语言仅仅是为了编写网页，很难有其他用武之地。自从有了 Node.js，JavaScript的春天来了。通过JavaScript这一项技术，把MEAN全栈技术贯穿在一起。
夸张一点说，学习MEAN全栈技术，只需要掌握一门JavaScript语言就够了。
什么时候用Node.js
Node.js是专门为I/O密集型操作和快速构建可扩展性的实时网络应用而设计的，比如说，一些网游、聊天系统等。通过Node.js，你可以用最少的系统资源来服务大量的客户端，Node.js就是为高扩展性而设计的。
对于搭建类似于MongoDB的文档数据库的API服务器，Node.js也是一个不错的选择，它可以将文档数据以JSON对象的格式存储在MongoDB中，然后通过RESTful API来操作它们。当从数据库读写数据时，不需要将JSON与其他类型的数据进行转换。
根据 Node.js 的结构特点，它不适用于 CPU 密集型的操作，Node.js 本身是一个运行JavaScript的服务器环境。
本书讲述的示例都是基于Node.js基础之上的应用，而不是Node.js架构。
MEAN全栈简介
构建Node应用有很多选择，而MEAN全栈框架越来越成为一种趋势，MEAN全栈主要由四项技术组成。
● MongoDB：用来存储数据的数据库。
● Express.js：服务器端用来构建Web应用的后端框架。
● AngularJS：用来构建Web应用的前端框架。
● Node.js：JavaScript运行环境。
MongoDB于2007年推向市场，由MongoDB公司运营。Express最早由T.J.Holowaychuk于 2009 年发布，并已经发展成为 Node.js 之上的最主流的框架，它是一个开源的框架，社区活跃度很高。AngularJS是一个开源的前端框架，它的背后支持者是Google，到了2010年，AngularJS已经被广泛应用，AngularJS的发展势头强劲，从早期的1.x版本已经更新到今天的2.x版本。Node.js是2009年发布的，Node.js采用了Google的V8 JavaScript开源引擎。
通过MEAN全栈框架，可以将文档数据以JSON对象的格式存储在MongoDB中，然后通过基于Node和Express搭建的RESTful API来操作数据库，前端通过AngularJS构建的客户端来操作这些API。AngularJS通过RESTful API获取服务器数据后，再把数据交给前端模板引擎渲染，最终形成 HTML 页面展示给用户。要想完成这些操作，只需要使用一门统一的语言——JavaScript。这样一来，代码更加具有一致性和可维护性。另一个好处是，整个 MEAN全栈技术所要处理的大多是JSON数据结构，而MongoDB中的文档对象也是JSON格式，通过RESTful API获取的后台数据也是JSON格式，正是这些一致的JSON格式，才省去了格式之间的转换，从而提高了开发的效率。
MEAN全栈的四大组件关系
全栈开发包含了众多的知识点，可以说，每个知识点都可以独立编写成一本书。事实上，也确实如此。对于开发一个MEAN全栈应用来说，JavaScript语言从前端贯穿到后台；数据以二进制JSON（简称BSON）格式存储在MongoDB中，基于MongoDB的Mongoose提供了类似JSON的接口，为操作数据库提供了极大的便利；源于Node.js的后端框架Express也是由JavaScript编写的；而前端框架AngularJS也是一个JavaScript库。MEAN全栈的四大组件关系，如图0.1所示。图0.1 MEAN全栈四大组件之间的关系
这里，再来回顾下MEAN全栈的技术组件：
● MEAN全栈是由多种不同的技术组成的一个从前端到后台的框架；
● 在MEAN全栈中，选择了MongoDB作为数据库，从而凸显了JavaScript的优势；
● Node.js与Express的“合体”，提供了一个完美的应用服务器框架；
● 作为前端框架，AngularJS是那么地神奇，它把单页面应用和数据绑定发挥得淋漓尽致；
● MEAN全栈技术为JavaScript提供了前所未有的平台，从而使得JavaScript成为了当今的一种主流开发语言。入门篇
这里没有讲述HTML的基础，也没有谈论CSS概念，而是直接切入CSS框架，一款主流的 CSS 框架——Bootstrap。在我所经历的互联网项目中，Bootstrap 的应用是最为广泛的。这里还讲述了 JavaScript 特有的编程模式——函数表达式与函数式编程，在 Node.js 开发中，JavaScript把这些特有的闪光点发挥得淋漓尽致。MEAN全栈中所用到的数据交互和存储格式均为JSON，学习全栈技术，必须掌握JSON的应用。
在入门篇中，没有讲述 jQuery 技术及其 AJAX。这是因为，在 MEAN 全栈中用到的AngularJS前端框架本身就兼具jQuery和AJAX的功能。第1章 Bootstrap基础1.1 概述
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，它由Twitter的两位前员工Mark Otto和Jacob Thornton在2010年8月份创建。Bootstrap是一套基于Less的前端开发库，它提供了很多常用的各种CSS和JavaScript库，以便开发人员随时上手，目前最新版本是3.3.7。
打开Bootstrap官网（www.getbootstrap.com），会看到这样一个醒目的标识，如图1-1所示。图1-1 Bootstrap标识
Bootstrap是简洁、直观、强悍的前端开发工具包（包括HTML、CSS和JS），让Web开发更迅速、简单，尤其适用于开发响应式布局、移动优先的Web项目。
Bootstrap 内置了非常多的漂亮样式，即便是非专业的前端开发人员也能轻松使用。它秉承了简约的页面风格，使得开发人员能够毫无顾虑、放心地使用，而无须担心这个div的高度、那个 span 的宽度等细枝末节的问题。即使没有设计师的团队，也能够使用这套框架迅速构建一个网站原型，甚至是构建一个生产环境的网站。
Bootstrap提供了优雅的HTML和CSS规范，一经推出后颇受欢迎，一直是GitHub上的热门开源项目。
Bootstrap 是一个非常简单的框架，相信经过几周的学习，大家就会完全掌握它。我们先来看下Bootstrap提供了什么。
● 一套完整的CSS库；
● 丰富的预定义样式表；
● 一组基于jQuery的JavaScript插件集；
● 一个非常灵活的响应式（Responsive）栅格系统，并且崇尚移动优先（Mobile First）的设计思想。
这么看来，Bootstrap真正强大的地方，在于这些非常不错的样式库和插件，包括对话框、导航等，通过Bootstrap构建的页面十分精致，因而成为众多jQuery项目默认的设计标准，使得前端开发效率得到了极大的提升。
有人说，Bootstrap是一款强悍的前端框架，这种说法有些欠妥。如果说Bootstrap是前端框架，那么 AngularJS、React.js 又是什么呢？一种更贴切的说法是，Bootstrap 是一个经典的HTML/CSS框架，它的强大之处在于有着丰富的CSS样式库，CSS布局才是Bootstrap的强大生命力所在。1.2 Bootstrap开发环境1.2.1 Bootstrap的安装
Bootstrap 框架的文件和源码可以在其官方网站（www.getbootstrap.com）下载，当前版本是v3.3.7。打开网站的首页，单击“Download”按钮，跳转到下载页面，可以看到三个下载链接，如图1-2所示。图1-2 Bootstrap下载页面（1）Download Bootstrap：从该链接下载的内容是编译后可以直接使用的文件。默认情况下，下载后的文件分两种：一种是未经压缩的文件 bootstrap.css，另一种是经过压缩处理的文件bootstrap.min.css。一般网站正式运行的时候使用压缩过的min文件，以节约网站传输流量；而在进行开发调试的阶段往往使用原始的、未经压缩的文件，以便进行调试跟踪。（2）Download source：从该链接下载的是用于编译CSS的Less源码，以及各个插件的JS源码文件。如果想分析Bootstrap的源码，可以下载未压缩的bootstrap.css和bootstrap.js源码文件，通常不会涉及与Less相关的内容。（3）Download Sass：从该链接下载的是用于编译CSS的Sass源码，以及各个插件的JS源码文件。通常，项目开发中很少涉及与Sass相关的内容。
在项目实战中，只需要下载“Download Bootstrap”，下载后的文件结构如图1-3所示。图1-3 Bootstrap文件结构
bootstrap.css：完整的Bootstrap样式表，未经压缩过的，可供开发的时候进行调试使用。
bootstrap.min.css：经过压缩后的 Bootstrap 样式表，内容和 bootstrap.css 完全一样，但是把中间不需要的东西都删掉了，如空格和注释，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了。
bootstrap.js：是Bootstrap所有JavaScript指令的集合，也是Bootstrap的灵魂，用户看到Bootstrap中所有的JavaScript效果，都是由这个文件控制的。这个文件也是一个未经压缩的版本，供开发的时候进行调试使用。
bootstrap.min.js：是bootstrap.js的压缩版，内容和bootstrap.js一样，但是文件会小很多，在部署网站的时候可以不引用bootstrap.js，转而引用这个文件。1.2.2 Bootstrap的加载
如何将Bootstrap集成到工程中呢？常用的方法有两种：一种是通过本地加载，另一种是通过CDN引用。
1.Bootstrap的离线加载
Bootstrap的离线加载方法是，先将下载的Bootstrap.zip文件解压，并将其中的内容复制到工程的目录中，然后在HTML文件中包含这些CSS和JavaScript文件。
在HTML文件中，直接加载Bootstrap.css文件，代码如下。
这里，我们使用了Bootstrap的压缩版本，即bootstrap.min.css，来减小文件的大小，使得网页的加载速度更快。当然，也可以根据自己的喜好，先在开发阶段使用完整的版本，当部署到生产环境时，再使用压缩的版本。
2.CDN静态资源库
为了提升网页的加载速度，我们可以引入Bootstrap CDN，方法如下。
通过链接可以看出，这是一种在线的引用。如果使用CDN调试网页的话，必须保持网络畅通。这种加载方式，无须将所引用的资源包下载到本地，所以工程非常简洁。
从Bootstrap文件结构可以看出它的三大核心组件——CSS、Fonts和JS，而最为重要的组件便是CSS布局，CSS布局是Bootstrap三大核心组件的基础。
3.编码规范
CSS文件编码全部使用UTF-8，因此建议网页编码也应设置为UTF-8，以确保编码一致性。在导入CSS文件时，应该明确定义rel和type声明，代码如下。1.3 Bootstrap 常用工具1.3.1 Bootstrap代码编辑工具
为了更好地阅读Bootstrap库的源码，在下载Bootstrap之前，需要安装一个自己熟悉的代码编辑器。因为阅读代码只需要一个编辑器，所以对工具没有特别的要求，即便是记事本，也能打开这些源码。尽管能用，但用户体验较差。这里，推荐一款令人赏心悦目的编辑器Sublime Text。Sublime Text有着非常不错的高亮着色和智能提示功能。在我们整个MEAN全栈开发中，都是基于Sublime Text来管理工程和编辑代码的。
Sublime Text是一款具有代码高亮、语法提示、自动补全、反应快速的编辑器软件，不仅具有华丽的界面，还支持插件扩展机制，用Sublime Text编写代码，绝对是一种享受。
Sublime Text 是一款用户体验俱佳的文本编辑器软件，读者可以在它的官方网站（http：//www.sublimetext.com/3）下载需要的版本。当前的最新版本是Sublime Text 3，有适合Mac OS X、Windows、Linux等主流操作系统的版本。
打开Sublime Text软件，优雅的界面顿时出现在眼前，如图1-4所示。图1-4 Sublime Text所显示的友好界面1.3.2 Bootstrap设计工具——Layout IT
作为一名前端工程师，会经常追寻新鲜有趣的网页制作工具，借助这些设计工具，可以大大提高工作效率。有一点是肯定的，随着日益增长的工具和应用的数量，设计和开发变得越来越简单了。其中，最为普遍使用的前端网页框架就是 Bootstrap。如果你非常熟悉 Bootstrap，可以通过手动代码方式制作一个具有一定特效的网页。尽管 CSS 的代码通俗易懂，但对于初学者来说，还是有一定的学习难度的。既然网页是一种可视化的展示，那么，有没有一种可视化的设计工具呢？
不错，在市面上有多款专门针对Bootstrap的设计工具，其中有付费的，也有免费的。这里，我们以Layout IT为例，介绍图形化的Bootsrap设计工具的使用。
Layout IT是一款在线编辑工具，专门为Bootstrap而设计。借助这个可视化工具，设计者可以在线生成想要的网页，通过拖曳各个组件，快速制作出精美的网页。
通过 Layout IT 制作出来的网页 100%地符合 Bootstrap 标准，而且适配性很高。因为Bootstrap 是一种响应式设计框架，只要制作了 PC 端的网页，它就会自动适配手机端和 iPad端。这个工具特别适合那些想快速搭建网站的用户，因为不需要学习太多东西就可以做到，很适合网页设计师和前端开发人员使用，快捷方便。
接下来，我们看一个 Layout IT 的应用示例。在浏览器中打开 Layout IT（http：//www.layoutit.com/），从首页可以看出，Layout IT是基于Bootstrap 3版本的，如图1-5所示。图1-5 Layout IT可视化设计工具
左侧栏是基础的控件，从上到下，依次是GRID SYSTEM（设定栅格布局）、BASE CSS （基础样式）、COMPONENTS（基础组件）、JAVASCRIPT（动态组件）。这些组件可以通过拖曳的方式放到右侧的编辑区域中，所见即所得。
在完成页面布局之后，可以单击上方的“Preview”按钮，预览页面的效果；也可以单击上方的“Download”按钮，把整个工程下载到本地，工程目录结构如图1-6所示。图1-6 由可视化设计工具生成的CSS文件结构1.4 Bootstrap 布局1.4.1 HTML标准模板
我们使用Bootstrap框架编写一段最基本的HTML代码，可以在此基础上进行扩展，只需要确保文件引入的顺序一致即可，代码如下。
将以上代码保存到一个HTML文件中，并在浏览器中打开该文件，效果如图1-7所示。图1-7 网页在浏览器上的展示效果代码解读（1）文档类型：＜！DOCTYPE html＞。
Bootstrap 从 3.0 版本开始全面支持移动平台，并遵循移动优先（Mobile First）的策略。HTML第一行标识了文档类型，由于Bootstrap使用了HTML5特定的HTML元素和CSS属性，在用到Bootstrap的时候，所有的HTML文件都需要在其首行引用HTML5的DOCTYPE属性，代码示意如下。（2）移动终端的UI布局。
这行代码的意思是，在默认情况下，UI 布局的宽度与移动设备的宽度一致，缩放大小为原始大小。
对于移动Web端代码的处理，还有另外一种形式。
上述代码表示：强制让视图的宽度与移动设备的宽度保持1∶1，视图最大的宽度比例是1，且不允许用户通过缩放手势放大或缩小浏览器。需要注意的是，如果要在content里面设置多个属性时，一定要用逗号和空格来来隔开，否则，将不会起作用。
关于content属性值，有以下几项。
● width：可视区域的宽度，值可为数字，也可以设为关键字device-width。
● height：同width，通常只约定宽度，以适配不同的终端。
● intial-scale：页面首次显示时可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。maximum-scale=1.0和minimum-scale=1.0为可视区域的缩放级别。
● user-scalable：是否可对页面进行缩放，no表示禁止缩放。
在移动设备浏览器上，通过为viewport meta标签添加的“user-scalable=no”可以禁用其缩放（Zooming）功能。禁用缩放功能后，用户只能滚动屏幕，当APP嵌入WebView时，这样的应用看上去更像原生效果。（3）关于Bootstrap的引用。
bootstrap.css是Bootstrap框架的基本样式文件，只要用到Bootstrap，就必须调用这个文件。这里，我们通过＜link＞标签来引入Bootstrap的CSS静态资源库。
如果想让Web应用具有响应式布局的效果，还得调用bootstrap-responsive.css这个样式文件，而且调用必须遵循先后顺序，bootstrap-responsive.css必须置于bootstrap.css之后，否则就不具有响应式布局的功能。1.4.2 自定义CSS
Bootstrap的CSS布局包括基础排版（Typography）、代码（Code）、表格（Tables）、表单（Forms）、按钮（Buttons）、图片（Images）、辅助类（Helper Classes）和响应式设计（Responsive Utilities）。这些基础的布局语法都是通过CSS最基础、最简单的组合来实现的。通过这些基础而又核心的布局语法，不需要太多时间，即可快速上手，制作出比较精美的页面。
尽管Bootstrap强大无比，有时候，我们还是需要对Bootstrap做一些小的调整，如添加几种颜色或改变字体的大小。对于这样的定制，我们需要创建自定义的CSS。在引入HTML文件时，将自定义的CSS文件添加到Bootstrap的CSS文件后面。
定制Bootstrap最简单的方法就是创建自定义的CSS文件，编写自己所需要的CSS样式。这种自定义的 CSS 文件的链接必须放到 HTML 文档中 Bootstrap CSS 的后面，才能够覆盖Boostrap CSS的声明。
基于上面的例子，我们对Bootstrap默认的按钮进行改造。具体的做法是：在工程的CSS目录下，创建一个自定义的CSS文件，命名为style.css，添加代码如下。
引用style.css文件并放到bootstrap.css文件的后面，我们自定义的btn样式就会覆盖原有的样式。当然，这里所说的“覆盖”是指增量叠加式的覆盖。
保存修改的代码，在浏览器中打开index.html文件，我们看到“Submit”按钮的圆角和颜色都发生了变化，如图1-8所示。图1-8 由自定义的CSS样式生成的按钮效果
关于Boostrap的应用，需要注意的是，自定义的CSS样式一定要放在自己创建的定制化CSS文件中，而不是直接对Bootstrap文件进行修改，这样才是一种好的实践方式。这种方法的好处是，当Bootstrap出现新的版本时，只需要将项目文件夹中的Bootstrap文件替换为最新的文件即可，而不用再关心代码的修改。1.4.3 响应式布局的实现
随着手机和平板电脑的出现，响应式网页设计成为了当前人们的需要。早期的做法是，先为PC端构建一个网站，然后去掉一些特性，再让它适应小屏幕的尺寸。这样生成的网站只具备少量的功能，浏览体验会大打折扣。
随着Bootstrap 3的发布，移动优先（Mobile First）的方法也被引入了。通过Bootsrap 3构建的网页，可以自动适配不同的移动终端，为移动终端用户提供了极其出色的移动体验。这样做出来的网站足以应对各种各样的变化，无论用户使用的是手机、平板电脑，还是PC。
例如，我们为网页设计一个导航条，在PC浏览器上，网页显示效果如图1-9所示。图1-9 网页的导航条展示效果
很明显，在PC网页上，一个完整的导航条只需要一行的位置。同样的网页，如果放在小屏幕的手机上显示时，它的展示效果就会自动发生改变，出现如图1-10所示的页面。图1-10 自动适配手机终端的收缩效果
当单击右上角的移动导航图标时，可以展示内容，也可以收缩起来，全部展开的内容如图1-11所示。
从展示效果来看，它同时达到了PC端和移动端所期望的用户体验。尤其是在移动端，自动添加了展开/收缩按钮，并且支持上下滑动的效果。
通过上面几幅图的演示，我们可以从中了解Bootstrap移动优先的设计思想。
这种基于Bootstrap框架的响应式网页，是怎么实现的呢？以下是该HTML文件的全部源码。图1-11 手机终端的展开效果代码解读
以上代码的结构与HTML标准模板颇为相似，在＜head＞标签内，Bootstrap CSS被链接到这个HTML中，代码如下。
在Bootstrap CSS的后面，紧跟着的是一个自定义的CSS文件style.css，通过这个自定义的CSS文件，可以覆盖Bootstrap的样式。文件结构如图1-12所示。图1-12 自定义的CSS文件style.css
bootstrap.min.css：经过压缩后的 Bootstrap 样式表，内容和 bootstrap.css 完全一样，但是把中间不需要的东西都删掉了，如空格和注释，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了。
bootstrap.min.js：bootstrap.js的压缩版，内容和bootstrap.js一样，但是文件会小很多，在部署网站的时候可以不引用bootstrap.js，转而引用这个文件。
style.css：在这个文件中编写定制化的CSS样式。
需要补充的是，对图片也可以做到响应式布局。具体做法：为了能对图片的大小进行自适应缩放，Bootstrap 在 3.X 版本里添加了一个.img-responsive 样式，其实质是为图片设置了“max-widht：
试读结束[说明：试读内容隐藏了图片]