内容列表块的内容

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 .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> ...

内容列表块的内容《 HTML5 与 Bootstrap 应用实例 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点