BOOTSTRAP 4 – PROGRESS BAR (İLERLEME ÇUBUKLARI)

Bu yazımızda Bootstrap progress bar nedir, ne işe yarar, nasıl kullanılır gibi konuları öğreneceğiz. Progress bar yani ilerleme çubuklarını hepimiz görmüşüzdür. Örneğin bilgisayarımızda bir dosyayı kopyalarken, taşırken veya silerken işlemin toplamda ne kadar sürede tamamlanacağı veya ne kadar süre kaldığını gösteren ilerleme çubukları vardır. İşte bunlara progress bar diyoruz. Sadece Html ve Css kullanarak da progress bar yapabiliyoruz ama bu yazımızda Bootstrap class’larını kullanarak nasıl yapabileceğimize bakacağız.

 ⇒  Bootstrap progress bar oluşturmak için yapmamız gerekenler:

  • İç içe 2 tane <div> oluşturuyoruz. 
  • Dıştaki div’in class’ına progress, içteki div’in class’ına progress-bar yazıyoruz.
  • Son olarak içteki div’in style attribute içerisinde css kodu yazıyoruz. Burda width özelliğine vereceğimiz değer, progress bar’ın dolum oranını belirliyor. Örneğin width özelliğine 80% değerini verirsek, progress bar’ın 80%‘i dolu görünecektir.

 ⇒  Bootstrap class’larını kullanarak en basit haliyle progress bar şu şekilde yapılır.

Görünümü

bootstrap-progress-bar-kullanimi

Gördüğünüz gibi içteki div’in css özelliklerinden width özelliğine 40% değerini verdiğimiz için, progress bar’ın 40%’ı dolu görünüyor.

 ⇒  Progress bar’ın yüzde kaçının dolu olduğunu metin olarak da göstermek isterseniz, içteki div’in içerisine metin olarak yazabilirsiniz.

Örneğin;

Görünümü

bootstrap-progress-bar

 ⇒  Progress bar’ın varsayılan yükseklik değeri 16px‘dir. Eğer yüksekliğini arttırmak veya azaltmak isterseniz, içteki ve dıştaki div’in css özelliklerinden height özelliğine aynı yükseklik değerini vermelisiniz. 

Örneğin 30px yüksekliğinde progress bar oluşturmak için şu şekilde yazmalısınız.

 ⇒  Bootstrap ile oluşturulan progress bar’ın varsayılan rengi mavi’dir. Renk class’larını kullanarak farklı renklerde progress bar oluşturabiliriz. 

Bootstrap progress bar renk class’ları şunlardır:

  • bg-success
  • bg-info
  • bg-warning
  • bg-danger
  • bg-white
  • bg-secondary
  • bg-light
  • bg-dark

Bu renk class’ları ile progress bar oluşturalım ve uygulamalı olarak görelim. Kodlarımız şu şekilde;

Görünümü

bootstrap-ilerleme-cubuklari

 ⇒  Progress bar’ın arkaplan renginin çizgili bir şekilde oluşmasını istiyorsanız, içteki div’in class’ına progress-bar-striped yazmalısınız.

Görünümü

bootstrap-ilerleme-cubuklari-kullanimi

 ⇒  Progress bar’ın animasyonlu bir şekilde oluşmasını istiyorsanız, içteki div’in class’ına progress-bar-striped ve progress-bar-animated class’larını yazmalısınız.

Görünümü

bootstrap-progress-bar-kullanimi

 ⇒  Birden fazla progress bar’ı aynı div içerisinde kullanabiliriz. Örneğin;

Görünümü

bootstrap-progress-bar-classes

Umarım sizin için faydalı bir yazı olmuştur.  

Farklı bir yazımda görüşmek üzere.

2 Yorum

  1. kubilay Eylül 6, 2019 Cevapla
    • admin Eylül 6, 2019

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link