بررسی نوار پیشرفت در بوت استرپ( بررسی کامل )

در این جلسه از دوره آموزش بوت استرپ به بررسی نوار پیشرفت در بوت استرپ می پردازیم.

نوار پیشرفت در بوت استرپ :

نوار پیشرفت در بوت استرپ : همان طور که از نام آن مشخص است به مدیر سایت کمک می کند به صورت گرافیکی و به سادگی پیشرفت یک عملیات یا موضوع خاص را به کاربران نمایش دهد.در این جلسه از دوره آموزش بوت استرپ نوار پیشرفت در بوت استرپ را مورد بررسی قرار می دهیم.چندین نوع نوار پیشرفت به طور پیش فرض در بوت استرپ تعریف شده است.

نکته : نوار های پیشرفت در اینترنت اکسپلورر۹و قبل از آن پشتیبانی نمی شوند.

قاعده ایجاد نوار پیشرفت در بوت استرپ :

• برای ایجاد یک نوار پیشرفت در بوت استرپ از کلاس progress استفاده می شود.
• برای خوانایی صفحه توسط صفحه خوان ها برای افراد نابینا از ویژگی aria-valuemax استفاده کنید.
• باید این کلاس را به عنصر div اضافه کنید.به مثال زیر دقت کنید.

<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>

حذف کلاس SR-ONLY :

همام طور که در مثال بالا دیدید یک تگ <span> با کلاس sr – only وجود داشت که در واقع متن میزان پیشرفت کار را در آن می نوشتید.البته کلاس sr – only باعث می شود که توضیحات در خروجی نمایش داده نشود. وفقط به صورت رنگ متمایز که در اینجا آبی رنگ است در نوار نمایش داده شود.اگر کلاس sr-only در<span> را حذف کنید می توانید میزان پیشرفت را به صورت درصد یا عدد نمایش دهید.

در حالت عادی این کلاس موجب حذف متن درون تگ span می شود. به مثال زیر دقت کنید.

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
۷۰%
</div>
</div>

دقت کنید که تگ span را هم می توان کامل حذف کرد.

کلاس های مختلف نوار پیشرفت :

در بوت استرپ به صورت پیش فرض می توان رنگ نوار پیشرفت را تغییر داد که برای این منظور کلاس های متنی در بوت استرپ تعریف شده است. با ما همراه باشید تا به بررسی این کلاس ها بپردازیم.

در مثال زیر نحوه استفاده از کلاس های مختلف نمایش داده شده است.

هرکدام از کلاس ها نوار پیشرفت را با رنگ پیش فرض آن که در بوت استرپ تعریف شده است نمایش می دهند.

progress-bar progress-bar-success

<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
۴۰% Complete (success)
</div>
</div>

progress-bar progress-bar-info

<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
۵۰% Complete (info)
</div>
</div>

progress-bar progress-bar-warning

<div class=”progress”>
<div class=”progress-bar progress-bar-warning” role=”progressbar” aria-valuenow=”60″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:60%”>
۶۰% Complete (warning)
</div>
</div>

progress-bar progress-bar-danger

<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
۷۰% Complete (danger)
</div>
</div>

ایجاد نوارهای پیشرفت راه راه در بوت استرپ

در بوت استرپ این امکان وجود دارد که ظاهر نوار پیشرفت را به صورت راه راه نمایش داد.

برای اضافه کردن نوار راه راه به نوار پیشرفت از کلاس progress-bar-striped . استفاده کنید.به مثال زیر دقت کنید.

progress-bar progress-bar-success progress-bar-striped

<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%">
۴۰% Complete (success)
</div>
</div>

progress-bar progress-bar-info progress-bar-striped

<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%">
۵۰% Complete (info)
</div>
</div>

progress-bar progress-bar-warning progress-bar-striped

<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%">
۶۰% Complete (warning)
</div>
</div>

progress-bar progress-bar-danger progress-bar-striped

<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%">
۷۰% Complete (danger)
</div>
</div>

ایجاد نوار های پیشرفت که از چندین سلول با کلاس های مختلف ساخته شده اند :

در بوت استرپ می توان نوار پیشرفتی را ایجاد کرد که از چندین سلول با کلاس های مختلف ساخته شده باشد.درواقع می توان نوار پیشرفت را به صورت بهینه و با اشغال کمترین فضا در صفحه ایجاد کرد.به مثال زیر دقت کنید.

<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>

ایجاد نوارهای پیشرفت به صورت انیمیشن :

در بوت استرپ می توان نوارهای پیشرفت را به صورت انیمیشن ایجاد کرد.برای ایجاد چنین نوارهای پیشرفتی در بوت استرپ کلاس های خاصی تعریف شده است که به بررسی آنها می پردازیم.

ANIMATED PROGRESS BAR

<div class="container">
<h2>Animated Progress Bar</h2>
<p>The .active class animates the progress bar:</p>
<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%">
۴۰%
</div>
</div>
</div>

The .active class animates the progress bar: