ساخت نوار پیشرفت progress bar بوت استرپ bootstrap
ساخت نوار پیشرفت ،نحوه ساخت نوار پیشرفت در بوت استرپ bootstrap یا bootstrap progress bars
مقالات
نوار پیشرفت پایه
یک نوار پیشرفت Progress Bar می تواند برای نشان دادن پیشرفت کاربر در یک فرایند باشد.
بوت استرپ چندین نوع میله پیشرفت را فراهم می کند.
یک نوار پیشرفت پیش فرض در Bootstrap شبیه به مورد زیر است:
برای ایجاد یک نوار پیشرفت Progress Bar به طور پیش فرض، یک کلاس .progress را به عنصر <div> اضافه کنید:
مثال
|
1 2 3 4 5 6 |
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> <span class="sr-only">70% Complete</span> </div> </div> |
نکته: نوارهای پیشرفت در اینترنت اکسپلورر 9 و قبل از آن پشتیبانی نمی شوند (زیرا برای برخی از اثرات آنها از CSS3 استفاده می کنند و انیمیشن ها را متحول می کنند).
توجه: برای کمک به بهبود دسترسی افراد مبتلا به خواننده های صفحه، باید ویژگی های aria را وارد کنید.
نوار پیشرفت با برچسب
Progress Bar With Label
یک نوار پیشرفت با یک برچسب به این شکل است:
حذف کلاس “.sr-only” از نوار پیشرفت برای نمایش درصد هایی که مخفی شده اند.
|
1 2 3 4 5 6 |
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% </div> </div> |
مثال
رنگ های پیشرفته میله
Colored Progress Bars
کلاس های متنی Contextual classes برای ارائه “معنی دادن از طریق رنگ” استفاده می شود.
کلاس های متنی Contextual classes که می توانند با میله های پیشرفت مورد استفاده قرار گیرند عبارتند از:
.progress-bar-success
.progress-bar info
.progress-bar-warning
.progress-bar-danger
40٪ کامل (موفقیت)
50٪ کامل (اطلاعات)
60٪ کامل (هشدار)
70٪ کامل (خطر)
مثال زیر نشان می دهد چگونه می توانید میله های پیشرفت progress bar را با کلاس های متنی مختلف ایجاد کنید:
مثال
|
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 |
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete (success) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Complete (info) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Complete (warning) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Complete (danger) </div> </div> |
نوارهای پیشرفته بافته شده
میله های پیشرفت نیز می تواند راه راه:
اضافه کردن کلاس .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 |
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete (success) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Complete (info) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Complete (warning) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Complete (danger) </div> </div> |
نوار پیشرفت متحرک
Animated Progress Bar
40٪
اضافه کردن کلاس .active برای متحرک کردن نوار پیشرفت:
مثال
|
1 2 3 4 5 6 |
<div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% </div> </div> |
Stacked Progress Bars
میله های پیشرفت می توانند انباشته شوند:
با قرار دادن چندین میله به همان یک نوار پیشرفت انباشته شده ایجاد کنید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%"> Free Space </div> <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%"> Warning </div> <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%"> Danger </div> </div> |
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
دیدگاهتان را بنویسید