bootstrap-媒体对象

最新推荐文章于 2025-08-08 17:07:36 发布

weixin_33862514

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/562402

本文介绍了一个使用Bootstrap实现的媒体对象组件示例，展示了如何将图像放置在文本的左侧或右侧，适用于创建新闻列表、评论等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

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

示例

<!DOCTYPE html>
<html lang="zh-CN">
  	<head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    	<title>Bootstrap 101 Template</title>

    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    	<!--[if lt IE 9]>
      		<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      		<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    	<![endif]-->
  	</head>
  	<body>
  		<div class="container">
  			<div class="media">
			  	<div class="media-left">
			    	<a href="#">
			      	<img class="media-object" src="/static/img/qq.png" alt="...">
			    	</a>
			  	</div>

  				<div class="media-body">
    				<h4 class="media-heading">Media heading</h4>
    				Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  				</div>
			</div>

			<div class="media">
  				<div class="media-body">
    				<h4 class="media-heading">Media heading</h4>
    				Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  				</div>

  				<div class="media-right">
			    	<a href="#">
			      	<img class="media-object" src="/static/img/qq.png" alt="...">
			    	</a>
			  	</div>
			</div>
		</div>

    	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    	<!-- Include all compiled plugins (below), or include individual files as needed -->
    	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  	</body>
</html>

输出