Bootstrap Progress Barları (İlerleme Çubukları)

BOOTSTRAP İLERLEME ÇUBUKLARI (PROGRESS BARLARI) NASIL OLUŞTURULUR?

İlerleme çubuklarını(Progress barlarını),progress sınıfına sahip bir <div> etiketi içine ekleyeceğimiz bir başka <div> etiketine
"progress bar" sınıfını ekleyerek oluşturabiliriz.

Progress bar'ın "width"özelliğine vereceğimiz yüzde oranı ilerleme çubuğunda görsel olarak ne kadar yer kaplanacağını belirler.

İlerleme çubuğu(Progress bar)oluşturmak için bazı parametreler vardır. Bunlar:

aria-valuenow : Progress barın değeri
aria-valuemin : Minimum progress bar değeri
aria-valuemax : Maksimum progress bar değeri
style : width değeri vererek görsel olarak değeri ilerletmeye yarar.

%80 yer kaplandığını veya ilerlendiğini gösteren bir ilerleme çubuğunu aşağıdaki kodları yazarak oluşturabiliriz.

</div>

Width değerine %40 verdiğimizde ise ilerleme çubuğu şu şekilde olur :

Height özelliği ise ilerleme çubuğunun yüksekliğini belirler.

Height değeri 10px olan bir ilerleme çubuğunu aşağıdaki kodları yazarak oluşturabiliriz :

</div>

Height değerine 30px verdiğimizde ise ilerleme çubuğu şu şekilde olur :

Ne kadar yer kaplandığı veya ilerlendiği çubuk üzerinde gösterilebilir.
Göstermek istediğimiz değeri koda ekleyerek oluşturabiliriz.

</div>

ANİMASYONLU İLERLEME ÇUBUĞU

"progress-bar progress-bar-striped active" sınıfını kullanarak animasyonlu ilerleme çubuğu oluşturabiliriz.

</div>

ÇİZGİLİ İLERLEME ÇUBUĞU

"progress-bar progress-bar-striped" sınıfını kullanarak çizgili ilerleme çubuğu oluşturabiliriz.

<div class="progress-bar progress-bar-striped" role="progressbar"

aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">80%</div>

</div>

RENKLİ İLERLEME ÇUBUKLARI

İlerleme çubuğu başlangıçta mavi renkli olarak ayarlıdır,çeşitli sınıflar kullanarak rengini değiştirebiliriz.

Çeşitli renk sınıfları vardır :

. progress-bar-success

. progress-bar-info

. progress-bar-warning

. progress-bar-danger

Aşağıdaki örnek kodla farklı renkte ilerleme çubukları oluşturabiliriz.

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">%40 futbol </div>

</div>

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"style="width:50%">%50 voleybol</div>

</div>

<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"aria-valuemin="0" aria-valuemax="100" style="width:60%">%60 basketbol</div>

</div>

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

</div>

ÇOKLU İLERLEME ÇUBUĞU

Çoklu ilerleme çubuğunda tek çubuk üzerinde birden fazla şeyin kapladığı alanı gösterebiliriz.

style="width:40%">Futbol</div><div> class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">Voleybol</div><div> class="progress-bar progress-bar-danger" role="progressbar" style="width:50%">Basketbol</div>

</div>

30 px yüksekliğinde çoklu ve animasyonlu bir ilerletme çubuğunu aşağıdaki kodlarla yazabiliriz.

<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width:45%">Futbol</div>

<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" style="width:50%">Voleybol</div>

<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" style="width:100%">Basketbol</div>

</div>

HAZIRLAYAN : SABİHA GÖKÇEN TUN

Page updated

Report abuse