نوار پیشرفت یا progress bar در بوت استرپ، همانطور که از نامش پیدا است نواری است که وضعیت کاربر در یک پروسه را مشخص می کند. به عبارت دیگر به کاربر نشان می دهد چقدر در فلان عملیات پیشرفت کرده است. برای ساخت این نوع از عناصر باید به عنصر نگه دارنده، کلاس progress. و به عنصر فرزند نیز کلاس progress-bar. را بدهید. بقیه ی جزئیات با قوانین CSS (مانند width برای تعیین عرض نوار پیشرفت) قابل تنظیم هستند.
به مثال زیر توجه کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Progress Bar</h2>
<p>Tocreateadefaultprogress bar,adda.progress classtoacontainer element andadd the progress-bar classtoits childelement.Usethe CSS width propertytoset the width of the progress bar:</p>
<div class="progress">
<div class="progress-bar"style="width:70%"></div>
</div>
</div>
</body>
</html>
|
تعیین ارتفاع
ارتفاع نوار پیشرفت به طور پیش فرض 16 پیکسل است ولی می توانیم با استفاده از قابلیت height در زبان CSS آن را تغییر دهیم. البته نکته ای که باید حتما به آن توجه کنید این است که حتما ارتفاع نگه دارنده (عنصر پدر) و خود نوار پیشرفت یکی باشند. به مثال زیر توجه کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Progress Bar Height</h2>
<p>The height of the progress bar is1rem(16px)by default.Usethe CSS height propertytochange the height:</p>
<div class="progress"style="height:10px">
<div class="progress-bar"style="width:40%;height:10px"></div>
</div>
<br>
<div class="progress"style="height:20px">
<div class="progress-bar"style="width:50%;height:20px"></div>
</div>
<br>
<div class="progress"style="height:30px">
<div class="progress-bar"style="width:60%;height:30px"></div>
</div>
</div>
</body>
</html>
|
اضافه کردن متن به نوار پیشرفت
برای اضافه کردن متن به نوار های پیشرفت کافی است به خود عنصر متنی را اضافه کنید. مثال:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></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>
|
ما در این مثال متن %70 را به متن اضافه کرده ایم.
نوارهای پیشرفت رنگی
همانطور که در مثال های قبلی دیده اید، رنگ پیش فرض برای نوارهای پیشرفت آبی است اما اگر از رنگ های بوت استرپ استفاده کنید، به راحتی تغییر می کنند:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Colored Progress Bars</h2>
<p>Useany of the contextual color classes tochange the color of the progress bar:</p>
<!--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>
|
راه راه کردن نوار پیشرفت
حتما دیده اید که در برخی از موارد، نوارهای پیشرفت در سایت های مختلف راه راه هستند یا طرح خاصی درونشان قرار گرفته است. شما با اضافه کردن کلاس progress-bar-striped. به عنصر مورد نظر می توانید این طرح های راه راه را به نوار خود اضافه کنید. به مثال زیر دقت کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Progress Bars</h2>
<p>The.progress-bar-striped classadds stripes tothe progress bars:</p>
<div class="progress">
<div class="progress-bar progress-bar-striped"style="width:30%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped"style="width:40%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped"style="width:50%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped"style="width:60%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped"style="width:70%"></div>
</div>
</div>
</body>
</html>
|
اما این طرح هنوز هم به اندازه ی کافی جالب نیست و می توانیم به آن انیمیشن اضافه کنیم!
برای ایجاد انیمیشن در نوارهای وضعیت، از کلاس progress-bar-animated. استفاده کنید. با اضافه کردن انیمیشن به این نوارها حس بارگذاری واقعی در کاربر تداعی می شود:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Animated Progress Bar</h2>
<p>Add the.progress-bar-animated classtoanimate the progress bar:</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"style="width:40%"></div>
</div>
</div>
</body>
</html>
|
چند قسمتی کردن نوارهای پیشرفت
یکی از موارد کاربردی و بسیار جالب نوارهای پیشرفت، امکان تقسیم کردن نوار به قسمت های مختلف است.
به طور مثال در کد زیر گفته ایم که نوار به قسمت های عادی، هشدار، خطر و … تقسیم شود تا زمانی که مقدار چیزی به حد خطرناک رسید، کاربر از آن مطلع شود:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Multiple Progress Bars</h2>
<p>Createastacked progress bar by placing multiple bars into the same div with class="progress":</p>
<div class="progress">
<div class="progress-bar bg-success"style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning"style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"style="width:20%">
Danger
</div>
</div>
</div>
</body>
</html>
|
امیدوارم از درس آموزش ایجاد انواع progress bar در بوت استرپ از مجموعه آموزش Bootstrap 4 لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟