首页 > 代码库 > bootstrap-媒体对象-对齐

bootstrap-媒体对象-对齐

2024-09-04 11:25:00   223人阅读

说明

图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐

示例

<!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 media-top">
			    	<a href="http://www.mamicode.com/#">
			      	<img class="media-object" src="http://www.mamicode.com/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-left media-middle">
			    	<a href="http://www.mamicode.com/#">
			      	<img class="media-object" src="http://www.mamicode.com/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-left media-bottom">
			    	<a href="http://www.mamicode.com/#">
			      	<img class="media-object" src="http://www.mamicode.com/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>

    	<!-- 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>

输出

技术分享

本文出自 “素颜” 博客，请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1898072

bootstrap-媒体对象-对齐


联系
我们