文章页面的设计跟主页差不多，页头，底部边栏，还有页脚都是一样的，不同是，页面的主内容区域分成两部分 ... 左边占用 8 个网格宽度，显示文章的内容，比如标题，正文，文章的评论等等 ... 右边的边栏占用 4 个网格的宽度 ...
我们可以直接复制一份之前创建的网页，然后再修改一下 ... 复制一份 ... 命名为 article.html .... 然后打开这个网页 ... 删掉网页里面的内容列表块的内容 ...
这个区域我们要可以分成两部分 ... 先输入一组
第一组
把分页导航和面包屑也放在第一组
标签 ...
内容的大标题
，在这个标签上再定义一个类 .article-title 一会儿用这个类给文章的标题添加点样式 ...
footer
标题的下面是文章的发布日期，分类，标签，和评论链接这些内容 ... 这部分内容可以放在 标签里 ...
，在上面添加一个 .content-meta 类 ...
在它的里面分别是文章的发布日期 ... 使用 标签 ...
2013-01-10
然后是分类 ... 把它放在一组 标签里 ...
后院婚礼
后面是内容的标签 ... 同样把它放在一组 标签里 ... 如果需要，我们可以在这组 标签上定义 css 类，这样可以专门针对这个 css 类添加一些样式 ...
秋天
最后是文章评论的数量 ....
3
这里每一项内容的前面我们可以添加一个小图标 ... 打开 Bootstrap 项目的网站 ... 打开 Base CSS ... 点击 Icons ...
在这里你可以找几个合适的图标 ，使用对应的图标的类就可以在网页上添加对应的图标 ... 回到网页的代码模式下 ...
用 标签 ... 然后添加对应的图标类 ... 日期的图标是 icon-calendar ....
分类的前面添加一个 icon-book 图标 ... 标签前面添加一个 icon-tags 图标 ...
评论数量的前面添加一个 icon-comment 图标 ...
#content
在这部分内容的下面就是文章的内容... 先输入一组
这组
先插入一张图片 ... 
在图片下面，再添加点文字 ... (准备好文字内容 ... )
文章内容样式
下面给文章的内容添加点样式，打开网页的样式表 ... 输入一段注释 ...
然后输入 .article-title{} 给文章的标题添加一个下边的外边距 ...
#content{} 给文章的正文的上边和下面添加一个 20px 的外边距...
#content img{} 给文章正文里面图片，添加一个 5px 的下边的外边距 ...
这样文章的内容基本就处理好了，下面视频我们来看一下文章的评论 ...
/*
* 文章内容样式
*/
.article-title{
margin-bottom: 30px;
}
#content{
margin: 20px 0;
}
#content img{
margin-bottom: 5px;
}
)
仅针对单个用户...)
