Bootstrap组件 - 多媒体对象

知识点

类 | 描述

  • | :-: | -:
    .media | 该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。
    .media-list | 如果你需要一个列表,各项内容是无序列表的一部分,可以使用该 class。可用于评论列表与文章列表。
    .media-left | {display: table-cell;vertical-align: top;padding-right: 10px;}
    .media-body | {display: table-cell;vertical-align: top;width: 10000px;} .media .media-body{overflow:hidden;zoom:1;}
    .media-right | {display: table-cell;vertical-align: top;padding-left: 10px;}

在 html 结构中, .media-right 应当放在 .media-body 的后面。

对齐
图像默认为顶部对齐,可以设置图片或其他媒体类型可以顶部、中部或底部对齐。
.media-middle
.media-bottom

媒体对象列表
多媒体列表,类似博客留言回复。

多媒体列表


实践

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Resource-type" content="Document"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>组件-多媒体对象</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <style>
        <!--
        .line{border-top:1px solid #afd9ee;margin:20px 0;}
        -->
    </style>
</head>
<body>
<div class="container">
    <div class="media">
        <div class="media-left">
            <a href="#">
                ![](images/img1.jpg)
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">媒体头部</h4>
            <p>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)。</p>
            <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上,但是,从 v3.3.0 版本开始,他们就不再被建议使用了。.media-left 和 .media-right 替代了他们,不同之处是,在 html 结构中, .media-right 应当放在 .media-body 的后面。</p>
            <p>图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。</p>
            <p>用一点点额外的标记,就能在列表内使用媒体对象组件(对评论或文章列表很有用)。</p>
        </div>
    </div>
    <div class="line"></div>
    <!--对齐-->
    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                ![](images/img1.jpg)
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">media-middle</h4>
            <p>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)。</p>
            <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上,但是,从 v3.3.0 版本开始,他们就不再被建议使用了。.media-left 和 .media-right 替代了他们,不同之处是,在 html 结构中, .media-right 应当放在 .media-body 的后面。</p>
            <p>图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。</p>
            <p>用一点点额外的标记,就能在列表内使用媒体对象组件(对评论或文章列表很有用)。</p>
        </div>
    </div>
    <div class="line"></div>
    <!--底部对齐-->
    <div class="media">
        <div class="media-left media-bottom">
            <a href="#">
                ![](images/img1.jpg)
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">media-bottom</h4>
            <p>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)。</p>
            <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上,但是,从 v3.3.0 版本开始,他们就不再被建议使用了。.media-left 和 .media-right 替代了他们,不同之处是,在 html 结构中, .media-right 应当放在 .media-body 的后面。</p>
            <p>图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。</p>
            <p>用一点点额外的标记,就能在列表内使用媒体对象组件(对评论或文章列表很有用)。</p>
        </div>
    </div>
    <div class="line"></div>
    <!--多媒体列表,类似博客留言回复-->
    <ul class="media-list">
        <li class="media">
            <!--第一层-->
            <div class="media-left">
                <a href="#">
                    ![](images/img1.jpg)
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">media-bottom</h4>
                <p>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)。</p>
                <!--第二层 1-->
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            ![](images/img2.jpg)
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">media-bottom</h4>
                        <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上,但是,从 v3.3.0 版本开始,他们就不再被建议使用了。.media-left 和 .media-right 替代了他们,不同之处是,在 html 结构中, .media-right 应当放在 .media-body 的后面。</p>
                        <div class="media">
                            <div class="media-left">
                                <a href="#">
                                    ![](images/img1.jpg)
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">media-bottom</h4>
                                <p>图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--第二层 2-->
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            ![](images/img3.jpg)
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">media-bottom</h4>
                        <p>.pull-left 和 .pull-right 这两个类以前也曾经被用在了媒体组件上,但是,从 v3.3.0 版本开始,他们就不再被建议使用了。.media-left 和 .media-right 替代了他们,不同之处是,在 html 结构中, .media-right 应当放在 .media-body 的后面。</p>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

</body>
</html>

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,131评论 1 92
  • 怎样创建一个媒体对象 ? 一个媒体对象由以下及部分组成 父容器 .media 媒体部分 .media-left 或...
    勤劳的悄悄阅读 2,041评论 0 3
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 4,237评论 0 66
  • CSS全局样式 概览 移动设备优先 布局容器 1、container类用于固定宽度并支持响应式布局的容器 2、co...
    VEN_64d6阅读 922评论 0 1
  • 《六项精进》打卡第75天 姓名:攸攸 公司:悦美家居旗下北美之家 《六项精进》: 226 期 苏州 感谢一组学员 ...
    攸攸_b854阅读 129评论 0 0
  • 谁知道谁心里此时此刻在想什么呢!
    忧郁的漁阅读 85评论 0 0
  • 我从初恋到现在都是一个男朋友,男朋友很普通,但对我很好。我曾经犹豫过,觉得最好的年华都给了他,以后一辈子都只能爱一...
    这是女侠阅读 309评论 2 3
  • 2014就这样悄无声息的溜走了,心里有些莫名的感伤。早已过了时间大把,随意挥洒的年纪了,如今已不敢正视自己的年龄了...
    郭小聪_阅读 189评论 0 1