آریا بوت استرپ | آموزش

کتابخانه بوت استرپ دوگانه چپ چین و راست چین
ارائه شده توسط شرکت توسعه فن آوری آریا وندیداد

آریا بوت استرپ، بر پایه بوت استرپ نسخه 4.4.1

آریا بوت استرپ بوت استرپ راست چین بوت استرپ
arya bootstrap bootstrap-rtl bootstrap
bootstrap 4.4.1 2020-02-02
نوار پیشرفت (Progress Bar) در بوت استرپ

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

نوار پیشرفت برای نشان دادن میزان پیشرفت یک عملیات است و به کاربر نشان می دهد که عملیات در چه مرحله ای قرار دارد.
آموزش کامپوننتهای بوت استرپ 1398/09/18 581 6 پیوند مستقیم

نوار پیشرفت (Progress Bar) در بوت استرپ
6

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

نوار پیشرفت برای نشان دادن میزان پیشرفت یک عملیات است و به کاربر نشان می دهد که عملیات در چه مرحله ای قرار دارد.

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

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

برای ایجاد یک نوار پیشرفت به صورت پیشفرض باید کلاس .progressرا به عنوان عنصر پدر مانند ظرفی که نوار پیشرفت در آن قرار می گیرد و کلاس .progress-bar   را به عنوان عنصر فرزند به تگ اعمال نمود.

همچنین جهت تنظیم عرض و درصد دادن به نوار پیشرفت می توان از خاصیت width  که از 0 تا 100 درصد تعیین می شود استفاده نمود.

 مانند تگ زیر :

<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>
70% Complete

 

نکته : در بوت استرپ 4 ارتفاع نوار پیشرفت به صورت پیشفرض ، مقدار 16 پیکسل است. می توان از خاصیت  height  برای تغییر ارتفاع به میزان دلخواه استفاده نمود.

توجه داشته باشید که مقدار ارتفاع  در عنصر پدر و عنصر یا عناصر فرزند،باید  به یک اندازه باشد.

 

 نمایش مقدار در نوار پیشرفت

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

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

 

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

در بوت استرپ نوار پیشرفت ها در حالت پیشفرض به رنگ آبی هستند اما می توان با استفاده از کلاس های رنگ که در آموزش گذشته به آن ها پرداخته ایم رنگ نوار پیشرفت ها را تغییر داد

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

<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>
40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

 

نوار پیشرفت راه راه یا هاشوردار

برای هاشوردار یا راه راه کردن نوار پیشرفت ها می توان از کلاس .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%">
    40% Complete (success)  
  </div>
</div>
40% Complete (success)

 

نوار پیشرفت متحرک

جهت متحرک کردن کردن نوار پیشرفت های هاشور دار باید کلاس progress-bar-animated  را  به کلاس نوار پیشرفت های هاشور دار اضافه نمایید مانند تگ زیر :

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>
40%

 

نوار پیشرفت چندگانه

با قرار دادن چندین عنصر با کلاس .progress-bar درون یک عنصر پدر با کلاس .progress که هر کدام از عناصر فرزند درصدی یا عرضی بین 0 تا 100 دارند، یک نوار پیشرفت  چندگانه و با رنگ های متفاوت می توان ایجاد نمود مانند تگ زیر:

<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>
Free Space
Warning
Danger
ثبت کننده:حسین خزائی تاریخ ثبت:1398/09/18
ویرایش کننده:حسین خزائی تاریخ ویرایش:1399/06/26

موضوع: آموزش کامپوننتهای بوت استرپ
تعداد بازدید:581


تا کنون دیدگاهی نوشته نشده، اولین نفر باشید که دیدگاهش را بیان می کند.

دیدگاه شما

کاربر گرامی خواهشمند است به موارد زیر دقت فرمایید:
• لطفا فارسی تایپ کنید و با حروف لاتین (فینگلیش) ننویسید.
• دیدگاه های ارائه شده پس از بازبینی منتشر می‌شود.
• آدرس ایمیل در سایت نمایش داده نمی شود.