zoukankan      html  css  js  c++  java
  • 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>

    本节完。

  • 相关阅读:
    使用scrapy-redis 搭建分布式爬虫环境
    爬虫必备工具-chrome 开发者工具
    Python 中多进程、多线程、协程
    Python 中命令行参数解析工具 docopt 安装和应用
    什么是中台?
    ubuntu 18.04 上安装 docker
    深入理解 ajax系列第一篇(XHR 对象)
    scrapy 中 shell 出现 403 Forbiidden 解决方案
    python 的参数总结
    Python 的直接赋值、Deepcopy、Copy的区别
  • 原文地址:https://www.cnblogs.com/langhua/p/4523036.html
Copyright © 2011-2022 走看看