Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS jarayon indikatorlari

ULASHISH

Oddiy progress bar

Progress bar (jarayon indikatori) foydalanuvchiga jarayonning qaysi bosqichida ekanini ko‘rsatish uchun ishlatilishi mumkin.

Bootstrap progress barlarning bir necha turini taqdim etadi.

Bootstrap’dagi standart progress bar quyidagicha ko‘rinadi:

70% Complete

Standart progress bar yaratish uchun <div> elementiga .progress klassini qo‘shing:

Misol

<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>
O‘zingiz sinab ko‘ring »

Eslatma: Progress barlar Internet Explorer 9 va undan oldingi versiyalarda qo‘llab-quvvatlanmaydi (chunki ular ba’zi effektlarga erishish uchun CSS3 o‘tishlari (transitions) va animatsiyalaridan foydalanadi).

Eslatma: Ekran o‘quvchi dasturlardan foydalanadigan odamlar uchun qulaylikni (accessibility) oshirish maqsadida aria-* atributlarini qo‘shishingiz kerak.

Yorliqli progress bar

Yorliqli progress bar quyidagicha ko‘rinadi:

70%

Foizni ko‘rinadigan qilib ko‘rsatish uchun progress bardan .sr-only klassini olib tashlang:

Misol

<div class="progress">   <div class="progress-bar" role="progressbar" aria-valuenow="70"   aria-valuemin="0" aria-valuemax="100" style="width:70%">     70%   </div> </div>
O‘zingiz sinab ko‘ring »

Rangli progress barlar

Kontekstual klasslar "ranglar orqali ma’no berish" uchun ishlatiladi.

Progress barlar bilan ishlatish mumkin bo‘lgan kontekstual klasslar:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
40% Complete (success)
50% Complete (info)
60% Complete (warning)
70% Complete (danger)

Quyidagi misolda turli kontekstual klasslar yordamida progress barlarni qanday yaratish ko‘rsatilgan:

Misol

<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>
O‘zingiz sinab ko‘ring »

Yo‘l-yo‘l progress barlar

Progress barlar yo‘l-yo‘l ham bo‘lishi mumkin:

40% Complete (success)
50% Complete (info)
60% Complete (warning)
70% Complete (danger)

Progress barlarga yo‘l-yo‘l chiziqlar qo‘shish uchun .progress-bar-striped klassini qo‘shing:

Misol

<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>
O‘zingiz sinab ko‘ring »

Animatsiyali progress bar

40%

Progress barni animatsiyali qilish uchun .active klassini qo‘shing:

Misol

<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>
O‘zingiz sinab ko‘ring »

Ketma-ket joylashtirilgan progress barlar

Progress barlarni bitta chiziqda ketma-ket joylashtirish ham mumkin:

Free Space
Warning
Danger

Bir nechta barni bitta <div class="progress"> ichiga joylashtirib, ketma-ket joylashgan progress bar yarating:

Misol

<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>
O‘zingiz sinab ko‘ring »

Mashqlar yordamida o‘zingizni sinang

Mashq:

Ushbu HTML kod progress bar kabi ishlashi uchun to‘g‘ri klasslarni qo‘shing.

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>

Mashqni boshlash


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish