7.12 媒体对象
我们经常在网页上看到”左边或右边是图片或视频,右边是文字描述、用户点评”的这种效果,这种效果和前面的缩略图效果有点类似,但并不完全相同。Bootstrap将这种效果称为媒体对象。
7.12.1 媒体对象的基本组成
Bootstrap为媒体对象提供了如下样式。
媒体对象的组成
| 样式 |
描述 |
.media |
该样式应用于**整个媒体对象的所在容器**。 |
.media-object |
该样式应用于**媒体对象本身(图片或视频)**。 |
.media-body |
该样式应用于媒体对象的**描述文字所在容器**。 |
.media-heading |
该样式应用于媒体对象的**描述文字的标题**。该样式放在.media-body样式的容器里面 |
媒体对象的对齐方式
| 样式 |
描述 |
.media-left |
该样式设置左对齐。 |
.media-right |
该样式设置右对齐。 |
媒体对象的正确用法
媒体对象的正确用法是:
- 先定义一个
<div>元素作为整个媒体对象的元素,为该元素指定.media样式。
- 添加媒体对象(图片或视频),并为媒体对象设置
.media-object样式。
- 定义一个
<div>元素作为媒体对象的描述文字的容器元素,为该元素指定.media-body样式。接下来向该元素内添加描述文字。
示例代码
下面代码示范了媒体对象的功能和用法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 媒体对象 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="media">
<div class="media-left">
<a href="http://www.fkjava.org">
<img class="media-object" src="../fklogo.gif" alt="疯狂软件">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">疯狂软件教育中心</h4>
<p>疯狂软件教育中心是一家专业提供开发培训（包括Java、Android、前端、iOS等课程）的培训机构。</p>
地址：<address>广州市天河区车陂大岗工业路4号沣宏大厦3楼</address>
<p><span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span></p>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">疯狂软件教育中心</h4>
<p>疯狂软件教育中心是一家专业提供开发培训（包括Java、Android、前端、iOS等课程）的培训机构。</p>
地址：<address>广州市天河区车陂大岗工业路4号沣宏大厦3楼</address>
<p><span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span></p>
</div>
<div class="media-right">
<a href="http://www.fkjava.org">
<img class="media-object" src="../fklogo.gif" alt="疯狂软件">
</a>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="http://www.fkjava.org">
<img class="media-object" src="../fklogo.gif" alt="疯狂软件">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">疯狂软件教育中心</h4>
<p>疯狂软件教育中心是一家专业提供开发培训（包括Java、Android、前端、iOS等课程）的培训机构。</p>
地址：<address>广州市天河区车陂大岗工业路4号沣宏大厦3楼</address>
<p><span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span></p>
</div>
<div class="media-right">
<a href="http://www.fkjava.org">
<img class="media-object" src="../fklogo.gif" alt="疯狂软件">
</a>
</div>
</div>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|
第一个<div>元素被指定了.media样式,那么该元素将会作为整个媒体元素的容器。该元素内通常可包含2个子<div>元素。
- 被指定了
class="media-left"或class="media-right"样式的<div>元素,该元素作为媒体对象的容器。
- 被指定了
class="media-body"样式的元素,该元素将作为媒体对象的描述文字的容器。
- 如果希望媒体对象位于文本描述的左边,则先定义媒体对象,再定义文本描述;
- 如果要将媒体对象放在文本描述的右边,则先放置文本描述,再放置媒体对象。
- 如果将媒体对象放在左边,则通常为媒体对象所在的
<div>元素设置class="medie-left"样式;
- 如果将媒体对象放在右边,则通常为媒体对象所在的
<div>元素设置class="medie-right"样式。