在 .media-box 这组 <div> 标签里,插入一张图片 ... 输入 ... <img src="content/1.jpg" alt="">
然后在 .content-box 里面,再添加一些内容,首先是内容的标题,可以使用标题标签,一级标题用 <h1> 标签,<h1></h1> ...
如果是二级标题,你可以用 <h2> 标签 ... 最多你可以使用六个级别的标题 ...
内容标题的下面是内容作者,发布日期这些内容,这部分内容我们可以放在一组 <footer> 标签里面 ...
<footer></footer>
在这组 <footer> 标签里,先插入一张作者的头像 ... <img src="content/avatar.jpg" alt="">
然后是内容的发布日期,2013-01-15 ... 时间可以使用 <time> 标签标记一下 ... 接着是内容的分类 ... 农场婚礼 ...
最后是一组按钮,这里我们可以使用 Bootstrap 的按钮组的设计 ...
http://twitter.github.com/bootstrap/ ,在 Components 里面 ... 点击 Button groups 按钮组 ...
复制一下按钮组的代码结构 ... 回来 ... 粘贴到这里 ...
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</div>
修改一下 ... 我们只需要两个按钮 ... 去掉一个 ... 然后把 <button> 标签改成 <a> 标签 ... 输入 href="#"
第一个按钮可以显示内容的摘要,第二个按钮是内容的评论链接 ... 我们可以使用 Bootstrap 的图标来代替文字 ...
回到 Bootstrap 项目的网站 ... 点击 Base CSS ... Icons ...
在这里找到合适的图标 ... 我们可以使用 icon-info-sign 这个图标作为内容摘要的按钮图标 ...
用 icon-comment 这个图标作为评论按钮的图标 ...
回到网页的代码模式 ... 在按钮组的第一个按钮里输入 <i class="icon-info-sign"></i> ...
在第二个按钮里输入 <i class="icon-comment"></i> ...