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

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

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

让我们来看看下面这个有关默认的媒体对象 .media 的实例：

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 默认的媒体对象</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><div class="media"><a class="pull-left" href="#"><img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒体对象"></a><div class="media-body"><h4 class="media-heading">媒体标题</h4>
      这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</div>
</div>
<div class="media"><a class="pull-left" href="#"><img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒体对象"></a><div class="media-body"><h4 class="media-heading">媒体标题</h4>
      这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。<div class="media"><a class="pull-left" href="#"><img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒体对象"></a><div class="media-body"><h4 class="media-heading">媒体标题</h4>
            这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</div></div></div>
</div></body>
</html>

结果如下所示：

让我们来看看下面这个有关媒体对象列表 .media-list 的实例：

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 媒体对象列表</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><ul class="media-list"><li class="media"><a class="pull-left" href="#"><img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"></a><div class="media-body"><h4 class="media-heading">媒体标题</h4><p>这是一些示例文本。这是一些示例文本。 这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p><!-- 嵌套的媒体对象 --><div class="media"><a class="pull-left" href="#"><img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"></a><div class="media-body"><h4 class="media-heading">嵌套的媒体标题</h4>
               这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。<!-- 嵌套的媒体对象 --><div class="media"><a class="pull-left" href="#"><img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"></a><div class="media-body"><h4 class="media-heading">嵌套的媒体标题</h4>
                     这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</div></div></div></div><!-- 嵌套的媒体对象 --><div class="media"><a class="pull-left" href="#"><img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"></a><div class="media-body"><h4 class="media-heading">嵌套的媒体标题</h4>
               这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</div></div></div></li><li class="media"><a class="pull-right" href="#"><img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="通用的占位符图像"></a><div class="media-body"><h4 class="media-heading">媒体标题</h4>
         这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</div></li>
</ul></body>
</html>

结果如下所示：

系列文章：

Bootstrap <基础一> css 概览

Bootstrap<基础二>网络系统

Bootstrap<基础三>排版

Bootstrap<基础四> 代码

Bootstrap <基础五>表格

Bootstrap<基础六> 表单

Bootstrap <基础七>按钮

Bootstrap <基础八>图片

Bootstrap<基础九>辅助类

Bootstrap<基础十> 响应式实用工具

Bootstrap<基础十一>字体图标(Glyphicons)

Bootstrap <基础十二>下拉菜单（Dropdowns）

Bootstrap<基础十三> 按钮组

Bootstrap<基础十四> 按钮下拉菜单

Bootstrap<基础十五> 输入框组

Bootstrap<基础十六> 导航元素

Bootstrap<基础十七>导航栏

Bootstrap <基础十八>面包屑导航（Breadcrumbs）

Bootstrap <基础十九>分页

Bootstrap<基础二十> 标签

Bootstrap <基础二十一>徽章（Badges）

Bootstrap <基础二十二>超大屏幕（Jumbotron）

Bootstrap <基础二十三>页面标题（Page Header）

Bootstrap<基础二十四> 缩略图

Bootstrap <基础二十五>警告（Alerts）

Bootstrap <基础二十六>进度条

Bootstrap<基础二十七> 多媒体对象（Media Object）

posted on 2015-05-06 14:04 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/4481717.html

Bootstrap基础二十七多媒体对象（Media Object）相关推荐

Bootstrap基础二网格系统
原文:Bootstrap<基础二> 网格系统 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什 ...
Android开发笔记（二十七）对象序列化
什么是序列化程序中存储和传递信息,需要有个合适的数据结构,最简单的是定义几个变量,变量多了之后再分门别类,便成了聚合若干变量的对象.代码在函数调用时可以直接传递对象,但更多的场合例如与文件交互.与网 ...
(二十七):application对象 (JSP学习第八天)
application对象 application对象是javax.servlet.ServletContext接口的实例化对象取得虚拟目录的对应的绝对路径本机的虚拟目录是:<Context ...
【零基础学Java】—对象的向上和向下转型（二十七）
[零基础学Java]-对象的向上转型(二十七) 对象的向上转型,其实就是多态的写法格式:父类名称对象名=new 子类名称(): 含义:右侧创建一个子类对象,把它当做父类来看待使用注意事项:向上转 ...
Bootstrap基础一 CSS 概览
原文:Bootstrap<基础一> CSS 概览 HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 ...
Bootstrap 基础五表格
原文:Bootstrap <基础五>表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> ...
javascript 回顾一下基础标准内置对象 Object（二）
文章目录一.Object 二.Object 构造函数的属性 1.Object.length 2.Object.prototype 3.Object.assign() 4.Object.create( ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
交通大学计算机应用基础二作业,上海交通大学继续教育学院计算机应用基础二第六次作业计算机安全多媒体.doc...
计算机应用基础(二) 开始时间2017 年 04 月 29 日星期六 16:52 状态完成成绩满分窗体顶端题目 1 正确获得分中的分 0qaid0 标记题目题干拥有查杀木马. 清理插件. ...

Bootstrap基础二十七多媒体对象（Media Object）

Bootstrap基础二十七多媒体对象（Media Object）相关推荐

最新文章

热门文章

Bootstrap基础二十七 多媒体对象（Media Object）

Bootstrap基础二十七 多媒体对象（Media Object）相关推荐

最新文章

热门文章

Bootstrap基础二十七多媒体对象（Media Object）

Bootstrap基础二十七多媒体对象（Media Object）相关推荐