使用 MEAN 和 UGLI CRUD 实现响应式 Web 设计（2）

look_w

了解 Bootstrap 和响应式 Web 设计查看任意硬拷贝新闻或杂志，您都会看到其中使用了列。有时，一副图片或标题因为某种设计风格而需跨越多个列，但是一个基本的柱状布局构成了几乎所有打印页面的基础。
Web 页面也是如此。例如，访问                  网站。您看到它的布局也是基于列的。但是，当您将浏览器窗口的宽度从全屏缩小到非常窄的时候，注意会发生什么。可见列的数量将随着窗口变小而减少，并随着窗口增大而增多。
为什么使用 12 个列？人类只有 10 个手指头，因此才有了以 10 为基数的十进制计数系统。如果您曾在 CSS 中创建过自定义色彩，您可能会熟悉以 16                    为基数的十六进制数字。那么为什么 Twitter 选择 12 个列作为基本布局，而不是 10 或 16？因为 12 可以被 2、3、4 和                    6 整除，可以很容易将布局分为两列、三列、四列或六列（或者 12 列或单独一个列）。自古巴比伦、罗马、中国和其他古文明时代就开始盛行以 12                    为基数的十二进制系统。这就是为什么我们将一天分为 12（或 24）个小时，将一年分为 12 个月，将一英尺分为 12                    英寸。用拇指轻点按手指关节划分的手的各个部分（如巴比伦人一样），每只手可以数到 12，这样您就更容易理解 Bootstrap                    的十二进制算法。

这种效应被称为  ，因为 Web 页面会 响应 并调整设计来适应设备所要求的屏幕尺寸。现代 Web                开发人员构建的网站可以无缝地支持从最小的手持设备到拥有最大屏幕的台式机或壁挂屏幕等各种设备。分别使用 http://m.* 和                http://www.* URL 为智能手机、平板电脑、笔记本等创建专门的、离散的网站，这种做法早已过时。
响应式 Web 设计 并不是 一个全能的解决方案；相反，它是                “一个外观要求可以适应所有设备的网站”。您不需要选择用户访问网站所使用的设备类型，因此您的设计具备内置的灵活性，可以相应地进行自我调整。
许多流行网站（包括 Facebook 和 Instagram）更多地是通过移动设备而不是传统计算机来进行访问的。Twitter                的用户群绝大多数是移动用户。Twitter 规范了其响应式 Web 设计策略并实现了与 Bootstrap 相同的开源化。Bootstrap 有                12 列的布局，可以根据您用来定义列的 CSS 类进行缩小或放大。
请注意，MEAN.JS 应用程序中对 MongoDB、Express、AngularJS 和 Node.js 使用了四个列的布局，如图 1 所示。
图 1.  Bootstrap 的列布局示例
现在查看 public/modules/core/views/home.client.view.html 中的源代码，如清单 4 所示，看看                Bootstrap 的 12 列布局是什么样子的。
清单 4. public/modules/core/views/home.client.view.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="row">     <div class="col-md-3">         <h2><strong>M</strong>ongoDB</h2>     </div>     <div class="col-md-3">         <h2><strong>E</strong>xpress</h2>     </div>     <div class="col-md-3">         <h2><strong>A</strong>ngularJS</h2>     </div>     <div class="col-md-3">         <h2><strong>N</strong>ode.js</h2>     </div> </div>

如果您向一个父 div 添加 class="row"，那么您可以向子                div 添加 class="col-xx-N"                属性来将它们分成几个列。N 值必须介于 1 和 12                之间，xx 值取决于您希望优化布局的设备的尺寸：

• xs 适用于极小设备（低于 768 像素宽）
• sm 用于小型设备（768 和 991 像素之间）
• md 适合中型设备（992 和 1,199 像素之间）
• lg 适合大型设备（1,200 像素或更高）

查看 Bootstrap CSS 文档的                  小节，了解有关的更多信息。
由于清单 4 中的每个列针对中型（md）设备进行了优化，因此如果在屏幕宽度低于 992                像素的设备上访问该页面，列将垂直堆叠而不是水平堆叠。将您的浏览器窗口变得足够窄来触发这一更改，如图 2 所示。
图 2. 移动设备上的响应式 Web 设计示例 现在，可以使用我们已经需到的知识，使用特定于 UGLI 的文本替换 home.client.view.html 中的标准文本。
首先，从   下载                256 像素的 HTML5 徽标，并将其复制到                public/modules/core/img/brand/HTML5_Logo_256.png。然后使用清单 5 中的源代码替换                public/modules/core/views/home.client.view.html 中现有的 HTML。
清单 5. public/modules/core/views/home.client.view.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<section data-ng-controller="HomeController">     <div class="jumbotron text-center">         <div class="row">             <div class="col-md-4">                 <img alt="HTML5" class="img-responsive center-block"                 src="modules/core/img/brand/HTML5_Logo_256.png" />             </div>             <div class="col-md-8">                 <h1>The HTML story is still being written.</h1>                 <h2><em>Come hear the latest chapter at the HTML5 Denver User Group.</em></h2>             </div>         </div>     </div> </section>

在较宽的浏览器窗口中查看网站时，HTML5 徽标会出现在文本旁边，如图 3 所示。
图 3. 新的 UGLI 主页
当您将浏览器窗口变得足够窄时，徽标会出现在文本的上方，如图 4 所示。
图 4. 新的 UGLI 主页，它会出现在移动设备上使用 Bootstrap 可以轻松地让您的网站对移动应用程序变得更友好，我在为客户构建每个新网站时都使用 Bootstrap 作为基础技术。
现在我们将要在 MEAN 堆栈中处理 CRUD。