bootstrap3的 progress 进度条

最新推荐文章于 2024-07-18 13:52:01 发布
最新推荐文章于 2024-07-18 13:52:01 发布
阅读量101 收藏
点赞数
文章标签： xhtml

：

2.3版               3.0版

 

.bar.progress-bar
.bar-*.progress-bar-*
2、代码：

 

 

[html]  view plain  copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <link rel="stylesheet" href="dist/css/bootstrap.css" >  
  6. <script src="dist/js/bootstrap.js"></script>  
  7. <title>无标题文档</title>  
  8. </head>  
  9.   
  10. <body style="margin:200px;">  
  11. <span>普通的进度条</span>  
  12. <div class="progress">   
  13.     <div class="progress-bar" role="progessbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">  
  14.         <span class="sr-only">60% Complete</span>  
  15.     </div>  
  16. </div>  
  17.   
  18. <span>彩条进度条，当然去掉 progress-striped 就会是每个单色的进度条（不支持IE8）</span>  
  19. <div class="progress progress-striped">  
  20.   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">  
  21.     <span class="sr-only">40% Complete (success)</span>  
  22.   </div>  
  23. </div>  
  24. <div class="progress progress-striped">  
  25.   <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">  
  26.     <span class="sr-only">20% Complete</span>  
  27.   </div>  
  28. </div>  
  29. <div class="progress progress-striped">  
  30.   <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">  
  31.     <span class="sr-only">60% Complete (warning)</span>  
  32.   </div>  
  33. </div>  
  34. <div class="progress progress-striped">  
  35.   <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">  
  36.     <span class="sr-only">80% Complete (danger)</span>  
  37.   </div>  
  38. </div>  
  39.   
  40. <span>炫动进度条 加active（不支持各个IE版本）</span>  
  41. <div class="progress progress-striped active">  
  42.   <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">  
  43.     <span class="sr-only">45% Complete</span>  
  44.   </div>  
  45. </div>  
  46. </body>  
  47. </html>  

3、相对应的效果图：

 

 
 
weixin_34228617
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 组件：进度条组件（progress）
WangMin@汪末末
09-07 1550
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。 注意： 进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。 默认样式进度条 实现原理：需要两个容器，外容器使用类名.progress
Bootstrap系列之进度条（Progress）
老__L的博客
06-18 4399
进度条（Progress）
BootStrap3 进度条系列
爱喝水的qdy的博客
11-21 281
目录官方地址基本用法带文字说明的进度条设置最小宽度情境色条纹状的进度条带动画的进度条堆叠效果整体代码 官方地址 https://v3.bootcss.com/components/#progress 基本用法 .progress .progress-bar <!-- 基本用法 --> <div class="container"> <div class="...
零基础Bootstrap入门教程(18)--进度条
程序员大阳
02-25 1354
本文目录1. 概述2. 普通进度条3. 隐藏文本4. 调整颜色5. 条纹效果6. 动画效果7. 小结 1. 概述 进度条的使用频率并不高，但是如果遇到合适的场景，使用之后对显示效果的提升还是比较明显的。 Bootstrap为进度条提供了比较优雅的实现，本篇就来介绍下常见用法。 2. 普通进度条 先看一段代码： <div class="progress"> <div class="progress-bar" aria-valuenow="60
Bootstrap 5 保姆级教程（六）：进度条 & 加载效果
Flag少侠的博客
04-17 1014
进度条可以显示用户任务的完成过程。
bootstrap progress 动态进度条
托妞专栏
06-27 7989
html代码：&lt;!--外层容器--&gt; &lt;div id="wrapper" style="padding-left: 20%;padding-right:20%"&gt; &lt;div class="progress progress-striped active" &gt; &lt;div id="prog" class=&quo
Bootstrap百分比进度条动画特效
06-24
Bootstrap百分比进度条动画特效是基于流行的前端框架Bootstrap和CSS3技术实现的一种视觉效果丰富的进度条组件。在网页设计中，进度条常用于显示任务、数据加载或过程完成的进度，而Bootstrap百分比进度条动画则增加...
Bootstrap多彩渐变进度条特效
04-07
在这个例子中，`progress`是Bootstrap的进度条容器，而`progress-bar`是实际的进度条元素。通过修改`style`属性中的`background-image`和`width`，我们可以控制进度条的外观和完成度。 为了使进度条更具有动态效果...
bootstrap实现动态进度条效果
12-30
Bootstrap的动态进度条： html: 创建一个modal 这里使用fade先将modal隐藏起来，然后modal里面嵌入progress 代码很简单 <!--窗口声明：--> <!-- 内容声明 -->
BootStrap 实现各种样式的进度条效果
11-29
在Bootstrap中，进度条（Progress Bar）是一种显示任务进度或指示完成度的有效方式，尤其适用于加载、上传、下载等场景。下面将详细解释如何使用Bootstrap实现各种样式的进度条效果。 1. **基本结构**： Bootstrap...
Bootstrap 3 进度条的实现
08-31
在Bootstrap 3中，进度条是一个非常实用的组件，它用于可视化表示某个任务或过程的完成程度。在本文中，我们将深入探讨如何实现Bootstrap 3的进度条，并介绍其基本样式、自带文字显示、多种颜色以及条纹效果。 首先...
22、进度条
QilanAllen的博客
06-03 580
在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。 一、基本样式 Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。 使用方法： Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子
Bootstrap的进度条效果
昊虹AI笔记
10-17 836
Bootstrap的进度条效果
BootStrap之进度条progress
My52Hz
11-04 1013
基础进度条用法： &lt;div class="progress"&gt; &lt;div class="progress-bar" style="width: 20%"&gt; 20% &lt;/div&gt; &lt;/div&gt; &lt;div class="progress"&gt; &lt;div class
Bootstrap—进度条progress-bar
热门推荐
生如夏花 炫至茶靡
12-16 1万+
Bootstrap为我们提供具有漂亮样式的进度条来表示一个事务的进度，如下： 实现方法如下： （1）引入bootrap文件， （2）添加一个； （3）在中添加一个 其中， aria-valuenow="40"——进度条目前进度值。 aria-valuemax="100"——最大进度值。 aria-valuemin=“0”——最小进度值。 style="w
Bootstrap 各种进度条详解
king_zxy的博客
04-13 1万+
Bootstrap 各种进度条详解 一：默认的进度条 创建一个基本的进度条的步骤如下： 添加一个带有 class.progress的 。 接着，在上面的 内，添加一个带有 class .progress-bar 的空的 。 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60%
Bootstrap3 带提示的进度条
歪脖先生的博客
05-22 1579
带提示的进度条 制作带提示的进度条也很简单，只需在内层表示进度条的子元素中，提供当前进度值即可。如： <divclass="progress"> <divclass="progress-bar"style="width:60%;">60%</div> </div> 效果如图 3‑76所示： 图3-76 带提示的进度条 在展示...
web前端基础面试85题（一）
最新发布
柯晓楠
07-18 422
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
bootstrap 锁屏进度条
08-12
要在 Bootstrap 中实现锁屏进度条，你可以使用 Bootstrap 的 Modal 组件和 Progress 组件来实现。 首先，在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值