使用Bootstrap实现进度条效果

最新推荐文章于 2024-07-04 07:22:27 发布

前端独秀

最新推荐文章于 2024-07-04 07:22:27 发布

阅读量604

点赞数

分类专栏：前端文章标签： Bootstrap

原文链接：https://www.mk2048.com/blog/blog.php?id=jcajcchaa&title=%E4%BD%BF%E7%94%A8Bootstrap%E5%AE%9E%E7%8E%B0%E8%BF%9B%E5%BA%A6%E6%9D%A1%E6%95%88%E6%9E%9C

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

                        
  创建一个基本的进度条的步骤如下： 
 
   1.添加一个带有 class .progress 的 <div>。 
 
   2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。 
 
   3.添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。 
 
  让我们看看下面的实例： 
 
  <!DOCTYPE html>  
<html>  
<head>  
   <title>Bootstrap 实例 - 进度条</title>  
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
   <script src="/scripts/jquery.min.js"></script>  
   <script src="/bootstrap/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: 40%;">  
      <span class="sr-only">40% 完成</span>  
   </div>  
</div>  
  
</body>  
</html>  
 
   结果如下所示：

前端独秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Bootstrap实现进度条效果

创建一个基本的进度条的步骤如下： 1.添加一个带有 class .progress 的 <div>。 2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 ...
复制链接

扫一扫