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>

本节完。

时间: 2024-10-07 03:09:20

bootstrap学习笔记 多媒体对象的相关文章

Python学习笔记_Python对象

Python学习笔记_Python对象 Python对象 标准类型 其他内建类型 类型对象和type类型对象 Python的Null对象None 标准类型操作符 对象值的比较 对象身份比较 布尔类型 标准类型的内建函数 typeObj cmpobj1 obj2 strobj reprobj typeobj isinstanceobj 标准类型的分类 存储模型 更新模型 访问模型 不支持的类型 Python学习笔记_Python对象 首先来理解一个通俗的含义,什么是对象?其实对象无论在什么语言里面

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

bootstrap学习笔记一: bootstrap初认识,hello bootstrap(下)

这一篇主要是补上源码,开始之前请先回顾:bootstrap学习笔记一: bootstrap初认识,hello bootstrap(上) 首先,我们的页面要求, lang,charset等就不用说了,老html属性, viewport是h5的属性,目的是 width=device-width 铺满设备宽度, initial-scale=1正常比较 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式 因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法 通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu

BootStrap 学习笔记一

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 1.HTML5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2.为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签. <meta name="viewport" cont

BootStrap 学习笔记二

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 IE 浏

BootStrap 学习笔记三

BootStrap学习笔记一: 学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists 表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 为了让 I