本网站只能被运行在支持JavaScript脚本的环境中

第7章 模式对话框、进度条、面包屑列表、Label及徽标等组件

本节概述

本节介绍如何使用Bootstrap中提供的模式对话框、进度条、面包屑列表、Label及徽标等设计组件。

模式对话框

在Web系统中,有时需要向用户显示各种对话框。接下来我们介绍如何使用Bootstrap中提供的模式对话框。

基本模式对话框

在Bootstrap中提供如下图所示的模式对话框。

<!-- 1.用于显示对话框的按钮 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#modal-example">
    显示模式对话框
</button>

<!-- 2.定义模式对话框 -->
<div class="modal" id="modal-example" tabindex="-1">
    <div class="modal-dialog">

        <!-- 3.模式对话框中的内容 -->
        <div class="modal-content">
            <!-- 4.模式对话框的头部 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="modal-label">模式对话框</h4>
            </div>
            <!-- 5.模式对话框的主体 -->
            <div class="modal-body">
                此处书写内容
            </div>
            <!-- 6.模式对话框的脚注 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

接下来对这段代码进行剖析。

1.用于显示对话框的按钮

为了显示模式对话框,首先需要放置用于显示对话框的按钮。需要将button元素的data-toggle属性值设置为“modal”,然后将data-target属性值定义为“#”+对话框的元素ID。

2.定义对话框

为了使用对话框,需要将div元素的class属性值设置为modal。为了在用户按下ESC键即可关闭模式对话框,应该将该div元素的tabindex属性值设为-1。

3.模式对话框中的内容

需要将模式对话框中的内容放置在class属性值为modal-content的div元素中,然后将该div元素放置在class属性值为modal-dialog的div元素中。

4.模式对话框的头部

为了使用头部,需要将模式对话框中用于制作头部的div元素的class属性值设定为“modal-header”。为了制作关闭按钮,需要将button元素的data-dismiss属性值设置为modal。

5.模式对话框的主体内容

需要将模式对话框的主体内容放置在class属性值为“modal-body”的div元素中。

6.模式对话框的脚注

为了制作用于放置按钮的对话框脚注,可以将用于制作对话框脚注的div元素的class属性值设置为“modal-footer”。

模式对话框的尺寸

可以根据模式对话框的信息量来修改模式对话框的尺寸。可以通过将用于制作对话框的div元素的class属性值设置为“modal-lg”的方法制作大尺寸对话框,可以通过将用于制作对话框的div元素的class属性值设置为“modal-sm”的方法制作小尺寸对话框。

进度条

在Web系统中,为了从数据库中检索数据,从网络上的其他服务器中获取信息,有时需要等待一些时间。此处显示Bootstrap中用于显示处理进度的进度条的制作方法。

基本进度条

为了使用进度条,需要将div元素的class属性值指定为“progress”。使用如下表所示的属性来定义进度条的各种值。可以使用CSS代码定义进度条的宽度。

属性
当前值 aria-valuenow
最小值 aria-valuemin
最大值 aria-valuemax
<div class="progress">
    <div class="progress-bar" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        70%
    </div>
</div>

为了设置进度条的背景色,可以使用如下表所示的class。

用途 class属性值 颜色
成功 progress-bar-success 绿色
信息 progress-bar-info 浅蓝色
警告、提醒注意 progress-bar-warning 桔色
错误或危险 progress-bar-danger 红色
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        70%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        70%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        70%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        70%
    </div>
</div>

可以为进度条制作斜纹图像。为了制作斜纹图像,需要为div元素追加指定“progress-bar-striped”class,如果追加使用“active”class,可以让斜纹具有动画效果。

<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        70%
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        70%
    </div>
</div>

可以累积值的进度条

有时用户通过一个操作可以执行多个处理,这时可以使用具有累计值的进度条。

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%">
    </div>
    <div class="progress-bar progress-bar-warning" style="width: 20%">
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
    </div>
</div>

面包屑列表组件

在Web系统中有时会显示阶层信息,为了更容易看清各阶层显示什么信息,Bootstrap中提供面包屑列表组件以提高用户体验。

为了使用面包屑列表组件,可以将ol或ul元素的class属性值设置为“breadcrumb”。为了显示阶层中的当前位置,可以为li元素使用“active”class。

<ol class="breadcrumb">
    <li><a href="#">主页</a></li>
    <li><a href="#">2013年</a></li>
    <li class="active">十一月</li>
</ol>

Label与徽标组件

在Web应用程序中,需要为用户醒目显示新到信息或邮件的未阅读数等信息。为了使这些信息更加醒目,在Bootstrap中提供Label与徽标组件。另外,在导航菜单中也可以使用这些组件。

Label

Label组件用于使新到信息或重要信息变得更加醒目。为了使用该组件,可以将span元素的class属性值设置为“label”。可以通过使用如下表所示的class来设置徽标的样式。

用途 class属性值 颜色
默认 label-default 灰色
重要 label-primary 蓝色
成功 label-success 绿色
信息 label-info 浅蓝色
警告、提醒注意 label-warning 桔色
错误或危险 label-danger 红色
<span class="label label-default">默认</span>
<span class="label label-primary">重要</span>
<span class="label label-success">成功</span>
<span class="label label-info">信息</span>
<span class="label label-warning">警告</span>
<span class="label label-danger">危险</span>
<p>新产品被发布<span class="label label-default">New</span></p>

徽标

徽标组件可用于显示未读邮件数等信息。为了使用徽标组件,需要将span元素的class属性值设置为“badge”。可以在超链接或按钮中使用徽标组件,需要将徽标中显示的数值放置在span元素中。

<p>新闻 <span class="badge">5</span></p>
<!-- 指定按钮 -->
<button class="btn btn-info" type="button">新到邮件<span class="badge">10</span></button>

超大屏幕

超大屏幕为用于制作网站主要视觉效果用设计组件。该组件可以增加标题的大小,并且为页面内容添加更多的外边距(margin)。

使用方法为将div元素的class属性值指定为jumbotron。

<div class="container">
    <div class="jumbotron">
        <h1>欢迎登陆页面!</h1>
        <p>这是一个超大屏幕(Jumbotron)的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
         学习更多</a>
        </p>
     </div>
</div>

页面头部

用于封装h1元素的设计组件。通过自定义该组件,我们可以灵活修改页面标题的外观。使用方法为将div元素的class属性指定为page-header。

<div class="page-header">
    <h1>海鲜的各种烹饪手法<small>以江浙地区为主</small></h1>
</div>

自定义页面头部的一个示例用CSS样式代码如下所示:

.page-header {
    boader:none;
    padding: 10px;
    margin: 34px 0 17px;
    color: #FFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#e0507b), to(#dd3f6e));
    background: -moz-linear-gradient(top, #e0507b, #dd3f6e);
    border-radius: 5px;
}
.page-header h1{
    margin:0;
}
.page-header small{
    color:yellow;
}