媒体对象列表

2017-07-12 00:12:00
admin
原创
294
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 媒体对象列表</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="media-list">
	<li class="media">
		<a class="media-left" href="#">
			<img class="media-object" src="http://www.ybao.org/data/upload/201707/f_6a5bb54793d4eee7fdeb43cd31793425.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="http://www.ybao.org/data/upload/201707/f_6a5bb54793d4eee7fdeb43cd31793425.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="http://www.ybao.org/data/upload/201707/f_6a5bb54793d4eee7fdeb43cd31793425.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="http://www.ybao.org/data/upload/201707/f_6a5bb54793d4eee7fdeb43cd31793425.jpg"
						 alt="通用的占位符图像">
				</a>
				<div class="media-body">
					<h4 class="media-heading">嵌套的媒体标题</h4>
					这是一些示例文本。这是一些示例文本。
					这是一些示例文本。这是一些示例文本。
					这是一些示例文本。这是一些示例文本。
					这是一些示例文本。这是一些示例文本。
					这是一些示例文本。这是一些示例文本。
				</div>
			</div>
		</div>
	</li>
	<li class="media">
		<a class="pull-right" href="#">
			<img class="media-object" src="http://www.ybao.org/data/upload/201707/f_6a5bb54793d4eee7fdeb43cd31793425.jpg"
				 alt="通用的占位符图像">
		</a>
		<div class="media-body">
			<h4 class="media-heading">媒体标题</h4>
			这是一些示例文本。这是一些示例文本。
			这是一些示例文本。这是一些示例文本。
			这是一些示例文本。这是一些示例文本。
			这是一些示例文本。这是一些示例文本。
			这是一些示例文本。这是一些示例文本。
		</div>
	</li>
</ul>

</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227