章节
问答
课签
笔记
评论
占位
占位

媒体对象--媒体对象列表

媒体对象的嵌套仅是媒体对象中一个简单应用效果之一,在很多时候,我们还会碰到一个列表,每个列表项都和媒体对象长得差不多,同样用评论系统来说事:

使用方法:

针对上图的媒体对象列表效果,Bootstrap框架提供了一个列表展示的效果,在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”,示例代码如下:

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src=" " alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media Header</h4>
            <div>…</div>
        </div>
    </li>
    <li class="media">…</li>
    <li class="media">…</li>
</ul>

运行效果如下:

原理分析:

媒体对象列表,在样式上也并没有做过多的特殊处理,只是把列表的左间距置0以及去掉了项目列表符号:

/*bootstrap.css文件第4816行~第4819行*/
.media-list {
  padding-left: 0;
  list-style: none;
}

任务

我来试试:制作一个媒体对象列表

素材地址:

  1、http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031

  2、http://tp2.sinaimg.cn/3306361973/50/22875318196/0

  3、http://tp4.sinaimg.cn/1167075935/50/22838101204/1

效果图如下:

?不会了怎么办

参考代码如下:

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">我是大漠</h4>
            <div>我是W3cplus站长大漠,我在写Bootstrap框中的媒体对象测试用例</div>
        </div>
    </li>
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">慕课网</h4>
            <div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
        </div>
    </li>
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">W3cplus</h4>
            <div>W3cplus站上还有很多教程....</div>
        </div>
    </li>
</ul>
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
body {
padding: 30px
      100px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / qq_馒头_29
你如果想中间的10px不要,也很简单,因为pull-left,原本就是向做浮动,现在这个pull-left在media中就个给他添加了一个向右的外边距,如下media > .pull-left { margin-right: 10px;};那现在就很明白了,你直接取消pull-left,然后直接在后面写一个样式 style="float:left" 就可以了

最新回答 / 嘉瑜猫
木有用,我试过<ul class="dropdown-menu" style="z-index:1500;">                <li><a href="#">XXXXX</a></li>                <li><a href="#">b</a></li>                <li><a href="#">c</a><...

最新回答 / hey自然
这种问题就得自己动手,写出代码看代码
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言