Bootstrap 组件：媒体对象组件（media）

汪末末

已于 2023-10-18 20:09:01 修改

阅读量2.8k

点赞数 3

分类专栏： # Bootstrap 框架文章标签： bootstrap css html css3 html5

于 2020-09-07 23:11:26 首次发布

本文链接：https://blog.csdn.net/WangMinGirl/article/details/108458395

版权

Bootstrap的媒体对象组件常用于创建新闻列表或商品信息展示，包括默认样式、对齐方式及媒体对象列表。组件由媒体容器、媒体对象、主体内容和标题组成。可以使用媒体对象嵌套实现更复杂的布局。

摘要由CSDN通过智能技术生成

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

在web页面中，图片居左，内容居右排列（图片居右，内容居左排列），是非常常见的效果，它也就是媒体对象，它是一种抽象的样式，可以用来构建不同类型的组件。常用于新闻消息列表、商品信息列表等的展示。

默认样式

默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。

媒体对象一般是成组出现，一组媒体对象一般包括以下几部分：

1、媒体对象的容器：用来容纳媒体对象的所有内容，容器上需使用类名.media

2、媒体对象的对象：一般是图片，需使用类.media-object

3、媒体对象的主体：就是媒体对象的主体内容，可以是任何元素，需使用类.media-body

4、媒体对象的标题：用来描述媒体对象的一个标题，需使用类.media-heading

<div class="media">
	<div class="media-left">
		<a href="##">
			<img src="../img/timg.jpg"class="" width="64" height="64" alt=""/>
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">Media heading</h4>
		<p>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。</p>
	</div>
</div>
<div class="media">
	<div class="media-body">
		<h4 class="media-heading">Media heading</h4>
		<p>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。</p>
	</div>
	<div class="media-right">
		<a href="##">
			<img src="../img/timg.jpg"class="" width="64" height="64" alt=""/>
		</a>
	</div>
</div>
<div class="media">
	<div class="media-left">
		<a href="##">
			<img src="../img/timg.jpg"class=""