溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“bootstrap進度條如何寫”，在日常操作中，相信很多人在bootstrap進度條如何寫問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”bootstrap進度條如何寫”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
bootstrap進度條是使用 CSS3 過度和動畫來實現的效果，而且在 IE9 以及之前的版本還有舊版的 Firefox 也不支持這個特性，然而Opera12不支持動畫。
1.默認進度條
我們通過創建.html文件，在文件中加入 <div>標簽在使用我們的類選擇器，代碼和運行結果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 進度條</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.progress{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="progress" >
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" >
<span class="sr-only">40% 完成</span>
</div>
</div>
</body>
</html>2.交替進度條
按照我們創建的項目中添加我們的類選擇器名稱，代碼和運行結果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 交替的進度條</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.progress{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">90% 完成（成功）</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">30% 完成（信息）</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">20% 完成（警告）</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">10% 完成（危險）</span>
</div>
</div>
</body>
</html>3.條紋進度條
我們通過在代碼中的類選擇器中加入class .progress 和 .progress-striped，代碼和運行結果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 條紋的進度條</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.progress{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">90% 完成（成功）</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">30% 完成（信息）</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">20% 完成（警告）</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">10% 完成（危險）</span>
</div>
</div>
</body>
</html>4.動畫進度條
我們在.html文件中的<body>標簽內創建兩個<div>標簽并且設置類屬性名為class .progress 和 .progress-striped，代碼和運行結果如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 動畫的進度條</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.progress{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">40% 完成</span>
</div>
</div>
</body>
</html>
5.堆疊進度條
我們在通過對每個<div>標簽進行設置從而實現我們想要的效果，代碼和運行截圖如下：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 堆疊的進度條</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.progress{
margin-top: 10px;
}
</head>
<body>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">40% 完成</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">30% 完成（信息）</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
>
<span class="sr-only">20% 完成（警告）</span>
</div>
</div>
</body>
</html>到此，關于“bootstrap進度條如何寫”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
