Bootstrap - İlerleme Çubukları

Bu bölümde, Bootstrap ilerleme çubukları anlatılmaktadır. İlerleme çubuklarının amacı, varlıkların yüklendiğini, devam ettiğini veya sayfadaki öğelerle ilgili gerçekleşen bir eylem olduğunu göstermektir.

İlerleme çubukları, efektlerinden bazılarını elde etmek için CSS3 geçişlerini ve animasyonlarını kullanır. Bu özellikler, Internet Explorer 9 ve altı veya Firefox'un eski sürümlerinde desteklenmez. Opera 12, animasyonları desteklemez.

Varsayılan İlerleme Çubuğu

Temel bir ilerleme çubuğu oluşturmak için -

Sınıfına sahip bir <div> ekleyin .progress.
Sonra, yukarıdaki <div> içerisine, sınıfına sahip boş bir <div> .progress-bar.
Yüzde olarak ifade edilen genişliğe sahip bir stil niteliği ekleyin. Örneğin, style = "% 60"; ilerleme çubuğunun% 60 olduğunu gösterir.

Aşağıda bir örnek görelim -

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Alternatif İlerleme Çubuğu

Farklı stillere sahip bir ilerleme çubuğu oluşturmak için -

Sınıfına sahip bir <div> ekleyin .progress.
Sonra, yukarıdaki <div> içerisine, sınıfına sahip boş bir <div> .progress-bar ve sınıf progress-bar-* nerede * olabilir success, info, warning, danger.
Yüzde olarak ifade edilen genişliğe sahip bir stil niteliği ekleyin. Örneğin, style = "% 60"; ilerleme çubuğunun% 60 olduğunu gösterir.

Aşağıda bir örnek görelim -

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </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: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Çizgili İlerleme Çubuğu

Şeritli bir ilerleme çubuğu oluşturmak için -

Sınıfına sahip bir <div> ekleyin .progress ve .progress-striped.
Sonra, yukarıdaki <div> içerisine, sınıfına sahip boş bir <div> .progress-bar ve sınıf progress-bar-* nerede * olabilir success, info, warning, danger.
Yüzde olarak ifade edilen genişliğe sahip bir stil niteliği ekleyin. Örneğin, style = "% 60"; ilerleme çubuğunun% 60 olduğunu gösterir.

Aşağıda bir örnek görelim -

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Animasyonlu İlerleme Çubuğu

Animasyonlu bir ilerleme çubuğu oluşturmak için -

Sınıfına sahip bir <div> ekleyin .progress ve .progress-striped. Ayrıca sınıf ekle.active -e .progress-striped.
Sonra, yukarıdaki <div> içerisine, sınıfına sahip boş bir <div> .progress-bar.
Yüzde olarak ifade edilen genişliğe sahip bir stil niteliği ekleyin. Örneğin, style = "% 60"; ilerleme çubuğunun% 60 olduğunu gösterir.

Bu, şeritleri sağdan sola hareketlendirecektir.

Aşağıda bir örnek görelim -

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Yığılmış İlerleme Çubuğu

Hatta birden fazla ilerleme çubuğu istifleyebilirsiniz. Birden çok ilerleme çubuğunu aynı yere yerleştirin.progress bunları aşağıdaki örnekte görüldüğü gibi istiflemek için -

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>