En son web geliştirme öğreticiler
 

Bootstrap Progress Bars

❮ Önceki Sonraki Bölüm ❯

Temel İlerleme Çubuğu

Bir ilerleme çubuğu kadar o boyunca / o bir süreçte nasıl bir kullanıcı göstermek için kullanılabilir.

Bootstrap ilerleme çubukları çeşitli sağlar.

Bir varsayılan ilerleme çubuğu Bootstrap şuna benzer:

Komple% 70

Varsayılan bir ilerleme çubuğu oluşturmak için, bir ekleme .progress a sınıfı <div> elemanı:

Örnek

<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>
Kendin dene "

Not: İlerleme çubukları Internet Explorer 9'da desteklenen ve olmayan daha önceki (onların etkilerinin bazılarını elde etmek CSS3 geçişleri ve animasyon kullandıkları için).

Not: Ekran okuyucu kullanan kişiler için erişilebilirliği iyileştirmek yardımcı olmak için, içermelidir aria-* nitelikler.

Etiketli İlerleme Çubuğu

bir etiket ile bir ilerleme çubuğu şuna benzer:

% 70

Kaldır .sr-only görünür bir yüzdesini göstermek için ilerleme çubuğundan sınıf:

Örnek

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

Renkli İlerleme Barlar

Bağlamsal sınıflar sağlamak için kullanılan "meaning through colors" .

ilerleme çubuklarıyla kullanılabilir bağlamsal sınıfları şunlardır:

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

Aşağıdaki örnekte, farklı bağlamsal sınıflarıyla ilerleme çubukları nasıl oluşturulacağını gösterir:

Örnek

<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>
Kendin dene "

Çizgili İlerleme Barlar

İlerleme çubukları da çizgili olabilir:

% 40 Tamamlandı (success)
% 50 Tamamlandı (info)
% 60 tam (warning)
% 70 tam (danger)

Sınıf ekleyin .progress-bar-striped ilerleme barlara şeritler eklemek için:

Örnek

<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>
Kendin dene "

Hareketli İlerleme Çubuğu

İşte bir olan "animated" ilerleme çubuğu:

% 40

Sınıf ekleyin .active ilerleme çubuğu animasyon uygulamak için:

Örnek

<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>
Kendin dene "

Yığılmış İlerleme Barlar

İlerleme çubukları da istiflenmiş olabilir:

Boş alan
Uyarı
Tehlike

Aynı birden çok çubukları yerleştirerek bir yığın ilerleme çubuğu oluşturma <div class="progress"> :

Örnek

<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>
Kendin dene "

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»


❮ Önceki Sonraki Bölüm ❯