7.12.3 嵌套媒体对象

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.7k 阅读时长 ≈ 2 分钟

7.12.3 嵌套媒体对象

Bootstrap 的媒体对象支持嵌套,所谓嵌套就是再次将媒体对象整体(.media元素)放入媒体对象的描述内容中(.media-body元素)。
提示:通过嵌套媒体对象,可以使媒体对象形成结构清晰的层次关系,这种层次关系通常应用于Web页面中的多人回复设计上。

示例程序

下面示例示范了如何嵌套媒体对象。

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
<!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>
                <!-- 第1层嵌套的媒体对象整体 -->
                <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>
                        <!-- 第2层嵌套的媒体对象 -->
                        <div class="media">
                            <!-- 默认是顶部对齐 -->
                            <div class="media-left">
                                <a href="http://www.fkjava.org">
                                    <img class="media-object" src="../fklogo.gif" alt="疯狂软件">
                                </a>
                            </div>
                            <!-- 第2层嵌套的媒体对象的描述 -->
                            <div class="media-body">
                                <h4 class="media-heading">疯狂软件教育中心（顶部对齐）</h4>
                                <p>疯狂软件教育中心是一家专业提供开发培训（包括Java、Android、前端、iOS等课程）的培训机构。</p>
                                地址：<address>广州市天河区车陂大岗工业路4号沣宏大厦3楼</address>
                            </div>
                        </div>
                    </div>
                </div>
            </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>