免费AI编程助手
Bootstrap 媒体对象
2018-03-03 16:50 更新
媒体对象（Media Object）用于创建应包含左或右对齐的媒体（图片，视频或音频）以及一些文本内容的组件。
Bootstrap的媒体对象可以方便的创建多级嵌套注释。
要生成媒体对象，你需要创建一个具有媒体类的div。然后你把两个必要的组件放在里面：媒体和media-body。
media-body div应该有两个组件：标题和文本内容。
标题可以使用带有media-heading类的 h4 元素给出，并且使用 p 元素来表示文本内容。
例1
创建媒体对象的标记是：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Awesome piece of work!</h4>
<p>Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur </p>
</div>
</div>
</body>
</html>例2
要创建嵌套注释设计，我们可以将更多的媒体对象标记放在前一个媒体对象的media-body div中，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body style="margin:30px">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Awesome piece of work!</h4>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
<!-- Second Media Object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/50x50" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Awesome piece of work!</h4>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>
</div>
</div>
</div>
</div>
</body>
</html>以上内容是否对您有帮助：
更多建议：