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（能见度）
©
이 문서에서는 PHP 중국어 웹사이트 매뉴얼 풀어 주다
문자
使用引导自定义进度条的文档和示例，支持堆叠的条形图、动画背景和文本标签。
它是如何工作的
进度组件由两个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授权的文档。