bootstrap学习笔记多媒体对象

本文将介绍Bootstrap中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件（比如博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用class来实现的。你可以在html标签中添加以下两种形式来设置媒体对象：

media:该class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

　 media-list 如果你需要一个列表，各项内容是无序列表的一部分，可以使用class.可用于评论列表与文章列表。

先看实例：

html

<h2>Media</h2>

<div class="media">

    <a class="pull-left" href="#">

        <img alt="媒体对象" src="~/aiya.png" />

    </a>

    <div class="media-body">

        <h4 class="media-heading">媒体对象</h4>

        去年8月7日晚上7时50分左右,小晴和小勇到南海某小区游泳池游泳。下水约10分钟后,小晴就被发现侧身躺在泳池中溺水昏迷。救生员对其展开现场施救,约20分钟后,医护人员赶到,小晴被送往南海区中医院抢救,后又先后转至广州珠江医院和广东三九脑科医院救治。

    </div>

</div>

<div class="media">

    <a class="pull-left" href="#">

        <img class="media-object" src="~/aiya.png" alt="" />

    </a>

    <div class="media-body">

        <h4 class="media-heading">媒体标题</h4>

        在巴西最著名的城市里约热内卢，李克强从市长手里接受了一把金色的“城市钥匙”。此前获赠过这把“城市钥匙”的，只有巴西前总统卢拉、教皇方济各、国际足联主席布拉特、国际奥委会主席巴赫4位客人。

        <div class="media">

            <a href="#" class="pull-left">

                <img src="~/QQ截图20150506113947.png" alt="" />

            </a>

            <div class="media-body">

                <h4 class="media-heading">媒体标题</h4>

                国新办今日举行国务院政策例行吹风会，介绍全面推开县级公立医院综合改革、城市公立医院综合改革试点、中医药健康服务发展规划(2015-2020年)、深化医药卫生体制改革2015年重点工作等有关情况。

            </div>

        </div>

    </div>

</div>

media list效果：

html:

<h4>列表</h4>

<ul class="media-list">

    <li class="meida">

        <a class="pull-left" href="#">

            <img alt="媒体对象" src="~/aiya.png" />

        </a>

        <div class="media-body">

            <h4 class="media-heading">媒体对象</h4>

            去年8月7日晚上7时50分左右,小晴和小勇到南海某小区游泳池游泳。下水约10分钟后,小晴就被发现侧身躺在泳池中溺水昏迷。救生员对其展开现场施救,约20分钟后,医护人员赶到,小晴被送往南海区中医院抢救,后又先后转至广州珠江医院和广东三九脑科医院救治。

            <div class="media">

                <a href="#" class="pull-left">

                    <img src="~/aiya.png" alt="" />

                </a>

                <div class="media-body">

                    <h4 class="media-heading">媒体标题</h4>

                    国新办今日举行国务院政策例行吹风会，介绍全面推开县级公立医院综合改革、城市公立医院综合改革试点、中医药健康服务发展规划(2015-2020年)、深化医药卫生体制改革2015年重点工作等有关情况。

                </div>

            </div>

        </div>

    </li>

    <li class="meida">

        <a class="pull-left" href="#">

            <img class="media-object" src="~/aiya.png" alt="" />

        </a>

        <div class="media-body">

            <h4 class="media-heading">媒体标题</h4>

            在巴西最著名的城市里约热内卢，李克强从市长手里接受了一把金色的“城市钥匙”。此前获赠过这把“城市钥匙”的，只有巴西前总统卢拉、教皇方济各、国际足联主席布拉特、国际奥委会主席巴赫4位客人。

        <div class="media">

            <a href="#" class="pull-left">

                <img src="~/aiya.png" alt="" />

            </a>

            <div class="media-body">

                <h4 class="media-heading">媒体标题</h4>

                国新办今日举行国务院政策例行吹风会，介绍全面推开县级公立医院综合改革、城市公立医院综合改革试点、中医药健康服务发展规划(2015-2020年)、深化医药卫生体制改革2015年重点工作等有关情况。

                <div class="media">

                    <a href="#" class="pull-left">

                        <img src="~/aiya.png" alt="" />

                    </a>

                    <div class="media-body">

                        <h4 class="media-heading">媒体标题</h4>

                        国新办今日举行国务院政策例行吹风会，介绍全面推开县级公立医院综合改革、城市公立医院综合改革试点、中医药健康服务发展规划(2015-2020年)、深化医药卫生体制改革2015年重点工作等有关情况。

                    </div>

                </div>

            </div>

        </div>

        </div>

    </li>

    <li class="media">

        <a href="#" class="pull-left">

            <img src="~/aiya.png" alt="" />

        </a>

        <div class="media-body">

            <h4 class="media-heading">媒体标题</h4>

            国新办今日举行国务院政策例行吹风会，介绍全面推开县级公立医院综合改革、城市公立医院综合改革试点、中医药健康服务发展规划(2015-2020年)、深化医药卫生体制改革2015年重点工作等有关情况。

        </div>

    </li>

</ul>

本节完。

巴特西

bootstrap学习笔记多媒体对象

最新文章

热门文章

巴特西

bootstrap学习笔记 多媒体对象

最新文章

热门文章

bootstrap学习笔记多媒体对象