Bootstrap 4 İ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.
Varsayılan bir ilerleme çubuğu oluşturmak için, .progressbir kapsayıcı öğesine bir sınıf ekleyin ve .progress-barsınıfı, onun alt öğesine ekleyin. widthİlerleme çubuğunun genişliğini ayarlamak için CSS özelliğini kullanın :
Örnek
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
İlerleme Çubuğu Yüksekliği
İlerleme çubuğunun yüksekliği varsayılan olarak 16 pikseldir. Değiştirmek için CSS heightözelliğini kullanın. İlerleme kabı ve ilerleme çubuğu için aynı yüksekliği ayarlamanız gerektiğini unutmayın:
Örnek
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
İlerleme Çubuğu Etiketleri
Görünür yüzdeyi göstermek için ilerleme çubuğunun içine metin ekleyin:
Örnek
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Renkli İlerleme Çubukları
Varsayılan olarak, ilerleme çubuğu mavidir (birincil). Rengini değiştirmek için Bootstrap 4 bağlamsal arka plan sınıflarından herhangi birini kullanın:
Örnek
<!-- 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>
Çizgili İlerleme Çubukları
.progress-bar-stripedİlerleme çubuklarına şerit eklemek için sınıfı kullanın :
Örnek
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Hareketli İlerleme Çubuğu
.progress-bar-animatedİlerleme çubuğunu canlandırmak için sınıfı ekleyin :
Örnek
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Çoklu İlerleme Çubuğu
İlerleme çubukları da istiflenebilir:
Örnek
<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>