bootstrap-媒体对象-对齐

发布时间:2020-07-27 09:10:20 作者:素颜猪
来源:网络 阅读:333

说明

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

示例

<!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/K68vbdEjh5u" 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="#">
			      	<img class="media-object" src="/static/img/qq.png" alt="...">
			    	</a>
			  	</div>

  				<div class="media-body">
    				<h5 class="media-heading">Media heading</h5>
    				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="#">
			      	<img class="media-object" src="/static/img/qq.png" alt="...">
			    	</a>
			  	</div>

  				<div class="media-body">
    				<h5 class="media-heading">Media heading</h5>
    				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="#">
			      	<img class="media-object" src="/static/img/qq.png" alt="...">
			    	</a>
			  	</div>

  				<div class="media-body">
    				<h5 class="media-heading">Media heading</h5>
    				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>

输出

bootstrap-媒体对象-对齐

推荐阅读:
  1. Bootstrap 进度条媒体对象和 Well 组件
  2. bootstrap-媒体对象列表

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

对齐 bootstrap 媒体对象

上一篇:DRBD + heartbeat 介绍及安装测试

下一篇: lua 闭包

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》