Bootrap的进度条

最新推荐文章于 2023-06-20 11:15:19 发布
最新推荐文章于 2023-06-20 11:15:19 发布
阅读量223 收藏
点赞数
分类专栏： 工作涉及

进度条类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.css" >
<script src="dist/js/bootstrap.js"></script>
<title>无标题文档</title>
</head>
 
<body style="margin:200px;">
<span>普通的进度条</span>
<div class="progress"> 
	<div class="progress-bar" role="progessbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    	<span class="sr-only">60% Complete</span>
    </div>
</div>
 
<span>彩条进度条，当然去掉 progress-striped 就会是每个单色的进度条（不支持IE8）</span>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" 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 progress-striped">
  <div class="progress-bar progress-bar-info" 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 progress-striped">
  <div class="progress-bar progress-bar-warning" 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 progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>
 
<span>炫动进度条 加active（不支持各个IE版本）</span>
<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>
</body>
</html>

 转载自：https://blog.csdn.net/ling811/article/details/16940883

 zhuang

热心码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap3的 progress 进度条
ling811的专栏
11-25 4435
1、被修改的两个标签词： 2.3版                                                                                       3.0版 .bar .progress-bar .bar-* .progress-bar-* 2、代码： 无标
bootstrap实现动态进度条效果
08-31
在Bootstrap中，进度条组件是一个强大的工具，它可以提供用户友好的反馈，显示任务的完成程度或加载状态。动态进度条则是这个组件的一个增强版本，它通过动画效果来模拟实时更新的过程，从而提升用户体验。 要实现...
Bootstrap3 带提示的进度条
歪脖先生的博客
05-22 1585
带提示的进度条 制作带提示的进度条也很简单，只需在内层表示进度条的子元素中，提供当前进度值即可。如： <divclass="progress"> <divclass="progress-bar"style="width:60%;">60%</div> </div> 效果如图 3‑76所示： 图3-76 带提示的进度条 在展示...
boost之进度条工具
weixin_30856965的博客
01-22 213
boost之进度条工具 #include <boost/progress.hpp> #include <vector> int main(int argc, char** argv) { std::vector<int> v(100, 0); boost::progress_display pd(v.size()); for (auto& ...
Bootrap zTree
03-24
Bootstrap zTree是一款基于jQuery的插件，专门用于创建交互式的树形结构，它与流行的前端框架Bootstrap紧密结合，提供了美观且响应式的树形组件。在Web应用中，这种组件常用于组织结构、导航菜单、文件目录等场景。...
Bootrap table表格示例
10-25
Bootstrap表格是前端开发中常用的一种布局工具，尤其在构建数据展示页面时，它提供了一种高效、美观且响应式的解决方案。Bootstrap是由Twitter开发并维护的一个开源前端框架，它简化了网页设计和开发流程，提供了...
Bootrap MAdmin
02-02
2. **丰富的UI组件**：Bootstrap MAdmin 包含了大量的预设计组件，如导航栏、下拉菜单、按钮组、表单元素、图表、进度条、模态框、警告提示等，这些组件大大简化了开发过程。 3. **多页面布局**：模板中包含多种...
bootrap 轮播图模板
05-24
Bootstrap是一款广泛使用的前端框架，由Twitter开发，旨在提供一套易于使用、响应式和移动设备优先的网页设计工具。轮播图是Bootstrap框架中一个重要的组件，用于展示多张图片或内容，通过滑动效果实现动态展示，常...
css背景图片处理
x1037490413的博客
09-09 222
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>&l
Bootstrap 各种进度条详解
king_zxy的博客
04-13 1万+
Bootstrap 各种进度条详解 一：默认的进度条 创建一个基本的进度条的步骤如下： 添加一个带有 class.progress的 。 接着，在上面的 内，添加一个带有 class .progress-bar 的空的 。 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60%
JavaScript-bootstrap-JQuery-圆形进度条-设置进度条值
插件开发
06-20 778
通过设置进度条进度值，可以在界面简单绘制一个进度条。
22、进度条
QilanAllen的博客
06-03 598
在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。 一、基本样式 Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。 使用方法： Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子
Bootstrap系列之进度条（Progress）
老__L的博客
06-18 4532
进度条（Progress）
Bootstrap 进度条
21号先锋者
02-07 510
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt;&lt;!--设置字符集utf-8编码--&gt; &lt;meta name="viewport" content="width=device-wi
最好懂的 Bootstrap 实战案例教程
热门推荐
LakeYC的博客
03-07 6万+
我们每期会根据不用的项目案例安排不同的技术栈免费课程！免费！免费！免费！来帮助大家提高，有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是
Bootstrap的进度条下
实践求真知
01-31 472
一 动态条纹彩色进度条 1 代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;进度条--动态条纹进度条&lt;/title&gt
3.8Bootstrap学习组件篇之进度条、媒体对象、列表组、面板
为者常成，行者常至
05-05 2837
1、进度条 2、媒体对象 3、列表组 4、面板
外贸网站 bootrap spring
最新发布
11-12
Bootrap spring 是一个外贸网站的开发工具和框架。Bootrap 是一个前端开发框架，它提供了丰富的样式和组件，能够帮助开发者快速构建漂亮且响应式的网站。而 spring 是一个后端开发框架，它基于 Java 编程语言，提供了丰富的功能和模块，可以帮助开发者构建稳定和高性能的应用程序。结合 bootrap 和 spring，可以有效地实现外贸网站的开发和运营。 使用 bootrap spring 可以带来许多好处。首先，bootrap 提供了大量的样式和组件，可以帮助网站开发者轻松实现各种页面元素的设计和排版，而且这些元素还能适应不同设备的屏幕尺寸，确保网站在手机、平板和电脑上都能够正常显示。其次，spring 提供了一系列的功能和模块，例如安全认证、数据访问、事务管理等，这些功能可以帮助外贸网站实现用户管理、产品管理、订单管理等重要功能，同时保证系统的稳定性和安全性。最重要的是，bootrap 和 spring 都是开源的项目，拥有庞大的开发者社区，可以通过社区的支持和贡献不断改进和升级。 总的来说，bootrap spring 是一个强大的外贸网站开发工具和框架，具有丰富的功能和灵活的扩展性，可以满足外贸网站的设计、开发和运营需求。通过合理的使用和深入学习，开发者可以充分发挥其优势，快速构建出一个功能完备、美观大气的外贸网站，提升网站的用户体验和竞争力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值