蓝蓝站点

Java读书笔记

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

7.8.2 页头

页头使用.page-header样式,页头样式一般用于为标题元素(<h1>到<h6>元素)增加适当的空间,并且与页面的其他部分形成一定的分隔。

下面代码示范了页头的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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="page-header">
            <h3>疯狂软件教育中心</h3>
        </div>
        <p>疯狂软件教育中心是一家专业提供开发培训（包括Java、Android、前端、iOS等课程）的培训机构。</p>
    </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>元素,并为该元素指定了.page-header样式,这表明该元素将会作为页头使用。

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

7.8 巨幕 页头和Well

巨幕、页头都是一种特殊的容器,这种容器通常表现为一个矩形框,用于突出显示某些内容。Well则用于提供一种默认的优雅格式。

7.8.1 巨幕

巨幕使用.jumbotron 样式,该样式通常应用于<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
<!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="jumbotron">
            <h1>疯狂软件教育中心</h1>
            <p>疯狂软件教育中心是一家专业提供开发培训（包括Java、Android、前端、iOS等课程）的培训机构。</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
        </div>
        <!-- 对照 -->
        <div>
            <h1>疯狂软件教育中心</h1>
            <p>疯狂软件教育中心是一家专业提供开发培训（包括Java、Android、前端、iOS等课程）的培训机构。</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
        </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>元素,并为该元素指定了.jumbotron 样式,这样该<div>元素就会以巨幕的形式显示出来。
经过对照,放入巨幕中的元素的会比原来的大,并且巨幕带有灰色的背景.
上述巨幕并没有占满整个浏览器,而且巨幕的四个角是圆角形式,这是因为我们将.jumbotron元素放在.container容器中的缘故。

如何让巨幕占满整个浏览器

如果希望巨幕占满整个浏览器,则可以考虑在.jumbotron元素内放置.container容器。

示例程序

例如如下代码。

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
<!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="jumbotron">
        <div class="container">
            <h1>疯狂软件教育中心</h1>
            <p>疯狂软件教育中心是一家专业提供开发培训（包括Java、Android、前端、iOS等课程）的培训机构。</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
        </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>

该代码使用.jumbotron元素来包裹.container元素,这样就可以形成占满屏幕宽度的巨幕。

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

7.11.3 进度条的动画效果

对于条纹风格的进度条,只要为它们增加.active样式,就可使该进度条的条纹呈现出由右向左运动的动画效果。
IE9及更低版本的浏览器不支持进度条的动画效果。

示例代码

下面代码示范了如何为进度条增加动画效果。

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
<!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">
            <!-- 进度条,成功风格,带条纹,启动条纹动画效果 -->
            <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
                aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%;">
                <span class="sr-only">30%</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar"
                aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;">
                <span class="sr-only">50%</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-warning progress-bar-striped  active" role="progressbar"
                aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%;">
                <span class="sr-only">80%</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar"
                aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%;">
                <span class="sr-only">10%</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>

在代码中定义了4个带条纹的进度条,并为这些进度条添加了.active样式,因此这些进度条上的条纹都会显示出动画效果。

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

7.11.2 带进度值的进度条

前面介绍的进度条使用<span class="sr-only">10%</span>来设置进度值,但由于为该<span>元素设置了.sr-only 样式,这就表明该<span>元素仅对屏幕阅读器有效。如果需要直接在进度条上显示进度值,则删除<span>元素上class属性的.sr-only属性值即可,也就是直接使用<span>元素即可,不要在<span>元素上添加.sr-only作为class属性的属性值。
另外需要处理的一种情形是,当进度值很小,进度条的宽度太小而不足以显示出进度值时,这样效果就会很丑陋,此时可考虑为进度条增加min-width属性,保证进度条的宽度足以显示进度值。

示例程序

例如如下代码。

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
<!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">
            <!-- 进度条  -->
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30" aria-valuemin="0"
                aria-valuemax="100" style="width:30%;">
                <span>30%</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                aria-valuemax="100" style="width:50%;">
                <span>50%</span>
            </div>
        </div>
        <!-- 下面两个进度条设置了min-width属性，以保证足够显示进度值 -->
        <div class="progress">
            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0"
                aria-valuemin="0" aria-valuemax="100" style="width:0%;min-width:2em">
                <span>0%</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="2"
                aria-valuemin="0" aria-valuemax="100" style="width:1%;min-width:2em">
                <span>1%</span>
            </div>
        </div>
        <!-- 对照 0%的进度不足以包裹0%这个提示文字-->
        <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="2"
                aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                <span>0%</span>
            </div>
        </div>
        <!-- 对照1%的进度不足以包裹1%这个提示文字 -->
        <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="2"
                aria-valuemin="0" aria-valuemax="100" style="width:1%;">
                <span>1%</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>

上面的进度条都使用了<span>元素来显示进度值,由于这些<span>元素并未应用.sr-only样式,因此它们会直接在浏览器上显示出来。
上面第5,第6个进度条的进度值较小,进度条的宽度不足以包裹整个进度值,因此为这些进度条设置了min-width属性来保证进度条的宽度足够保存进度值。

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

7.11 进度条

进度条也是Web开发中常用的界面组件,Bootstrap也为这种组件提供了支持。

7.11.1 各种样式的进度条

Bootstrap为进度条提供了如下样式。

普通进度条

样式 描述
.progress 该样式应用于进度条的轨道,也就是淡灰色背景的圆角矩形条。
.progress-bar 该样式应用于进度条,所有进度条都需要添加该样式。

进度条的风格

样式 描述
.progress-bar-success 设置表示成功风格的进度条,绿色背景。
.progress-bar-info 设置表示一般信息风格的进度条,淡蓝色背景。
.progress-bar-warning 设置表示警告风格的进度条,黄色背景。
.progress-bar-danger 设置表示危险风格的进度条,红色背景。
.progress-bar-striped 设置条纹风格的进度条。

条纹风格的进度条

样式 描述
.progress-bar-striped 设置条纹风格的进度条。

程序示例

例如如下代码。

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
<!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">
        <h3>普通进度条</h3>
        <!-- progress表示进度条的轨道 -->
        <div class="progress">
            <!-- progress-bar表示进度条,style="width:60%;"表示进度条进行到60%-->
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                style="width:60%;">
                <span class="sr-only">60%</span>
            </div>
        </div>
        <h3>设置风格的进度条</h3>
        <div class="progress">
            <!-- 成功风格的进度条 -->
            <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>
        </div>
        <div class="progress">
            <!-- 一般信息风格的进度条 -->
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                aria-valuemax="100" style="width:50%;">
                <span class="sr-only">50%</span>
            </div>
        </div>
        <div class="progress">
            <!-- 警告风格的进度条 -->
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0"
                aria-valuemax="100" style="width:80%;">
                <span class="sr-only">80%</span>
            </div>
        </div>
        <div class="progress">
            <!-- 危险风格的进度条 -->
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0"
                aria-valuemax="100" style="width:10%;">
                <span class="sr-only">10%</span>
            </div>
        </div>
        <h3>条纹风格的进度条</h3>
        <div class="progress">
            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="30"
                aria-valuemin="0" aria-valuemax="100" style="width:30%;">
                <span class="sr-only">30%</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50"
                aria-valuemin="0" aria-valuemax="100" style="width:50%;">
                <span class="sr-only">50%</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="80"
                aria-valuemin="0" aria-valuemax="100" style="width:80%;">
                <span class="sr-only">80%</span>
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="10"
                aria-valuemin="0" aria-valuemax="100" style="width:10%;">
                <span class="sr-only">10%</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>

对于普通进度条,只要将.progress 样式应用于进度条轨道,将.progress-bar样式应用于进度条即可,代码通过style="width:60%;"设置进度条的完成百分比为60%,该进度条宽度占父容器的60%代表完成了60%。

提示:代码中的aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"这些**aria开头的属性用于为使用辅助设备**(如屏幕阅读器)的用户提供信息,这些属性告诉辅助设备该进度条的最小值为0,最大值为100,当前完成百分比为60。

如果需要设置进度条的风格,可在普通进度条上继续添加.progress-bar-success、.progress-bar-info、.progress-bar-waring或.progress-bar-danger等样式。
如果需要设置条纹风格的进度条,则只要在原有的进度条样式上继续添加.progress-bar-striped样式即可。

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

7.10.2 警告框中的链接

如果需要在警告框中添加链接,则需要为链接应用.alert-link 样式,这样可将链接设置为与当前警告框背景匹配的颜色。如果警告框中的链接没有设置.alert-link 样式,则显示默认的链接样式,默认的链接样式为蓝色字体.

例如如下代码。

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
<!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="alert alert-success" role="alert">
            恭喜您，登录成功。<br>
            继续访问
            <!-- 警告框中的链接 -->
            <a href="http://www.fkjava.org" class="alert-link">疯狂软件</a>
            <br><a href="http://www.fkjava.org">没有设置alert-link的链接</a>
        </div>
        <div class="alert alert-info" role="alert">
            页面加载完成<br>
            继续访问
            <!-- 警告框中的链接 -->
            <a href="http://www.fkjava.org" class="alert-link">疯狂软件</a>
            <br><a href="http://www.fkjava.org">没有设置alert-link的链接</a>
        </div>
        <div class="alert alert-warning" role="alert">
            请注意，系统库存紧张，请尽快下单<br>
            <!-- 警告框中的链接 -->
            <a href="http://www.fkjava.org" class="alert-link">立即购买</a>
            <br><a href="http://www.fkjava.org">没有设置alert-link的链接</a>
        </div>
        <div class="alert alert-danger" role="alert">
            系统出错，请联系管理员<br>
            联系
            <!-- 警告框中的链接 -->
            <a href="http://www.fkjava.org" class="alert-link">管理员</a>
            <br><a href="http://www.fkjava.org">没有设置alert-link的链接</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.3k 阅读时长 ≈ 3 分钟

7.10 警告框

警告框也相当于一个简单的容器,用于向用户动作提供一些反馈消息。

7.10.1 警告框基础

Bootstrap为警告框提供了如下基础样式。

样式 描述
.alert 所有警告框都需要设置的样式。
.alert-success 表示成功的警告框,背景色是绿色。
.alert-info 表示普通信息的警告框,背景色是浅蓝色。
.alert-warning 表示警告的警告框,背景色是黄色。
.alert-danger 表示危险的警告框,背景色是红色。
.alert-dismissible 该样式可应用于所有警告框,用于表示可关闭的警告框。
只要将这些样式应用于<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
<!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="alert alert-success" role="alert">
            恭喜您，登录成功
        </div>
        <!-- 信息警告框 -->
        <div class="alert alert-info" role="alert">
            页面加载完成
        </div>
        <!-- 警告警告框 -->
        <div class="alert alert-warning" role="alert">
            请注意，系统库存紧张，请尽快下单
        </div>
        <!-- 危险警告框 -->
        <div class="alert alert-danger" role="alert">
            系统出错，请联系管理员
        </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>

这里的代码使用.alert样式与其他表示警告框风格的样式组合出了4种警告框。

如何构建可关闭的警告框

如果要构建可关闭的警告框,则需要应用.alert-dismissible 样式。此外,由于可关闭的警告框需要依赖JS处理用户动作,因此可关闭的警告框需要依赖jQuery警告框插件。
构建可关闭的警告框需要为该警告框添加一个关闭按钮,并为该关闭按钮完成如下两个设置。

  1. 为关闭按钮指定class="close"样式,则该关闭按钮会自动显示在警告框的右上角。
  2. 为关闭按钮设置data-dismiss="alert",则用户单击该按钮时警告框会自动关闭。

下面的代码示范了可关闭的警告框的设置。

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">
        <!-- alert-dismissible样式表示该警告框可关闭 -->
        <!-- 1号代码 -->
        <div class="alert alert-warning alert-dismissible" role="alert">
            <!-- 添加关闭按钮 close样式使得按钮显示在右上角-->
            <!-- data-dismiss="alert"使得单击该按钮时关闭警告框-->
            <!-- 2号代码 -->
            <button type="button" class="close" data-dismiss="alert" aria-label="关闭">
                <!-- 关闭图标 -->
                <span aria-hidden="true">&times;</span>
            </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号代码为警告框增加了.alert-dismissible 样式,该样式表明该警告框是一个可关闭的警告框。
  • 2号代码为按钮设置了class="close" data-dismiss="alert"属性,这表明该按钮将具有关闭按钮的外观和关闭警告框的功能。

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

7.9 缩略图

各种电商网站经常需要使用产品列表,这种产品列表通常会在一行显示多个商品,每个商品都有对应的产品图片和产品描述,这个产品图片就是一个缩略图。当用户单击该产品缩略图链接时,系统就会打开该产品的详情页面。
Bootstrap为缩略图提供了如下两个样式。

样式 描述
.thumbnail 该样式用于指定缩略图样式。
.caption 该样式应用于文字描述的容器。
为了让缩略图能以多行、多列的形式展示,通常建议将缩略图和网格系统结合起来使用:由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
<!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 col-md-3">
                <!-- 缩略图 -->
                <a href="#" class="thumbnail">
                    <img src="../android.png">
                </a>
            </div>
            <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="../java.png">
                </a>
            </div>
            <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="../javaee.png">
                </a>
            </div>
            <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="../swift.png">
                </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>

该代码定义了一行,并在该行内定义了4个单元格,在每个单元格内放置一个缩略图链接,为每个链接都指定了class="thumbnail",这就是缩略图样式。

带说明文字的缩略图

如果需要在图片下添加说明性文字,则可使用被指定class="caption"样式的<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
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="row">
            <!-- 结合网格系统实现缩略图 -->
            <div class="col-sm-6 col-md-3">
                <!-- 缩略图 -->
                <a href="https://blueblue233.github.io/">
                    <img src="../android.png" class="thumbnail">
                </a>
                <!-- 文字描述 -->
                <div class="caption">
                    <h3>疯狂Android讲义</h3>
                    <p>最全面、最详细的Android学习图书，全面覆盖Android开发手册</p>
                    <p><button class="btn btn-sm btn-primary">购买</button></p>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="../java.png">
                </a>
                <div class="caption">
                    <h3>疯狂Java讲义</h3>
                    <p>必读的Java学习经典，你懂的，不多说。</p>
                    <p><button class="btn btn-sm btn-primary">购买</button></p>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="../javaee.png">
                </a>
                <div class="caption">
                    <h3>轻量级Java EE企业应用实战</h3>
                    <p>企业级应用开发的经典图书，畅销经典</p>
                    <p><button class="btn btn-sm btn-primary">购买</button></p>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="../swift.png">
                </a>
                <div class="caption">
                    <h3>疯狂Swift讲义</h3>
                    <p>Apple公司Swift语言的学习图书</p>
                    <p><button class="btn btn-sm btn-primary">购买</button></p>
                </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>

这里的代码在每个缩略图下放置了一个.caption容器,该容器用于装说明性文字,这样即可形成真正的购买页面。

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

7.8.3 well

将.well样式用在元素上,可实现简单的inset(嵌入)效果。Bootstrap提供了如下3种.well样式。

样式 描述
.well 普通的well样式。
.well-lg 大的well样式。
.well-sm 小的well样式。

下面的代码示范了.well样式的用法。

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
<!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> well样式 </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="well well-lg">
            嵌入效果(.well-lg)
        </div>
        <div class="well">
            嵌入效果(.well)
        </div>
        <div class="well well-sm">
            嵌入效果(.well-sm)
        </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.1k 阅读时长 ≈ 3 分钟

7.7.3 面板嵌套列表组

列表组直接放在面板下

如果将列表组直接添加到面板里,而不是添加在.panel-body元素内,列表组将会和面板完美地融为一体。
提示:列表组需要用到.list-group和.list-group-item两个样式,关于列表组的介绍请参考本章7.13节。

程序示例

例如如下代码。

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
<!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="panel panel-primary">
            <div class="panel-heading">
                <h1 class="panel-title">疯狂软件教育中心</h1>
            </div>
            <div class="panel-body">
                疯狂软件教育中心是一家专业提供开发培训（包括Java、Android、前端、iOS等课程）的培训机构。
            </div>
            <!-- 列表组直接放在面板中 -->
            <ul class="list-group">
                <li class="list-group-item">疯狂前端开发讲义</li>
                <li class="list-group-item">疯狂HTML 5/CSS 3/JavaScript讲义</li>
                <li class="list-group-item">疯狂Android讲义</li>
            </ul>
            <div class="panel-footer">
                <address>天河区沣宏大厦3楼</address>
            </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>

列表组放在面板主体中

如果将列表组放在面板的.panel-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
<!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="panel panel-primary">
            <div class="panel-heading">
                <h1 class="panel-title">疯狂软件教育中心</h1>
            </div>
            <div class="panel-body">
                <!-- 列表组放在面板主体中 -->
                <ul class="list-group">
                    <li class="list-group-item">疯狂前端开发讲义</li>
                    <li class="list-group-item">疯狂HTML 5/CSS 3/JavaScript讲义</li>
                    <li class="list-group-item">疯狂Android讲义</li>
                </ul>
            </div>
            <div class="panel-footer">
                <address>天河区沣宏大厦3楼</address>
            </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>

以上代码将列表组放在.panel-body元素内,那么该列表组将不会和面板融为一体,列表组将依然表现出列表组的外观。