logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间：
Tag 标签Badge 徽章
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

基本用法

宽度调整

添加使用程序.w-75 来调整宽度。

高度调整

你只在 .progress 容器上设置了 height 值，因此如果更改该值，内部 .progress-bar 将自动相应地调整大小。

标签

通过将文本放置在 .progress-bar 中，向进度条添加标签。

请注意，默认情况下，.progress-bar 内的内容由 overflow: hidden 控制，因此它不会渗出栏外。如果你的进度条比其标签短，内容将被限制并且可能变得不可读。要更改此行为，你可以使用溢出实用程序 中的 .overflow-visible，但请确保还定义显式的文本颜色，以便文本保持可读。

标签右侧显示

背景

使用后台工具类来更改各个进度条的外观。

如果你要使用自定义背景颜色向进度条添加标签，请确保还设置适当的文本颜色，以便标签保持可读并具有足够的对比度。

你可以使用新的组合颜色和背景(.text-bg-warning) 辅助程序类

多个条形

你可以在带有 .progress-stacked 的容器内包含多个进度组件，以创建单个堆叠进度条。请注意，在这种情况下，设置进度条视觉宽度的样式必须应用于 .progress 元素，而不是 .progress-bar。

有条纹的

将 .progress-bar-striped 添加到任何 .progress-bar，以通过 CSS 渐变在进度条的背景颜色上应用条纹。

动画条纹

条纹渐变也可以设置动画。添加 .progress-bar-animated 到 .progress-bar 以通过动画从右到左为条纹设置动画。