Bootstrap 学习之 (十四) ------警告框与进度条

来源：互联网发布：软件开发业务逻辑编辑：程序博客网时间：2024/06/15 04:09

Bootstrap 警告（Alerts）

警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用警告（Alerts） jQuery 插件。

您可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。

<span style="font-size:18px;"><!DOCTYPE html><html><head>    <title>BootstrapTest</title>   <!-- 新 Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">×</button>成功！很好地完成了提交。</div><div class="alert alert-info alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">×</button>信息！请注意这个信息。</div><div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">×</button>警告！请不要提交。</div><div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">×</button>错误！请进行一些更改。</div></body></html></span>

警告（Alerts）中的链接

在警告（Alerts）中创建链接的步骤如下：

通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

<div class="alert alert-success">    <a href="#" class="alert-link">成功！很好地完成了提交。</a></div><div class="alert alert-info">    <a href="#" class="alert-link">信息！请注意这个信息。</a></div><div class="alert alert-warning">    <a href="#" class="alert-link">警告！请不要提交。</a></div><div class="alert alert-danger">    <a href="#" class="alert-link">错误！请进行一些更改。</a></div>

Bootstrap 进度条

您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。

Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。

基本实例

默认样式的进度条

<div class="progress">  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">    <span class="sr-only">60% Complete</span>  </div></div>

带有提示标签的进度条

从进度条组件中移除 .sr-only 类，从而让当前进度显示出来。考虑到当前进度比例很低的情况，建议为进度标签添加 min-width 属性，以保证进度标签完全显示出来。

60%

进度数值较低的情况

在当前进度数值较低的情况下，进度条组件显示的是带有一个数字的进度值，也包括 0% 的情况，为了清晰显示出来，建议为进度标签添加一个 min-width: 20px; 属性。

<div class="progress">  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">    0%  </div></div><div class="progress">  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">    2%  </div></div>

条纹效果

通过渐变可以为进度条创建条纹效果，IE8 不支持。

<!DOCTYPE html><html><head>    <title>BootstrapTest</title>   <!-- 新 Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="progress">  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">    <span class="sr-only">40% Complete (success)</span>  </div></div><div class="progress">  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">    <span class="sr-only">20% Complete</span>  </div></div><div class="progress">  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">    <span class="sr-only">60% Complete (warning)</span>  </div></div><div class="progress">  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">    <span class="sr-only">80% Complete (danger)</span>  </div></div></body></html>

结果如下：

动画效果

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

<div class="progress">  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">    <span class="sr-only">45% Complete</span>  </div></div>

堆叠效果

把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。

  <div class="progress-bar progress-bar-success" style="width: 35%">    <span class="sr-only">35% Complete (success)</span>  </div>  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">    <span class="sr-only">20% Complete (warning)</span>  </div>  <div class="progress-bar progress-bar-danger" style="width: 10%">    <span class="sr-only">10% Complete (danger)</span>  </div></div>

0 0