下载掌阅APP，畅读海量书库
立即打开
Bootstrap是基于移动端的发展而诞生的，它利用响应式Web开发技术，实现了页面同时兼容PC端和移动端。在学习Bootstrap之前，应先了解移动Web开发的主流方案。目前市场上主流的移动Web开发方案有两种，一种是单独制作移动端页面，另一种是制作响应式页面同时兼容PC端和移动端。Bootstrap属于第2种方案。本节主要介绍这两种主流方案的区别，使读者对这两种方案有初步的了解，在实际开发中可以根据项目的实际需求来选择最为合适的开发方案。
通常，单独制作移动端页面并不改变原有的PC端页面，而是针对移动端单独开发出一套特定的版本，在网站的域名中使用二级域名“m”（含义为mobile）来表示移动端网站。例如，在移动端浏览器中访问淘宝网的网址，即可打开淘宝网的移动端页面。有些网站还会智能地根据当前访问的设备来跳转到对应的页面。如果是移动设备，则跳转到移动端页面；如果是PC端设备，则跳转到PC端页面。
下面列举几个比较常见的单独制作移动端页面的网站，网站首页的显示效果如图1-5所示。
图1-5 单独制作移动端页面的网站
在图1-5中，分别展示了淘宝首页、京东首页和苏宁首页的移动端页面效果。
单独制作移动端页面的优点在于，可以充分考虑到平台的优势和局限性，从而创建良好的用户体验设计，并且网页在移动设备上加载得更快。
由于单独制作移动端网站会产生多个URL（PC端一套URL，移动端一套URL），因此重定向移动网站需要花费一些时间。同时，需要对搜索引擎做一些处理，会使维护成本增加。而且，它可能需要针对不同的屏幕尺寸去分别制作多个网站，对于开发人员来说，工作量比较大。
响应式页面是指同一页面在不同屏幕尺寸下可实现不同的布局，从而使一个页面兼容不同的终端。这里所说的终端主要包括PC端和移动端，它们的分辨率和屏幕大小都是不同的。在开发网站时，只需加入响应式设计就可以兼容这些终端，而不必单独制作移动端页面。响应式开发主要是为了解决移动互联网浏览的问题，通过响应式设计能使网站在手机和平板电脑上有更好的浏览、阅读体验。
在开发移动端页面的过程中，当调整浏览器窗口时，将会通过判断浏览器窗口的宽度来改变样式，页面结构会根据浏览器窗口的大小重新展示，以适应不同的移动终端设备。例如，打开三星电子商城网站，运行结果如图1-6所示。
图1-6 初始页面
下面通过鼠标拖曳缩小浏览器的窗口宽度，会看到网页的布局会随之发生变化，效果如图1-7所示。
图1-7 页面的响应式效果
从图1-7可以看出，当调整了浏览器的窗口大小后，页面结构会发生相应的变化。由此可见，响应式设计给用户带来了友好的页面体验，同一个页面在不同的设备上可以实现不同的布局。
在理解了响应式页面的基本概念后，下面简要介绍响应式开发的特点。
响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题，只需开发一套网站就可以在多个平台使用，给用户带来风格一致的视觉体验。
响应式网站制作完成后，无论在移动端设备还是PC端设备上访问，访问的都是同一个链接地址，这样就不会分散网站的权重，提升网站对搜索引擎的友好度。
响应式网站可以兼容多个终端，开发者不需要为各个终端编写不同的代码。并且响应式网站可以实现只用一个后台来进行管理，多个终端的数据保持同步，这样在制作的时候就可以减少专职程序开发人员的配备。对于开发者而言，减少了大量重复的工作，提高了工作效率；对于公司而言，节省了人员开支，降低了开发成本。
小提示：
响应式设计是一种相对较新的技术，在比较老的设备或浏览器上加载页面的速度会比较慢。另外，因为在移动端和PC端上的用户体验不同，响应式也有一定的局限性，有可能无法同时满足两个平台的用户使用。