本文实例为大家分享了引导进度条的具体实现代码,供大家参考,具体内容如下
& lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1”比;
& lt; title> Bootstrap
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap.css " rel=巴獠縩ofollow”/比;
& lt;/head>
& lt; body>
& lt; div类="容器"比;
& lt; div类="行"比;
& lt; div类=敖健弊４? lt; !——进度条——比;
& lt; div类=敖忍酢痹?0% & lt;/div>
& lt;/div>
& lt; div类=敖健北?
& lt; div class="进度条progress-bar-danger”在40% & lt;/div>
& lt;/div>
& lt; div类=敖健北?
& lt; div class="进度条progress-bar-info”在80% & lt;/div>
& lt;/div>
& lt; div类=敖健北?
& lt; div class="进度条progress-bar-warning”在75% & lt;/div>
& lt;/div>
& lt; !——带条纹的动态的进度条——比;
& lt; div类=敖健北?
& lt; div class="进度条progress-bar-success progress-bar-striped活跃”在68% & lt;/div>
& lt;/div>
& lt; !——带堆叠效果的进度条——比;
& lt; div类=敖健北?
& lt; div类=敖忍酢痹?0% & lt;/div>
& lt; div class="进度条progress-bar-danger”在40% & lt;/div>
& lt; div class="进度条progress-bar-info”在80% & lt;/div>
& lt; div class="进度条progress-bar-warning”在75% & lt;/div>
& lt; div class="进度条progress-bar-success progress-bar-striped活跃”在20% & lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/js/jquery-2.1.0.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/js/bootstrap.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
之前
效果图:
引导进度条学习使用
