Progress（进度条） - [ Bootstrap 4 中文开发手册 ] - 在线原生手册

目录搜索

Getting started Accessibility（无障碍）Browsers and devices（浏览器和设备）Build tools（构建工具）Contents（内容）Download（下载）JavaScript Theming Bootstrap（主题Bootstrap）Webpack Components: Alerts Alerts（警报）Components: Badges Badges（徽章）Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组）Components: Buttons Buttons（按钮）Components: Cards Components: Carousel Cards（卡）Carousel（圆盘传送带）Components: Collapse Collapse（折叠）Components: Dropdowns Dropdowns（下拉菜单）Components: Forms Forms（表单）Components: Input group Input group（输入群组）Components: Input group Jumbotron（广告大屏幕）Components: List group List group（列表组）Components: Modal Modal（互动视窗）Components: Navbar Navbar（导航栏）Components: Navs Navs（导航栏）Components: Pagination Pagination（分页）Components: Popovers Popovers（弹出框）Components: Progress Progress（进度条）Components: Scrollspy Scrollspy（滚动监听）Components: Tooltips Tooltips（提示工具）Content Code（代码）Figures（图片区）Images（图片）Reboot（重置）Tables（表格）Typography（排版）Layout Grid（网格）Layout（布局）Media object（多媒体对象）Utilities for layout（排版通用类别）Migration Migrating to v4（迁移到v4）Utilities Borders（边框）Clearfix（清除浮动）Close icon（关闭图标）Colors（颜色）Display property（显示属性）Embeds（内嵌）Flex（弹性）Float（浮动）Image replacement（图像替换）Position（位置）Screenreaders（荧幕阅读器）Sizing（尺寸）Spacing（间隔）Text（文本）Vertical alignment（垂直对齐）Visibility（能见度）

文字

使用引导自定义进度条的文档和示例，支持堆叠的条形图、动画背景和文本标签。

它是如何工作的

进度组件由两个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>

高度

我们只设置了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.

根据麻省理工学院的许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。