蓝蓝站点

Java读书笔记

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

7.13.5 定制列表项内容

除了简单的列表项之外,Bootstrap的列表项中可以放任意内容,只要将相应的HTML元素放入列表项中即可。

程序示例

例如如下代码示范了定制内容的列表项。

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
<!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">
        <!-- 列表组 -->
        <ul class="list-group">
            <!-- 列表项 -->
            <li class="list-group-item">
                <!-- 列表项内容 -->
                <h3>疯狂前端开发讲义</h3>
                <p>描述性文字内容</p>
            </li>
            <!-- 列表项 激活状态 -->
            <li class="list-group-item active">
                <!-- 列表项内容 -->
                <h3>疯狂Android讲义</h3>
                <p>描述性文字内容</p>
            </li>
            <li type="button" class="list-group-item disabled">
                <h3>疯狂iOS讲义</h3>
                <p>描述性文字内容</p>
            </li>
            <li type="button" class="list-group-item">
                <h3>疯狂Swift讲义</h3>
                <p>描述性文字内容</p>
            </li>
        </ul>
    </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>

这里的代码在列表项元素(<li>元素)中再次添加了<h3>和<p>子元素,这意味着这些内容共同组成了列表项。如果希望定制更复杂的列表项,可将对应的HTML元素添加到<li>元素中。

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

7.13.4 列表项的状态

Bootstrap为列表项状态提供了如下两种样式。

样式 描述
.active 该样式表明列表项目当前处于激活状态。
.disabled 该样式表明列表项目当前处于不可用状态。

程序示例

如下代码示范了列表项的状态。

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
<!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="list-group">
            <!-- 列表项 -->
            <button type="button" class="list-group-item">
                普通按钮列表项 </button>
            <!-- 激活状态 -->
            <button type="button" class="list-group-item active">
                激活状态的列表项</button>
            <!-- 禁用状态 -->
            <button type="button" class="list-group-item disabled">
                禁用状态的列表项</button>
        </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>

在代码中定义了3个列表项,其中第二个列表项处于激活状态,第三个列表项处于不可用状态。

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

7.13.3 按钮列表组

Bootstrap 也支持使用按钮作为列表项(此时列表组的父元素同样必须使用<div>元素,而不是<ul>元素)。
需要说明的是,如果使用按钮作为列表项,则不要对按钮应用.btn样式,而是应该对按钮应用列表项的样式:.list-group-item。

程序示例

如下代码示范了按钮列表组的构建方法。

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
<!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">
        <!-- 列表组 -->
        <!-- 1号代码 -->
        <div class="list-group">
            <!-- 列表项 -->
            <!-- 2号代码 -->
            <button type="button" class="list-group-item">
                疯狂前端开发讲义 </button>
            <button type="button" class="list-group-item">
                疯狂Android讲义</button>
            <button type="button" class="list-group-item">
                疯狂iOS讲义</button>
            <button type="button" class="list-group-item">
                疯狂Swift讲义</button>
        </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>
  • 1号代码构建了一个以<div>元素为容器的列表组,
  • 2号代码以<button>元素构建了列表项,且该按钮没有被指定.btn样式,而是被指定了.list-group-item样式,这就构建了按钮列表组。

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

7.13.2 链接列表组

除了可使用<ul>和<li>元素构建列表组之外,Bootstrap还支持使用<a>元素来构建列表项,此时需要使用<div>元素作为列表组的容器。通过这种方式构建的列表组,其中的每个列表项都是一个链接。

程序示例

如下代码示范了链接列表组的构建方法。

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
<!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="list-group">
            <!-- 链接列表项 -->
            <a href="#" class="list-group-item">
                <!-- 徽章 -->
                <span class="badge">16</span>
                疯狂前端开发讲义
            </a>
            <a href="#" class="list-group-item">
                <span class="badge">20</span>
                疯狂Android讲义
            </a>
            <a href="#" class="list-group-item">
                <span class="badge">5</span>
                疯狂iOS讲义
            </a>
            <a href="#" class="list-group-item">
                <span class="badge">9</span>
                疯狂Swift讲义
            </a>
        </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>

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

7.13 列表组

列表组用于将多个相似或相近的元素并列显示，列表组不仅能用于显示一组简单的元素，还能用于显示复杂的内容。

7.13.1 列表组基础

Bootstrap为列表组提供了如下样式。

列表组的组成相关样式

样式 描述
.list-group 该样式应用于列表组的容器元素。
.list-group-item 该样式应用于列表组内的列表项。

列表项的风格相关样式

样式 描述
.list-group-item-success 该样式设置表示成功风格的列表组,绿色背景色。
.list-group-item-info 该样式设置表示普通信息的列表组,淡蓝色背景色。
.list-group-item-warning 该样式设置表示警告的列表组,黄色背景色。
.list-group-item-danger 该样式设置表示危险的列表组,红色背景色。

程序示例

下面代码示范了简单的列表组的用法。

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
<!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="row">
            <div class="col-sm-6">
                <!-- 列表组 -->
                <ul class="list-group">
                    <!-- 列表组项 -->
                    <li class="list-group-item">疯狂前端开发讲义</li>
                    <li class="list-group-item">疯狂Android讲义</li>
                    <li class="list-group-item">疯狂iOS讲义</li>
                    <li class="list-group-item">疯狂Swift讲义</li>
                </ul>
            </div>
            <div class="col-sm-6">
                <!-- 列表组 -->
                <ul class="list-group">
                    <!-- 列表组项,指定风格 -->
                    <li class="list-group-item list-group-item-success">疯狂前端开发讲义</li>
                    <li class="list-group-item list-group-item-info">疯狂Android讲义</li>
                    <li class="list-group-item list-group-item-warning">疯狂iOS讲义</li>
                    <li class="list-group-item list-group-item-danger">疯狂Swift讲义</li>
                </ul>
            </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>

在该代码中定义了两个列表组,其中
第一个列表组是最普通的列表组,并未为其指定任何风格。
第二个列表组中的列表项还被指定了.list-group-item-success等样式,因此第二个列表组中的列表项将具有对应的背景色。

在列表项中加入徽章组件

如果在列表项中加入徽章组件,它会自动被放在列表项的右边。例如如下代码。

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
<!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">
        <!-- 列表组 -->
        <ul class="list-group">
            <!-- 列表项 -->
            <li class="list-group-item list-group-item-success">
                <!-- 徽章 -->
                <span class="badge">16</span>
                疯狂前端开发讲义
            </li>
            <li class="list-group-item list-group-item-info">
                <span class="badge">20</span>
                疯狂Android讲义
            </li>
            <li class="list-group-item list-group-item-warning">
                <span class="badge">5</span>
                疯狂iOS讲义
            </li>
            <li class="list-group-item list-group-item-danger">
                <span class="badge">9</span>
                疯狂Swift讲义
            </li>
        </ul>
    </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>

在该代码中,为每个列表项都添加了一个徽章,徽章会被自动放在列表项的右边。

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

7.12.4 媒体对象列表

在制作文章列表或评论列表时,媒体对象会以列表的方式显示。Bootstrap 为媒体对象列表提供了.media-list样式。
如果需要实现媒体对象列表,

  • 只要将.media-list应用于<ul>元素,
  • 然后将.media应用于<li>元素,则<li>元素将作为整个媒体对象的容器,这样即可形成媒体对象列表。

示例程序

下面示例示范了媒体对象列表的用法。

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
<!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">
        <!-- 媒体对象列表 -->
        <ul class="media-list">
            <!-- 媒体对象整体容器 -->
            <li 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>
            </li>
            <!-- 第二个媒体对象 -->
            <li 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>
            </li>
            <!-- 第3个媒体对象 -->
            <li 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>
            </li>
        </ul>
    </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>

程序中定义了一个被指定了class="media-list"样式的<ul>元素,该元素将会作为媒体对象列表的容器。而列表中每个<li>元素内定义一个媒体对象。

发表于 更新于 分类于 ， ， 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>

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

7.12.2 媒体对象的对齐方式

除了.media-left、.media-right两个控制水平对齐方式的样式之外,Bootstrap还提供了如下两个样式。

样式 描述
.media-middle 该样式控制媒体对象垂直居中。该样式实际上就是vertical-align:middle;。
.media-bottom 该样式控制媒体对象底部对齐。该样式实际上就是vertical-align:bottom;。

提示:如果不设置.media-middle或.media-bottom样式,Bootstrap默认控制媒体对象在垂直方向的顶部对齐。

下面代码示范了如何让媒体对象在垂直方向对齐。

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
<!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-left media-middle">
                <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-left media-bottom">
                <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>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

上面的代码定义了3个媒体对象,其中

  • 第一个媒体对象没有被设置垂直方向对齐,因此该媒体对象默认顶部对齐;
  • 第二个媒体对象被设置了垂直居中对齐;
  • 第三个媒体对象被设置了底部对齐。

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

7.12 媒体对象

我们经常在网页上看到”左边或右边是图片或视频,右边是文字描述、用户点评”的这种效果,这种效果和前面的缩略图效果有点类似,但并不完全相同。Bootstrap将这种效果称为媒体对象。

7.12.1 媒体对象的基本组成

Bootstrap为媒体对象提供了如下样式。

媒体对象的组成

样式 描述
.media 该样式应用于**整个媒体对象的所在容器**。
.media-object 该样式应用于**媒体对象本身(图片或视频)**。
.media-body 该样式应用于媒体对象的**描述文字所在容器**。
.media-heading 该样式应用于媒体对象的**描述文字的标题**。该样式放在.media-body样式的容器里面

媒体对象的对齐方式

样式 描述
.media-left 该样式设置左对齐。
.media-right 该样式设置右对齐。

媒体对象的正确用法

媒体对象的正确用法是:

  1. 先定义一个<div>元素作为整个媒体对象的元素,为该元素指定.media样式。
  2. 添加媒体对象(图片或视频),并为媒体对象设置.media-object样式。
  3. 定义一个<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>元素。

  1. 被指定了class="media-left"或class="media-right"样式的<div>元素,该元素作为媒体对象的容器。
  2. 被指定了class="media-body"样式的元素,该元素将作为媒体对象的描述文字的容器。
  • 如果希望媒体对象位于文本描述的左边,则先定义媒体对象,再定义文本描述;
  • 如果要将媒体对象放在文本描述的右边,则先放置文本描述,再放置媒体对象。
  • 如果将媒体对象放在左边,则通常为媒体对象所在的<div>元素设置class="medie-left"样式;
  • 如果将媒体对象放在右边,则通常为媒体对象所在的<div>元素设置class="medie-right"样式。

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

7.11.4 多进度效果

将多个进度条放入同一个进度条轨道上,就可以形成同时显示多个进度的效果。
如下代码示范了如何显示多进度效果。

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
<!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="progress">
            <!-- 进度条1 -->
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30" aria-valuemin="0"
                aria-valuemax="100" style="width:30%;">
                <span class="sr-only">30%</span>
            </div>
            <!-- 进度条2 -->
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0"
                aria-valuemax="100" style="width:40%;">
                <span class="sr-only">40%</span>
            </div>
            <!-- 进度条3 -->
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="15" aria-valuemin="0"
                aria-valuemax="100" style="width:15%;">
                <span class="sr-only">15%</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="10"
                aria-valuemin="0" aria-valuemax="100" style="width:10%;">
                <span>10%</span>
            </div>
            <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="25"
                aria-valuemin="0" aria-valuemax="100" style="width:25%;">
                <span>25%</span>
            </div>
            <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="40"
                aria-valuemin="0" aria-valuemax="100" style="width:40%;">
                <span>40%</span>
            </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>

在上面代码中定义了2个进度条轨道(两个<div>元素指定了.progress样式),在每个进度条轨道容器内都定义了3个进度值组件(指定了.progress-bar样式的元素),这样即可在同一个进度条内显示多个进度值。