با سلام خدمت شما همراهان عزیز وب سایت آموزشی پرنیان طرح
در این مبحث نوار پیشرفت (progress bar) در بوت استرپ را به شما آموزش میدهیم.
نوار پیشرفت میزان و درصد پیشرفت یک فرآیند را به ما نشان میدهد.
نوار پیشرفت ساده (Basic Progress Bar):
از یک نوار پیشرفت میتوان برای نشان دادن مرحله ای که کاربر در آن است استفاده نمود.
برای ایجاد یک نوار پیشرفت یک کلاس progress. را به عنصر container اضافه کرده و کلاس نوار پیشرفت را به عنصر فرزند خود اضافه کنید.
در مثال زیر یک نمونه از نوار پیشرفت ساده را تعریف کرده ایم:
[php]
<div class=”container”>
<h2>Basic Progress Bar</h2>
<p>To create a default progress bar, add a .progress class to a container element and add the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:</p>
<div class=”progress”>
<div class=”progress-bar” style=”width:70%”></div>
</div>
</div>
[/php]
تصویر زیر یک نوار پیشرفت ساده را به شما نشان میدهد:
ارتفاع نوار پیشرفت (Progress Bar Height):
ارتفاع نوار پیشرفت به طور پیش فرض ۱۶px میباشد شما میتوانید برای تغییر اندازه ی آن از ویژگی css height استفاده کنید.
در ادامه مثالی برای توضیح بیشتر داده ایم:
[php]
<div class=”container”>
<h2>Progress Bar Height</h2>
<p>The height of the progress bar is 1rem (16px) by default. Use the CSS height property to change 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>
[/php]
ارتفاع های مختلف این نوارهای پیشرفت را ببینید:
برچسب های نوار پیشرفت (Progress Bar Lables):
متن را در نوار پیشرفت اضافه کنید تا درصد قابل مشاهده را نشان دهید.
مثال:
[php]
<div class=”container”>
<h2>Progress Bar With Label</h2>
<div class=”progress”>
<div class=”progress-bar” style=”width:70%”>70%</div>
</div>
</div>
[/php]
درصد نوار پیشرفت را در تصویر زیر میتوانید مشاهده کنید:
نوارهای پیشرفت رنگی (Colored Progress Bar):
رنگ نوار پیشرفت به طور پیش فرض آبی است از کلاس های پس زمینه متنی برای رنگی کردن نوارهای پیشرفت استفاده کنید.
[php]
<div class=”container”>
<h2>Colored Progress Bars</h2>
<p>Use any of the contextual color classes to change 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>
</div>
[/php]
تصویر نوار های پیشرفت رنگی:
نوار های پیشرفت راه راه (Striped Progress Bars):
این کلاس خط های راه راه روی نوار پیشرفت ایجاد میکند.
مثال زیر را ببینید:
[php]
<div class=”container”>
<h2>Striped Progress Bars</h2>
<p>The .progress-bar-striped class adds stripes to the 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>
[/php]
تصویر زیر را مشاهده کنید:
نوار های پیشرفت متحرک (Animated Progress Bar):
برای ایجاد نوار پیشرفت متحرک از کلاس progress-bar-animated. استفاده کنید.
به این مثال توجه کنید:
[php]
<div class=”container”>
<h2>Animated Progress Bar</h2>
<p>Add the .progress-bar-animated class to animate the progress bar:</p>
<div class=”progress”>
<div class=”progress-bar progress-bar-striped progress-bar-animated” style=”width:40%”></div>
</div>
</div>
[/php]
خروجی این مثال تصویر زیر است:
نوارهای پیشرفت متصل به هم (Mutipe Progress Bar):
نوار های پیشرفت میتوانند پشت سرهم قرار بگیرند.
یک مثال:
[php]
<div class=”container”>
<h2>Multiple Progress Bars</h2>
<p>Create a stacked 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>
[/php]
نوار های پیشرفت دنبال هم را ببینید: