精通 MEAN 当 MEAN 遇到 Meetup.com 和微数据（2）

look_w

向主页添加一个占位符事件大体了解 Meetup.com 如何显示事件信息后，可对 uGLI 应用程序执行相同操作。
在测试应用程序的 root 中键入 mongod 来启动 MongoDB，然后键入 grunt 启动 Web 应用程序。在 Web        浏览器中访问   时，您应看到在上一期中自定义的主页（如图 2 所示）。
图 2. UGLI 主页
我想向主页添加即将举办的 HTML5 Denver User Group        活动。本教程的剩余部分将迭代式地完成此工作。首先，添加一些静态占位符数据来描绘页面的基本外观的线框图。
在文本编辑器中打开 public/modules/core/views/home.client.view.html。在标语下，添加活动的新标记，如清单 2 所示。
清单 2. public/modules/core/views/home.client.view.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<section data-ng-controller="HomeController">   <div class="jumbotron text-center">     <!-- snip -->   </div>   <div class="row">     <div>Monday, September 22, 2014</div>     <h3><a href="http://www.meetup.com/HTML5-Denver-Users-Group/events/160326502/">     "Developing Offline Applications" and "HTML 5 Animations"</a></h3>     <div class="col-md-4">      <h4>When</h4>      <p>6pm</p>      <h4>Where</h4>      <address>        <span>Rally Software</span><br>        1550 Wynkoop<br>             Denver, CO<br>      </address>     </div>     <div class="col-md-8">      <p><b>6 pm : "Developing Offline Applications with HTML 5" by Venkat Subramaniam</b></p>      <p><b>7 pm: Dinner and Networking</b></p>      <p><b>7:30 pm: "HTML 5 Animations - building true richness on the web" by Venkat Subramaniam</b></p>     </div>   </div> </section>

在浏览器中查看更新的主页时，它应类似于图 3。
图 3. UGLI 主页线框图
有了基本的 HTML 结构后，可以让它显示得比默认样式更美观。为此，需要添加一些语义。
Bootstrap 提供了您使用的默认结构化 HTML 元素（比如 <div> 和        <h3>）的内置样式。它还提供了一些不属于默认 HTML 元素的附加的结构化类，比如 row          和col。
初学的 Web 开发人员常常会考虑网页的结构，而不是显示的信息。结果是，他们使用像 big-red-italic 和          left-column-header 这样的名称来编写自定义 CSS 类。从语法上讲该方法并没有错，但我发现使用像          event-date 和 event-location        这样的语义名称时，网站的长期维护更容易。这样，当客户在一年后返回要求将所有分类汇总标为绿色而不是红色时，我可编写一个 CSS 类来识别显示了哪些内容          (subtotals)，而不是 如何显示        (green-body-text)。我也不太可能不经意地更改页面上其他恰好也使用了 green-body-text CSS        规则的元素。
返回到您刚编写的 HTML，添加一些具有合适的语义的 CSS 类，比如 event、event-date 和          event-title：

1 2 3 4

<div class="row center-block event"> <div class="event-date">Monday, September 22, 2014</div> <h3 class="event-title"><a href="http://www.meetup.com/HTML5-Denver-Users-Group/events/160326502/">     "Developing Offline Applications" and "HTML 5 Animations"</a></h3>

center-block 结构类来自          中介绍的 Bootstrap 库。稍后将会看到，将 event 类的 width 减小到 75%          时，center-block 将确保左侧和右侧的空白区域均等。
这非常适合在同一个元素上混合使用结构和语义类。事实上，从长远上来讲，它使我更容易快速识别哪些类是特定于应用程序的          (event-*)，哪些类是通用的（row、center-block）。