您的位置：首页 > Web前端 > BootStrap

media 用list实现

2016-07-12 08:59 369 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 10px 0px;
}
</style>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
<img src="images/media.png"/>
</a>
<div class="media-body">
<h4>天气预报</h4>
<p>你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
</p>

</div>
</li>
<li class="media">
<a class="media-left" href="#">
<img src="images/media.png"/>
</a>
<div class="media-body">
<h4>天气预报</h4>
<p>你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
</p>

</div>
</li>
<li class="media">
<a class="media-left" href="#">
<img src="images/media.png"/>
</a>
<div class="media-body">
<h4>天气预报</h4>
<p>你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
你好吗，我很好天气也很好你好吗，我很好天气也很好你好吗，我很好天气也很好<br>
</p>

</div>
</li>

</ul>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap

相关文章推荐

新的分享

章节导航