0

بلاگ

آموزشگاه ابراهیمی نژاد بلاگ مقالات bootstrap نوارهای پیشرفت در بوت استرپ4

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

29/04/1398
ارسال شده توسط
bootstrap
9.2k بازدید

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

با سلام و وقت بخیر به شما همراهان همیشگی

با مقاله ای در خصوص نحوه نمایش نوارهای پیشرفت در بوت استرپ 4 در خدمتتون هستیم.

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

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

 

پراگرس بار - سایت ابراهیمی نژاد

 

برای ایجاد یک پراگس بار به صورت پیش فرض، از کلاس .progress در تگ والد و هم چنین یک کلاس .progress-bar در المان فرزند استفاده می کنیم.  از ویژگی width  نیز برای مشخص کردن مقدار ناحیه رنگی درون پراگس بار استفاده می شود.

 

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

 

Progress Bar Height

 

ارتفاع پراگس بار

ارتفاع نوار پیشرفت به صورت پیش فرض 16 px است . اما بوت استرپ این امکان را به شما می دهد که ارتفاع آن را به صورت دلخواه تغییر دهید. برای تغییر ارتفاع باید ویژگی height  را هم به المان progress  و هم به المان progress bar  اضافه کنید.
<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

 

Progress Bar Labels

شما می توانید داخل پراگس بار ،درصد پیشرفت و یا متن خاصی را نمایش دهید.

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

 

Colored Progress Bars

بوت استرپ 4 این امکان را در اختیار ما قرار میدهد که نوارهای رنگی را به کاربر نمایش دهیم. به صورت دیفالت رنگ پراگس بار آبی است اما می توان رنگ های دیگری را به آن اعمال کنیم.
<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>

<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>

<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>

<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>

<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>

<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>

<!-- Grey -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>

<!-- Light Grey -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>

<!-- Dark Grey -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Striped Progress Bars

با اضافه کردن کلاس .progress-bar-striped  می توانیم پراگس بارهای بافت دار داشته باشیم.
<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

ادامه‌ی آموزش فقط برای اعضاء سایت نمایش داده میشود

عضویت رایگان

[member]

Animated Progress Bar

برای نمایش پراگس بارهای متحرک(حرکت استریپ ها) از کلاس .progress-bar-animated استفاده می شود.
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

 

 

Multiple Progress Bars

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

 

 

 

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

 

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

برای مشاهده مقاله های قبلی لطفا روی لینک کلیک نمایید.

“Button Groups در بوت استرپ 4”

[/member]

مطالب زیر را حتما مطالعه کنید

1 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

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