免費AI編程助手
Bootstrap 進度條
2018-03-18 17:25 更新
進度條顯示冗長操作的進度，例如文件加載，重定向。
以下示例顯示如何使用垂直漸變創(chuàng)建簡單的進度條。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="progress">
<div class="progress-bar" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</body>
</html>條紋進度條
要創(chuàng)建條紋進度條，請將類.progress-striped添加到.progress基類。
IE7-8不支持條紋進度條。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="progress progress-striped">
<div class="progress-bar" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</body>
</html>動畫進度條
要創(chuàng)建動畫進度條，請將.active類添加到.progress-stripped。
.active類從右到左對條紋進行動畫處理。
在IE7，IE7，IE9中不支持動畫進度條。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</body>
</html>堆疊進度條
以下代碼顯示如何將多個進度條放在同一進度條中以將其堆疊。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
</div>
</body>
</html>有意義的類的進度條
我們可以自定義進度條用各種顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%">
<span class="sr-only">40% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%">
<span class="sr-only">80% Complete</span>
</div>
</div>
</div>
</body>
</html>有強調(diào)的類的進度條
以下代碼顯示如何使用各種顏色對進度條進行條紋化。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width: 40%">
<span class="sr-only">40% Complete</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width: 60%">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 80%">
<span class="sr-only">80% Complete</span>
</div>
</div>
</div>
</body>
</html>以上內(nèi)容是否對您有幫助：
更多建議：