14、利用 Bootstrap 构建出色的用户界面

利用 Bootstrap 构建出色的用户界面

1. 从简单搜索到单页应用

在开发过程中，我们成功地将简单搜索功能转变为一个小型的单页应用，借助了 Angular 框架。在测试方面，运行 rspec spec/features/customer_search_spec.rb 命令，测试结果显示：随机种子为 11944，测试在 6.81 秒内完成（文件加载耗时 1.89 秒），有 2 个示例，0 个失败。并且在浏览器中尝试时，一切运行良好。

在这个过程中，我们学习了如何配置 Angular 的路由，以及更优的 HTML 模板管理方式，同时也体验到了使用测试驱动开发（TDD）来推动功能实现的实际效果。

2. 网格设计基础

2.1 网格：网页设计的基石

面对复杂的布局设计，我们往往会感到焦虑，因为 CSS 使用起来有难度，且难以理清设计各部分的关系。而网格就如同编程中的功能分解，能将用户界面拆分为更小的部分，让我们专注于每个部分的设计，并依靠网格保持整体的视觉一致性。

网格是一种沿固定水平和/或垂直轴对齐元素的方式。实际上，在之前的开发中，我们已经在使用网格了。例如，使用 Bootstrap 的默认样式和表单类创建的表单，就运用了水平网格，使每行信息的间距合理，文本和其他元素看起来整齐有序。

对于当前的视图，我们需要垂直网格，它能让内容以并排的列形式呈现，这也是实现大部分布局的关键。Bootstrap 提供了一组 CSS 类来创建网格，其底层使用 CSS 浮动，但 Bootstrap 的网格将这些复杂的操作进行了抽象。

Bootstrap 的网格有 1