进度条用于在计算机上显示进程的进度。进度条显示完成了多少流程以及还剩下多少。您可以使用预定义的引导程序类在网页上添加进度条。 Bootstrap提供了多种类型的进度条。
句法:
例子:
Bootstrap Progress Bar
GeeksforGeeks
输出:
进度条的高度:使用CSS属性更改进度条的高度。进度的默认高度为16像素。进度高度和进度栏容器必须相同。
句法:
例子:
Bootstrap Progress Bar
GeeksforGeeks
输出:
带标签的进度条:带标签的进度条用于在进度栏中显示文本,以显示任务完成百分比。
句法:
例子:
Bootstrap Progress Bar
GeeksforGeeks
输出:
彩色进度条:使用Bootstrap 4上下文背景类设置进度条的颜色。进度栏的默认颜色为蓝色。
句法:
例子:
Bootstrap Progress Bar
GeeksforGeeks
输出:
条纹进度条: .progress-bar-striped类用于向进度条添加条纹。使用.progress-bar和.progress-bar-striped类的组合来创建条状进度条。使用Bootstrap 4上下文背景类设置进度条的颜色。
句法:
例子:
Bootstrap Progress Bar
GeeksforGeeks
输出:
动画进度条: .progress-bar-animated类用于创建动画进度条。使用.progress-bar,striped-bar-striped和progress-bar-animated的组合来创建动画进度条。
句法:
例子:
Bootstrap Progress Bar
GeeksforGeeks
输出:
多个进度条:可以堆叠多个进度条以显示不同颜色的进度条。
例子:
Bootstrap Progress Bar
GeeksforGeeks
输出: