Getting started
Accessibility（無障礙）
Browsers and devices（瀏覽器和設(shè)備）
Build tools（構(gòu)建工具）
Contents（內(nèi)容）
Download（下載）
JavaScript
Theming Bootstrap（主題Bootstrap）
Webpack
Components: Alerts
Alerts（警報(bào)）
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（互動(dòng)視窗）
Components: Navbar
Navbar（導(dǎo)航欄）
Components: Navs
Navs（導(dǎo)航欄）
Components: Pagination
Pagination（分頁）
Components: Popovers
Popovers（彈出框）
Components: Progress
Progress（進(jìn)度條）
Components: Scrollspy
Scrollspy（滾動(dòng)監(jiān)聽）
Components: Tooltips
Tooltips（提示工具）
Content
Code（代碼）
Figures（圖片區(qū)）
Images（圖片）
Reboot（重置）
Tables（表格）
Typography（排版）
Layout
Grid（網(wǎng)格）
Layout（布局）
Media object（多媒體對(duì)象）
Utilities for layout（排版通用類別）
Migration
Migrating to v4（遷移到v4）
Utilities
Borders（邊框）
Clearfix（清除浮動(dòng)）
Close icon（關(guān)閉圖標(biāo)）
Colors（顏色）
Display property（顯示屬性）
Embeds（內(nèi)嵌）
Flex（彈性）
Float（浮動(dòng)）
Image replacement（圖像替換）
Position（位置）
Screenreaders（熒幕閱讀器）
Sizing（尺寸）
Spacing（間隔）
Text（文本）
Vertical alignment（垂直對(duì)齊）
Visibility（能見度）
?
This document uses PHP Chinese website manual Release
characters
使用引導(dǎo)自定義進(jìn)度條的文檔和示例，支持堆疊的條形圖、動(dòng)畫背景和文本標(biāo)簽。
它是如何工作的
進(jìn)度組件由兩個(gè)HTML元素構(gòu)建，一些CSS用來設(shè)置寬度，還有一些屬性。我們不使用HTML 5<progress>元素，確保您可以堆疊進(jìn)度條，使其動(dòng)畫化，并在其上放置文本標(biāo)簽。
我們使用
.progress作為一個(gè)包裝器來指示進(jìn)度條的最大值。
我們使用內(nèi)部
.progress-bar來說明目前為止的進(jìn)展。
大
.progress-bar需要內(nèi)聯(lián)樣式、實(shí)用程序類或自定義CSS來設(shè)置其寬度。
大
.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>
引導(dǎo)程序提供了幾個(gè)設(shè)置寬度的實(shí)用程序根據(jù)您的需要，這些可能有助于快速配置進(jìn)度。
<div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div></div>
標(biāo)簽
將文本放置在.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>
高度
我們只設(shè)置了height值的.progress，所以如果您更改了內(nèi)部的值.progress-bar將自動(dòng)調(diào)整大小。
<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>
背景
使用背景實(shí)用工具類更改單個(gè)進(jìn)度條的外觀。
<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>
多條
如果需要，在進(jìn)度組件中包含多個(gè)進(jìn)度條。
<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漸變?cè)谶M(jìn)度條的背景色上應(yīng)用條紋，請(qǐng)執(zhí)行以下操作。
<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>
動(dòng)畫條紋
條紋梯度也可以動(dòng)畫。加.progress-bar-animated到.progress-bar通過CSS 3動(dòng)畫從右向左動(dòng)畫。
動(dòng)畫進(jìn)度條在Opera 12中不工作-因?yàn)樗麄儾恢С諧SS 3動(dòng)畫。
<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自帶作者
根據(jù)麻省理工學(xué)院的許可授權(quán)的代碼。
根據(jù)CreativeCommonsAttributionLicense v3.0授權(quán)的文檔。