创建具有不同样式的Bootstrap进度栏
请按照以下给定的步骤创建具有不同样式的进度条-
添加具有.progress类的<div>。
接下来，在上面的<div>中，添加一个空的<div>，其类为.progress-bar和classprogress-bar-*，其中*可能是成功，信息，警告，危险。
添加一个样式属性，其宽度用百分比表示。举例来说，style=“60％”;表示进度条为60％。
下面创建的进度条用于显示积极的行动和关键信息-
示例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<script src = "/scripts/jquery.min.js"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Progress Bars</h2>
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
</body>
</html>热门推荐
10 新郎表白成语祝福语简短
11 祝贺开业文案祝福语简短
12 生日祝福语大全女孩简短
13 六一互换礼物祝福语简短
14 师生聚餐的祝福语简短
15 写给男生简短的祝福语
16 简短的出行工作祝福语
17 祝福语简短古诗词
18 月子小孩祝福语大全简短