Önyükleme İlerleme Çubukları
Temel İlerleme Çubuğu
Bir kullanıcıya bir süreçte ne kadar ilerlediğini göstermek için bir ilerleme çubuğu kullanılabilir.
Bootstrap, birkaç tür ilerleme çubuğu sağlar.
Bootstrap'ta varsayılan bir ilerleme çubuğu şöyle görünür:
Varsayılan bir ilerleme çubuğu oluşturmak için bir öğeye bir .progresssınıf ekleyin:<div>
Ö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>
Not: Internet Explorer 9 ve önceki sürümlerde ilerleme çubukları desteklenmez (çünkü bazı efektlerini elde etmek için CSS3 geçişlerini ve animasyonlarını kullanırlar).
Not: Ekran okuyucu kullanan kişilerin erişilebilirliğini iyileştirmeye yardımcı olmak için aria-* özniteliklerini eklemelisiniz.
Etiketli İlerleme Çubuğu
Etiketli bir ilerleme çubuğu şöyle görünür:
.sr-onlyGörünür bir yüzde göstermek için sınıfı ilerleme çubuğundan kaldırın :
Ö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>
Renkli İlerleme Çubukları
Bağlamsal sınıflar, "renkler aracılığıyla anlam" sağlamak için kullanılır.
İlerleme çubuklarıyla kullanılabilecek bağlamsal sınıflar şunlardır:
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
Aşağıdaki örnek, farklı bağlamsal sınıflarla ilerleme çubuklarının 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>
Çizgili İlerleme Çubukları
İlerleme çubukları da çizgili olabilir:
.progress-bar-stripedİlerleme çubuklarına şerit eklemek için sınıf ekleyin:
Ö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>
Hareketli İlerleme Çubuğu
.activeİlerleme çubuğunu canlandırmak için sınıf ekleyin :
Ö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>
Yığılmış İlerleme Çubukları
İlerleme çubukları da istiflenebilir:
Aynı öğeye birden çok çubuk yerleştirerek yığılmış bir ilerleme çubuğu oluşturun <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>