《Bootstrap开发精解：原理、技术、工具及最佳实践》一1.1 移动优先的设计

本节书摘来自华章出版社《Bootstrap开发精解：原理、技术、工具及最佳实践》一书中的第1章，第1.1节，作者[美] 亚拉文·谢诺伊（Aravind Shenoy）乌尔里希·索松（Ulrich Sossou），更多章节内容可以访问云栖社区“华章计算机”公众号查看

1.1　移动优先的设计

随着手机和平板电脑的出现，响应式网页设计成为了当前人们的需要。在早期，我们使用的是平稳降级的方法，用这种方法我们可以先为桌面电脑构建一个网站，然后去掉一些特性，让它适应小屏幕的尺寸。这样生成的网站只具备少量的功能，浏览体验是打了折扣的，水准也比较低。
随着Bootstrap 3的发布，移动优先（mobile-first）的方法也被引入，这种方法可以帮助我们创建能够在移动平台上有效发挥作用的网站，而不会受到平台的种种限制。这种方法也考虑到移动设备的局限，构建的网站具有很好的跨浏览器的兼容性，为网站用户提供了极其出色的移动体验。通过使用渐进增强（progressive enhancement）技术，我们还可以为桌面用户添加其他特性，显著地提升网站的可访问性。因此，这样做出来的网站足以应对各种各样的变化，无论用户使用的是iPad、Windows PC还是其他平台。
例如，我们考虑为网页设计一个导航条，在桌面屏幕上，网页显示如图1-1所示。

很明显，网站把导航条的Packt Publishing标识显示在Books and Videos、Articles、Categories和Support这些菜单项的旁边，而搜索框则出现在右边。
但是，当网页在小屏幕的手机上显示时，效果如图1-2所示。
单击移动屏幕右上角可展开的移动导航图标，就会出现如图1-3所示界面。
通过上面几幅图的演示，我们可以从中了解到Bootstrap所使用的移动优先的方法。