نوار های پیشرفت (Progress Bars) در بوت استرپ

بازدید: 419 بازدید

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

همانطور که میدانید از این نوار های پیشرفت (Progress Bars) جهت نمایش دادن درصد پیشرفت یک عملیات یا یک فرآیند استفاده میگردد.

در این مبحث شما را با انواع این نوارهای پیشرفت آشنا خواهیم کرد.

با سلام خدمت شما همراهان عزیز وب سایت آموزشی پرنیان طرح

در این مبحث نوار پیشرفت (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]

تصویر زیر یک نوار پیشرفت ساده را به شما نشان میدهد:

basic progress bar

ارتفاع نوار پیشرفت (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 height

برچسب های نوار پیشرفت (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]

درصد نوار پیشرفت را در تصویر زیر میتوانید مشاهده کنید:

progress bar lable

نوارهای پیشرفت رنگی (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]

تصویر نوار های پیشرفت رنگی:

colored progress bar

نوار های پیشرفت راه راه (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]

تصویر زیر را مشاهده کنید:

striped progress bar

نوار های پیشرفت متحرک (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]

خروجی این مثال تصویر زیر است:

animated progress bar

نوارهای پیشرفت متصل به هم (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]

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

multipe progress bar
دسته بندی آموزش bootstrap
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.