%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده
سبد (0)

تبلیغات

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

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

Wiki

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

بوت استرپ چندین نوع نوار پیشرفت را به ما ارائه می دهد.

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

برای ایجاد یک نوار پیشرفت، کلاس progress. را به یک عنصر <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>

خودتان امتحان کنید »
Note

نکته: نوارهای پیشرفت در اینترنت اکسپلورر9 و ورژن های قبلی آن پشتیبانی نمی شود(زیرا آنها از transition ها و animation ها برای ایجاد بعضی افکت های خود استفاده می کنند).

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

Wiki

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

برای نشان دادن  درصد در نوار پیشرفت، کلاس sr-only. را حذف کنید:

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

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

خودتان امتحان کنید »

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

Wiki

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

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

  • progress-bar-success.
  • progress-bar-info.
  • progress-bar-warning.
  • progress-bar-danger.

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

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

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

خودتان امتحان کنید »

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

Wiki

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

برای ایجاد نوارهای پیشرفت راه راه می توانید کلاس 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>

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

خودتان امتحان کنید »

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

Wiki

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

برای ایجاد انیمیشن بر روی نوارهای پیشرفت می توانید کلاس active. را اضافه کنید:

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

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

خودتان امتحان کنید »

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

Wiki

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

ایجاد یک نوار پیشرفت دسته بندی شده با قرار دادن نوارها درون یک <div class="progress">:

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

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

خودتان امتحان کنید »

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی