摘自《极客学院》
1、效果图:
2、html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="bootstrap.min.css" rel="stylesheet">
<title>BootStrap媒体对象</title>
<style>
body{
margin: 10px 0px;
}
</style>
</head>
<body>
<div class="container">
<ul class="media-list">
<li class="media">
<!--class=media-middle内容居中-->
<a class="media-left media-middle" href="#">
<img src="psb%20(5).gif" alt="">
</a>
<div class="media-body">
<h3>fdafdsafdgf</h3>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohellod</p>
</div>
</li>
<li class="media">
<!--class=media-middle内容居中-->
<a class="media-left media-middle" href="#">
<img src="psb%20(5).gif" alt="">
</a>
<div class="media-body">
<h3>fdafdsafdgf</h3>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohellod</p>
</div>
</li>
<li class="media">
<!--class=media-middle内容居中-->
<a class="media-left media-middle" href="#">
<img src="psb%20(5).gif" alt="">
</a>
<div class="media-body">
<h3>fdafdsafdgf</h3>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohello</p>
<p>hellohellohellohellohellohellohellovvvhellohellod</p>
<p>hellohellohellohellohellohellohellovvvhellohellod</p>
<p>hellohellohellohellohellohellohellovvvhellohellod</p>
<p>hellohellohellohellohellohellohellovvvhellohellod</p>
</div>
</li>
</ul>
</div>
</body>
</html>