Altın Konu Bootstrap 5 İlerleme Çubukları Nasıl Oluşturulur?

[gameserverplay]

Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!

Bootstrap İlerleme çubukları, becerileri, projelerin tamamlanma yüzdesini sergilemek ve benzer amaçlar için kullanılır. Bootstrap 5, önceki sürümlere benzer farklı ilerleme çubuğu stillerine sahiptir. Bu eğitimde, Bootstrap 5'te sunulan her bir ilerleme çubuğu türü hakkında daha fazla bilgi edinelim.

Bootstrap 5 İlerleme Çubukları Eğitimi​

1. HTML5 ilerleme çubukları
2. Bootstrap ilerleme çubukları CSS sınıfları
3. Varsayılan ilerleme çubukları oluşturma
4. Farklı arka plan renklerine sahip ilerleme çubukları
5. İlerleme çubuklarına etiket ekleme
6. Çoklu ilerleme çubukları
7. Çizgili stil
8. Animasyonlu çizgili stil
9. Yüksekliğin ayarlanması

Her konuyu ayrıntılı olarak tartışalım.

1. HTML5 İlerleme Çubukları​

HTML5'in, çoğu durumda yeterli olan yatay ilerleme çubukları oluşturmak için varsayılan bir <ilerleme> etiketine sahip olduğunu unutmayın. HTML5 ilerleme çubuklarının kod bloğu aşağıdadır.

[CODE lang="html" title="HTML Kodu"]<progress value="50" max="100">50 %</progress><br />
<progress value="60" max="100">60 %</progress><br />
<progress value="70" max="100">70 %</progress><br />
<progress value="80" max="100">80 %</progress><br />[/CODE]

2.CSS Bootstrap İlerleme Çubuklarında Kullanılan Sınıflar​

Bootstrap 4, ilerleme çubukları oluşturmak için aşağıdaki CSS sınıflarını kullanır:

• İlerleme çubuğunun dış sarmal ayıcısı için ".progress" sınıfı kullanılır. Sarmalayıcı içinde birden çok ilerleme çubuğu içermek için kullanılır.
• ".progress-bar" sınıfı, ilerleme yüzdesini göstermek için gerçek ilerleme çubuğu oluşturmak için kullanılır.
• Her ilerleme çubuğunun genişliği, ek CSS sınıflarıyla açıkça tanımlanmalıdır.
• Ek olarak, okunabilirlik amacıyla ilerleme çubuğuna "role" ve "aria" öznitelikleri ekleyebilirsiniz.
• "Aria-ValueNow" mevcut ilerleme değerini belirtmek için kullanılır, "Aria-ValueMin" 0 olan minimum değerdir ve "ARIA-ValueMax" 100 olan maksimum değerdir.

Bu sınıfları kullanarak bazı örnekler oluşturalım.

3. Varsayılan İlerleme Çubukları​

Varsayılan ilerleme çubuğu, ilerlemeyi göstermek için birincil rengi ve arka plan için açık gri rengi kullanır. Aşağıda %0, 25, 50, 75 ve %100 ilerleme ile beş ilerleme çubuğu oluşturma kodu bulunmaktadır.

[CODE lang="css" title="CSS Kodu:"]<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>[/CODE]

Tarayıcıda aşağıdaki gibi görünecektir:

​

Yukarıda belirtildiği gibi, her ilerleme çubuğu, tamamlanmayı göstermek için açıkça tanımlanmış bir genişliğe sahip olmalıdır. Bu amaçla satır içi stili veya yardımcı program sınıflarını kullanabilirsiniz. Fayda boyutlandırma sınıflarını sırasıyla w-25, w-50 ve w-75 ile %25, %50 ve %75 olarak kullandık. % 100 genişlik için "genişlik:% 100" ile satır içi stil kullandık.

Ayrıca, tüm çubukların aynı satırda gösterilmesini önlemek için ilerleme çubukları arasına manuel satır sonu eklemeyi unutmayın.

4. Arka Plana Sahip İlerleme Çubukları​

Diğer birçok bileşene benzer şekilde, arka planı başarı, uyarı, bilgi, tehlike, koyu veya ikincil renklere değiştirmek için arka plan yardımcı program sınıflarını kullanabilirsiniz.

[CODE lang="css" title="CSS Kodu:"]<div class="progress">
<div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div>
</div>[/CODE]

İlerleme çubukları aşağıdaki gibi görünecektir:

​

Birincil rengin varsayılan değer olduğunu unutmayın, bu nedenle ilerlemenin birincil renkte olmasını isteyip istemediğinizi belirtmenize gerek yoktur. Ayrıca, ilerleme çubuğunun arka planı da açık renkte olduğu için açık arka plan rengini kullanamazsınız.

İlerleme çubuğunun arka planını değiştirmek için dış ilerleme sarmalayıcısındaki arka plan yardımcı program sınıflarını kullanabilirsiniz. Örneğin, aşağıdaki kod, açık gri yerine kırmızı (tehlike) renkli arka plana sahip ilerleme çubuğunu üretecektir.

[CODE lang="css" title="CSS Kodu:"]<div class="progress bg-danger">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>[/CODE]

Sonuç, tarayıcıda aşağıdaki gibi görünecektir:​

5. Etiketli İlerleme Çubukları​

Etiketleri ilerleme çubuğuna eklemek istiyorsanız, metni her ilerleme çubuğunun kapanış </div> etiketinden önce eklemeniz yeterlidir. Aşağıda %75 tamamlamayı gösteren bir örnek verilmiştir:

[CODE lang="css" title="CSS Kodu:"]<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div>
</div>[/CODE]

Etiket, aşağıdaki gibi orta hizalama ile çubuğun üstünde gösterilecektir:

​

6. Çoklu İlerleme Çubukları​

Tek bir dış sarmalayıcıya birden fazla ilerleme çubuğu eklemek, tüm çubukları tek bir satırda oluşturur.

[CODE lang="css" title="CSS Kodu:"]<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
</div>[/CODE]

Çoklu ilerleme çubukları aşağıdaki gibi görünecektir:

​

7. Çizgili İlerleme Çubukları​

".progress-bar-striped" sınıfı, çizgili ilerleme çubukları oluşturmak için kullanılır (farklı renkleri göstermek için arka plan yardımcı programı sınıfı kullanılır).

[CODE lang="css" title="CSS Kodu:"]<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>[/CODE]

Çizgili ilerleme çubukları aşağıdaki gibi görünmelidir:

​

8. Hareketli Çizgili İlerleme Çubukları​

Son seçenek, ".progress-bar-animated" sınıfını kullanarak şeridi canlandırmaktır.

[CODE lang="css" title="CSS Kodu:"]<div class="progress">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div>
</div>[/CODE]

Bu, yeşil çizgili animasyonlu bir ilerleme çubuğu oluşturacaktır. Varsayılan çubukları değil, yalnızca çizgili çubukları canlandırabileceğinizi unutmayın.

9. İlerleme Çubuklarının Yüksekliğini veya Kalınlığını Değiştirme​

Varsayılan olarak, ilerleme çubukları 1rem yüksekliğe sahip olacaktır. ".progress-bar" sınıfı içindeki satır içi stili kullanarak yüksekliği değiştirebilirsiniz ve dış sarmalayıcı otomatik olarak buna göre hizalanacaktır. 0.rem ve 30px yüksekliğinde iki çubuk oluşturalım:

 

[bLastX]

Paylaşım için teşekkürler.

 

[gameserverplay]

Paylaşım için teşekkürler.

Rica ederim

 

[Ectoor]

Paylaşım için teşekkürler

 

[gameserverplay]

Paylaşım için teşekkürler

rica ederim