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

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

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

在开发过程中，我们成功地将简单搜索功能转变为一个使用 Angular 的小型单页应用。通过运行测试命令 rspec spec/features/customer_search_spec.rb ，测试结果显示一切正常，2 个示例均通过，无失败情况，且在浏览器中尝试时，各项功能表现出色。

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

2. 基于网格的设计理念

2.1 网格设计的重要性

面对复杂的布局设计，往往会让人感到焦虑，因为 CSS 的使用具有一定难度，且难以清晰地组织设计的各个部分。而网格设计就如同编程中的功能分解，它能将用户界面分解为更小的部分，让我们可以专注于每个部分的设计，同时依靠网格保持整体的视觉一致性。

网格本质上是一种沿着固定水平和/或垂直轴对齐元素的方式。实际上，我们在之前的开发中已经在使用网格了，例如使用 Bootstrap 的默认样式和表单类创建的表单，就运用了水平网格，使每行信息的排版更加美观有序。

对于当前的视图，我们需要一个垂直网格，以便将内容放置在并列的列中，从而实现所需的布局。Bootstrap 提供了一套 CSS 类来创建网格，它底层使用 CSS 浮动，但将其复杂性进行了抽象封装。

2.2 Bootstrap 网格的特点

Bootstrap 的网格共有 12 列，我们可以根据需要任意组合这些列，以创建更