Bootstrap 5 进度条

Bootstrap 5 进度条显示关于特定功能的数据和评分。 如果我们想显示 100% 中的一个值，那么可以使用进度条。 您可以设置功能的最终值并显示进度值。

基本进度条

"progress" 和 "progress-bar" 分别应用于容器元素及其子元素。 使用 CSS 的 width 属性设置进度条的宽度。 style width 用于显示进度条的值。

语法

以下语法显示如何使用 bootstrap 5 类和 css 样式创建进度条。

示例

该示例显示了根据技能设置的基本和默认进度条。 width 属性设置进度条中函数的值。

输出

下图显示了具有不同值的基本进度条。

进度条的高度

"progress" 和 "progress-bar" 将高度应用于进度条及其值。 height 属性使用 "progress" 类设置，然后 bootstrap 设置进度条的高度。 height 属性使用 "progress-bar" 类设置，然后 bootstrap 函数设置进度值的高度。 "progress" 和 "progress-bar" 类的高度是相似的值。

语法

以下语法显示了进度条的高度。

以下语法显示了进度条及其值的高度。

示例

该示例显示了具有所需高度的进度条。 height 属性设置进度类中函数的值。

输出

下图显示了进度条的不同高度。

进度条的标签

进度条的标签显示了条形图内部的额外和基本信息。 我们可以将进度的值或任何信息以文本格式放置。

语法

以下语法显示了如何使用 bootstrap 5 类创建带有标签的进度条。

示例

该示例显示了进度条的标签。 在这里，我们可以编写信息、值和条形图所需的小数据。

输出

以下输出图像显示了进度条及其所需的标签。

上下文进度条

"progress" 和 "progress-bar" 分别应用于父元素及其子元素。 此进度条显示具有上下文背景类的不同背景颜色。 默认进度条显示 bootstrap 5 类的主要背景颜色。

此上下文进度条显示了信息的含义。 例如，警告背景上下文类 (bg-warning) 显示关于函数或元素的警告。

语法

以下语法显示如何使用 bootstrap 5 类和 css 样式创建进度条。

示例

该示例显示了根据需要，进度条的不同背景颜色。

输出

下图显示了具有不同值的基本进度条。

条纹进度条

条纹进度条在进度条中显示条纹样式。 条纹进度条带有上下文类，使其看起来更具吸引力。 我们可以根据需要设置高度并在进度条上应用标签。

语法

以下语法显示了如何使用 bootstrap 5 类和 css 样式创建条纹进度条。

示例

该示例显示了根据需要，进度条的不同背景颜色。

输出

下图显示了具有不同值的条纹进度条。

动画进度条

动画进度条在函数中显示带有动画效果的条纹样式。 动画进度条需要一个条纹 (progress-bar-striped) 类； 否则 progress-bar-animated 类不适用于基本函数条。 我们可以根据需要设置高度并在进度条上应用标签。

语法

以下语法显示了如何使用 bootstrap 5 类和 css 样式创建动画进度条。

示例

该示例显示了根据需要，进度条的不同背景颜色。

输出

下图显示了具有不同值的动画进度条。

多个进度条

bootstrap 5 类使用默认、条纹和动画进度条来存储多个进度值。 多个进度条函数在一行中包含多个进度数据。 我们可以将进度条值或任何信息以文本格式放置在单个条形图中。

语法

以下语法显示了如何使用 bootstrap 5 类创建带有标签的多个进度条。 "progress" 类包含各种 "progress-bar"

示例

该示例显示了多个进度条。 在这里，我们可以编写信息、值和单个行中几个进度条所需的小数据。

输出

以下输出图像显示了多个进度条及其所需的标签。

结论

进度条是一种用户友好、有吸引力、简单的函数，用于显示信息。 进度条显示特定功能的改进或评分。 我们可以看到用户在特定技术方面取得了多少进步。 此函数使用 bootstrap 5 进度条类以最小的空间显示最大数据。