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