下面我们开始实施页面主体内容的设计，这部分内容可以分成三块，一块是内容块的列表，然后是一个分页导航，最后是一个导航路径。

我们先做这个内容块的列表，内容块上面由几部分组成，最上面灰色部分代表是一张图片 ... 下面是一个带灰色线的盒子，里面放着内容的标题，绿色的圆圈是作者的头像，然后是发布的日期，内容的分类，最后还有一组按钮，一个按钮可以显示内容的摘要，另一个是内容的评论的链接。

我们可以把图像单独放在一组 <div> 标签里，它下面这些内容单独放一组 <div> 标签里。

回到网页的代码模式 ...

在网页导航部分的下面，我们可以做网页的主体内容部分 ...

先输入一组 <div> 标签 ... 然后在上面定义一个 id ，输入 id="main-content" ，这样我们可以使用 main-content 这个 id 为这部分内容应用一些样式 ...

在这组 <div> 标签里，再添加一组 <div> 标签 ... 在上面添加一个 .container 的类 ...

下面我们先实施内容块的设计，我们可以在 Bootstrap 里找到一个合适这部分内容的组件 ... 打开 Bootstrap 项目的网站， http://twitter.github.com/bootstrap/ ，在 Components ，组件里 ... 点击 Thumbnails 缩略图 ...

这个组件比较适合我们的内容块的设计，浏览到这个小组件的代码的演示 ...

你会看到，在大容器的上面要应用一个 .thumbnails 类，然后每个项目上面使用一个布局的网格类，内容上面可以添加一个 .thumbnail ，这个类可以在内容的周围添加一个边框，在我们的设计里并不需要这个边框... 所以可以不添加这个类 ...

回到代码模式 ...

先输入一组 <div> 标签 ... 然后在上面添加一个 .thumbnails 类 ...

每个内容块我们可以添加一组 <article> 标签包装 ... 每个内容块占页面宽度的一半，所以在上面我们添加一个 .span6 的类。

每个内容块的里面分成两大块，上面是图片，下面是一些文字， 下面我们创建两组 <div> 标签分别包装这两块内容 ...

<div></div>
<div></div>

在第一组 <div> 标签上，我们定义一个类， class="media-box" ... 在第二组 <div> 标签上也定义一个类 ... class="content-box"

一会儿我们要用这两个类做为样式的选择器，为这两块内容添加一些自定义的样式。