Getting startedAccessibility（无障碍）Browsers and devices（浏览器和设备）Build tools（构建工具）Contents（内容）Download（下载）JavaScriptTheming Bootstrap（主题Bootstrap）WebpackComponents: AlertsAlerts（警报）Components: BadgesBadges（徽章）Components: BreadcrumbBreadcrumbComponents: Button groupButton group（按钮组）Components: ButtonsButtons（按钮）Components: CardsComponents: CarouselCards（卡）Carousel（圆盘传送带）Components: CollapseCollapse（折叠）Components: DropdownsDropdowns（下拉菜单）Components: FormsForms（表单）Components: Input groupInput group（输入群组）Components: Input groupJumbotron（广告大屏幕）Components: List groupList group（列表组）Components: ModalModal（互动视窗）Components: NavbarNavbar（导航栏）Components: NavsNavs（导航栏）Components: PaginationPagination（分页）Components: PopoversPopovers（弹出框）Components: ProgressProgress（进度条）Components: ScrollspyScrollspy（滚动监听）Components: TooltipsTooltips（提示工具）ContentCode（代码）Figures（图片区）Images（图片）Reboot（重置）Tables（表格）Typography（排版）LayoutGrid（网格）Layout（布局）Media object（多媒体对象）Utilities for layout（排版通用类别）MigrationMigrating to v4（迁移到v4）UtilitiesBorders（边框）Clearfix（清除浮动）Close icon（关闭图标）Colors（颜色）Display property（显示属性）Embeds（内嵌）Flex（弹性）Float（浮动）Image replacement（图像替换）Position（位置）Screenreaders（荧幕阅读器）Sizing（尺寸）Spacing（间隔）Text（文本）Vertical alignment（垂直对齐）Visibility（能见度）
©
本文档使用
php.cn手册 发布
文字
使用引导自定义进度条的文档和示例，支持堆叠的条形图、动画背景和文本标签。
它是如何工作的
进度组件由两个HTML元素构建，一些CSS用来设置宽度，还有一些属性。我们不使用HTML 5<progress>元素，确保您可以堆叠进度条，使其动画化，并在其上放置文本标签。
我们使用
.progress作为一个包装器来指示进度条的最大值。
我们使用内部
.progress-bar来说明目前为止的进展。
大
.progress-bar需要内联样式、实用程序类或自定义CSS来设置其宽度。
大
.progress-bar也需要一些role和aria属性使其可访问。
把所有这些放在一起，你就有了下面的例子。
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div></div>
引导程序提供了几个设置宽度的实用程序根据您的需要，这些可能有助于快速配置进度。
<div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div></div>
标签
将文本放置在.progress-bar...
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div>
高度
我们只设置了height值的.progress，所以如果您更改了内部的值.progress-bar将自动调整大小。
<div class="progress" style="height: 1px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress" style="height: 20px;"> <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div>
背景
使用背景实用工具类更改单个进度条的外观。
<div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div></div>
多条
如果需要，在进度组件中包含多个进度条。
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div></div>
条纹
加.progress-bar-striped给任何人.progress-bar要通过CSS渐变在进度条的背景色上应用条纹，请执行以下操作。
<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div></div><div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div></div>
动画条纹
条纹梯度也可以动画。加.progress-bar-animated到.progress-bar通过CSS 3动画从右向左动画。
动画进度条在Opera 12中不工作-因为他们不支持CSS 3动画。
<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div></div>
© 2011–2017 Twitter, Inc.
©2011-2017自带作者
根据麻省理工学院的许可授权的代码。
根据CreativeCommonsAttributionLicense v3.0授权的文档。