首页 > 代码库 > bootstrap(6)关于进度条,列表,面板
bootstrap(6)关于进度条,列表,面板
一:进度条
首先我们可以看到进度条如下:
这种效果是如何实现的呢?
进度条代码如下:
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div>
进度条格式:
progress>progress-bar>sr-only
我们可以看到,
最外面是progross,显示的是全部的宽度,而progress-bar这是显示的进度条的宽度,因为这里面嵌套了一个 sytle="width:60%",也就说完成的进度占总进度的60%
当我们去掉后面的span元素的时候,进度条会显示出进度的百分比来
效果如下:
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0 " style="width:60%;">60%</div>
可以在 class为 progress-bar上添加 min-width:2em来实现较小宽度下的显示百分比
(1)在 progress-bar后面添加不同的信息来实现不同提示信息的进度条,
<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%</span> </div>
效果如下:
(2)在progress-bar 后面添加 progress-bar-striped来实现条纹效果
(3)在 progress-bar progress-bar-striped 后面添加 .active类来实现动画效果
添加了动画效果之后,条纹好似向右滚动
(4)将多个 progress-bar 放到同一个 progress内可以实现堆叠效果
bootstrap(6)关于进度条,列表,面板
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。