1、进度条基本用法

主要依赖.progress和.progress-bar

aria-valuenow表示当前值

aria-valuemin表示最小值

aria-valuemax表示最大值

width:60%表示当前进度条位置

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

2、带有提示标签的进度条

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

3、根据情境变化效果

<div class="progress">
  <div class="progress-bar progress-bar-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>

.progress-bar-danger
.progress-bar-info
.progress-bar-success
.progress-bar-warning

4、条纹效果

.progress-bar-striped可以和其他状态的类一起使用

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>

5、动画效果

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。

<div class="progress">
  <div class="progress-bar progress-bar-striped active" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60%</span>
  </div>
</div>

6、堆叠效果

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

<div class="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>

以上所述是小编给大家介绍的BootStrap组件之进度条的基本用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# bootstrap  # 组件  # 进度条  # Bootstrap每天必学之进度条  # BootStrap Progressbar 实现大文件上传的进度条的实例代码  # bootstrap实现动态进度条效果  # BootStrap 实现各种样式的进度条效果  # BootStrap初学者对弹出框和进度条的使用感觉  # Spring Boot+AngularJS+BootStrap实现进度条示例代码  # bootstrap多种样式进度条展示  # Bootstrap实现各种进度条样式详解  # Bootstrap进度条实现代码解析  # jquery 简单的进度条实现代码  # 分享8款优秀的 jQuery 加载动画和进度条插件  # bootstrap+jQuery实现的动态进度条功能示例  # 小编  # 多个  # 在此  # 给大家  # 使其  # 呈现出  # 所述  # 使它  # 给我留言  # 感谢大家  # 疑问请  # 有任何  # 最小值  # valuemax  # width  # valuemin  # class  # brush  # pre 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  使用Dockerfile构建java web环境  韩国服务器如何优化跨境访问实现高效连接？  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  Laravel如何与Inertia.js和Vue/React构建现代单页应用  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  桂林网站制作公司有哪些,桂林马拉松怎么报名？  如何用好域名打造高点击率的自主建站？  用yum安装MySQLdb模块的步骤方法  微信h5制作网站有哪些,免费微信H5页面制作工具？  浅谈redis在项目中的应用  微信公众帐号开发教程之图文消息全攻略  如何在Windows环境下新建FTP站点并设置权限？  如何获取上海专业网站定制建站电话？  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  Python面向对象测试方法_mock解析【教程】  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  如何快速生成专业多端适配建站电话？  如何用搬瓦工VPS快速搭建个人网站？  如何快速生成高效建站系统源代码？  网站建设保证美观性，需要考虑的几点问题！  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口  中国移动官方网站首页入口 中国移动官网网页登录  Laravel如何使用Blade模板引擎？（完整语法和示例）  Laravel如何集成Inertia.js与Vue/React？（安装配置）  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  jQuery validate插件功能与用法详解  C++用Dijkstra(迪杰斯特拉)算法求最短路径  如何快速查询域名建站关键信息？  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  PythonWeb开发入门教程_Flask快速构建Web应用  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  Laravel如何使用Blade组件和插槽？（Component代码示例）  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  如何快速搭建高效服务器建站系统？  如何在阿里云ECS服务器部署织梦CMS网站？  如何在宝塔面板中修改默认建站目录？  如何在景安服务器上快速搭建个人网站？  绝密ChatGPT指令：手把手教你生成HR无法拒绝的求职信  制作公司内部网站有哪些,内网如何建网站？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  php结合redis实现高并发下的抢购、秒杀功能的实例  原生JS实现图片轮播切换效果  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？