bootstrap进度条 bootstrap进度条|Bootstrap教程

本文概述

Bootstrap进度栏示例

进度条显示用户在流程中的距离。在Bootstrap中，有几种类型的进度条。
< div> 元素中的类.progress用于在引导程序中创建默认进度栏。
Bootstrap进度栏示例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Progress bar< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Default Progress Bar< /h2> < div class="progress"> < div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> < span class="sr-only">70% Complete< /span> < /div> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155U96036-1.jpg">< /script> < /body> < /html>

Bootstrap 4基本进度栏
进度条用于向用户显示他/她在过程中待了多长时间。要创建创建默认的进度条，请将.progress类添加到容器元素，并将进度条类添加到其子元素。使用CSS width属性设置进度条的宽度。
例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155Ua193-3.jpg">< /script> < script src="http://img.readke.com/220416/155U912c-4.jpg">< /script> < /head> < body>< div class="container"> < h2>Progress Bar With Label< /h2> < div class="progress"> < div class="progress-bar" style="width:70%">70%< /div> < /div> < /div>< /body> < /html>

具有标签的Bootstrap进度栏
带标签的进度条指定特定过程的进度百分比。
你必须从进度栏中删除仅.sr类，才能显示可见百分比。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Progress Bar With Label< /h2> < div class="progress"> < div class="progress-bar" role="progressbar" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100" style="width:76%"> 76% < /div> < /div> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155U96036-1.jpg">< /script>< /body> < /html>

Bootstrap彩色进度栏
你可以使用上下文类来创建彩色进度条。
用于创建彩色进度条的上下文类：

.progress-bar-成功
.progress-bar-info
.progress-bar-warning
.progress-bar-danger

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Colored Progress Bars< /h2> < p>The contextual classes colors the progress bars:< /p> < div class="progress"> < div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete (success) < /div> < /div> < div class="progress"> < div class="progress-bar progress-bar-info" ole="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Complete (info) < /div> < /div> < div class="progress"> < div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Complete (warning) < /div> < /div> < div class="progress"> < div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Complete (danger) < /div> < /div> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155U96036-1.jpg">< /script>< /body> < /html>

引导程序剥离进度条
你可以使用类.progress-bar-striped创建剥离的进度条。

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Striped Progress Bars< /h2> < p>The .progress-bar-striped class adds stripes to the progress bars:< /p> < div class="progress"> < div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete (success) < /div> < /div> < div class="progress"> < div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Complete (info) < /div> < /div> < div class="progress"> < div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Complete (warning) < /div> < /div> < div class="progress"> < div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Complete (danger) < /div> < /div> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155U96036-1.jpg">< /script>< /body> < /html>

Bootstrap动画进度条
你必须使用.active类来创建动画进度条。

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Animated Progress Bar< /h2> < p>The .active class animates the progress bar:< /p> < div class="progress"> < div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% < /div> < /div> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155U96036-1.jpg">< /script>< /body> < /html>

Bootstrap Stacked进度栏（彩色进度栏）
【bootstrap进度条】你可以通过将多个进度条放在同一< div class =“ progress”> 中来创建堆叠的进度条

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Stacked Progress Bars< /h2> < p>Create a stacked progress bar by placing multiple bars into the same div with class .progress:< /p> < div class="progress"> < div class="progress-bar progress-bar-success" role="progressbar" style="width:40%"> Free Space < /div> < div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%"> Warning < /div> < div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%"> Danger < /div> < /div> < /div>< script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155U96036-1.jpg">< /script>< /body> < /html>

注意：Bootstrap 4中添加了两种新的彩色进度条：

.progress-bar-white
.progress-bar-secondary
.progress-bar-light
.progress-bar-dark

例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/155Ua193-3.jpg">< /script> < script src="http://img.readke.com/220416/155U912c-4.jpg">< /script> < /head> < body>< div class="container"> < h2>Colored Progress Bars Example< /h2> < !-- Blue --> < div class="progress"> < div class="progress-bar" style="width:10%">< /div> < /div>< br>< !-- Green --> < div class="progress"> < div class="progress-bar bg-success" style="width:20%">< /div> < /div>< br>< !-- Turquoise --> < div class="progress"> < div class="progress-bar bg-info" style="width:30%">< /div> < /div>< br>< !-- Orange --> < div class="progress"> < div class="progress-bar bg-warning" style="width:40%">< /div> < /div>< br>< !-- Red --> < div class="progress"> < div class="progress-bar bg-danger" style="width:50%">< /div> < /div>< br>< !-- White --> < div class="progress border"> < div class="progress-bar bg-white" style="width:60%">< /div> < /div>< br>< !-- Grey --> < div class="progress"> < div class="progress-bar bg-secondary" style="width:70%">< /div> < /div>< br>< !-- Light Grey --> < div class="progress border"> < div class="progress-bar bg-light" style="width:80%">< /div> < /div>< br>< !-- Dark Grey --> < div class="progress"> < div class="progress-bar bg-dark" style="width:90%">< /div> < /div> < /div>< /body> < /html>