Bootstrap 进度条

2017-08-19 09:02:17 来源: 点击:站内收藏

本章将讲解 Bootstrap 进度条。在本教程中,您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。

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

默认的进度条

创建一个基本的进度条的步骤如下:

  • 添加一个带有 class .progress 的 div。
  • 接着,在上面的 div 内,添加一个带有 class .progress-bar 的空的 div。
  • 添加一个带有百分比表示的宽度的 style 属性,例如 style="30%"; 表示进度条在 30% 的位置。

让我们看看下面的实例:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 进度条</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 默认进度条 --> 
<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" 
      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-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 90%;">
      <span class="sr-only">90% 完成(成功)</span>
   </div>
</div>
<div class="progress progress-striped">
   <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="60" 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-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 20%;">
      <span class="sr-only">20% 完成(警告)</span>
   </div>
</div>
<div class="progress progress-striped active">
   <div class="progress-bar progress-bar-danger" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 	
      style="width: 90%;">
      <span class="sr-only">90% 完成(危险)</span>
   </div>
</div>
 
</body>
</html>

样式使用

不同的颜色:在.progress-bar样式后添加 progress-bar-* 。其中 * 可以是 success、info、warning、danger。

条纹进度条:在.progress 样式后添加 .progress-striped 可实现条纹进度条。

动画进度条:在.progress 样式后添加 .progress-striped 同时添加 .active 样式实现动画进度条。

相关热词搜索:
评论正在载入