Bootstrap 多媒体对象（Media Object）

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

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

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

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

<div class="media"><a class="media-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="media-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="media-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>

结果如下所示：

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

<ul class="media-list"><li class="media"><a class="media-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="media-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="media-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="media-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="media-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>

结果如下所示：

转载于:https://www.cnblogs.com/lc1776/p/9213790.html

Bootstrap 多媒体对象（Media Object）相关推荐

Bootstrap基础二十七多媒体对象（Media Object）
Bootstrap<基础二十七> 多媒体对象(Media Object) 原文:Bootstrap<基础二十七> 多媒体对象(Media Object) Bootstrap 中 ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
Bootstrap 媒体对象
媒体对象媒体对象是一类具有特殊版式的组件,用来设计图文混排的效果,它们多是由一幅向左或向右浮动的图像和一些文本构成. Bootstrap提供了两种类型的媒体对象:媒体(.media)和媒体列表(.m ...
html 插入多媒体对象,如何在word中插入多媒体对象
内容提要:本文介绍如何在word中插入多媒体对象,比如MP3.电影和动画等. word是我们在办公软件中使用频率较高的软件,如何在Word中插入多媒体对象,比如MP3.电影和动画等,让我们制作的文件成 ...
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4 1.网络系统规则屏幕最多分为12列(同一行数字相加应为12) 用行来创建水平的列组为自动设置外边距内边距,需将网格每一行需要放在设置了 .container (固定宽度) ...
JavaScript 复制对象与Object.assign方法无法实现深复制
在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复 ...
《JavaScript启示录》——1.21 JavaScript对象和Object()对象
本节书摘来自异步社区<JavaScript启示录>一书中的第1章,第1.21节,作者:[美]Cody Lindley著,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
JVM - 剖析Java对象头Object Header之指针压缩
文章目录 Pre 指针压缩论证压缩效果 UseCompressedOops & UseCompressedClassPointers [指针压缩]开启 VS 关闭指针压缩的目的为什么堆内 ...
JVM - 剖析Java对象头Object Header之对象大小
文章目录 Pre 总览对象头剖析查看对象内存的占用情况对象头C++源码注释 Pre JVM - 写了这么多年代码,你知不道new对象背后的逻辑? 中大体介绍了Java中 new 对象背后的主要 ...
linux 进程间通信 dbus-glib【实例】详解三数据类型和dteeth（类型签名type域）（层级结构：服务Service --＞ Node（对象、object）等）（附代码）
linux 进程间通信 dbus-glib[实例]详解一(附代码)(d-feet工具使用) linux 进程间通信 dbus-glib[实例]详解二(上) 消息和消息总线(附代码) linux 进程间 ...

Bootstrap 多媒体对象（Media Object）

Bootstrap 多媒体对象（Media Object）相关推荐

最新文章

热门文章