İlerlemek

Yığılmış çubuklar, hareketli arka planlar ve metin etiketleri için destek içeren Bootstrap özel ilerleme çubuklarını kullanmaya ilişkin belgeler ve örnekler.

Nasıl çalışır

İlerleme bileşenleri iki HTML öğesi, genişliği ayarlamak için bir miktar CSS ve birkaç nitelik ile oluşturulmuştur. İlerleme çubuklarını yığabilmenizi, canlandırabilmenizi ve üzerlerine metin etiketleri yerleştirebilmenizi sağlamak için HTML5 <progress>öğesini kullanmıyoruz .

.progressİlerleme çubuğunun maksimum değerini belirtmek için sarmalayıcı olarak kullanırız .
.progress-barŞimdiye kadarki ilerlemeyi belirtmek için iç kısmı kullanıyoruz .
Genişliklerini ayarlamak için .progress-barsatır içi stil, yardımcı program sınıfı veya özel CSS gerekir.
Ayrıca , erişilebilir kılmak için .progress-barbazı roleve nitelikler gerektirir.aria

Hepsini bir araya getirin ve aşağıdaki örneklere sahipsiniz.

<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" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" 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>

Bootstrap, genişliği ayarlamak için bir avuç yardımcı program sağlar . İhtiyaçlarınıza bağlı olarak bunlar, ilerlemeyi hızlı bir şekilde yapılandırmanıza yardımcı olabilir.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Etiketler

içine metin yerleştirerek ilerleme çubuklarınıza etiketler ekleyin .progress-bar.

%25

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

Yükseklik

Biz sadece heightüzerinde bir değer belirledik .progress, bu yüzden bu değeri değiştirirseniz iç kısım .progress-barotomatik olarak buna göre yeniden boyutlandırılacaktır.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Arka plan

Tek tek ilerleme çubuklarının görünümünü değiştirmek için arka plan yardımcı program sınıflarını kullanın.

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Çoklu çubuklar

Gerekirse, bir ilerleme bileşenine birden çok ilerleme çubuğu ekleyin.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Çizgili

İlerleme çubuğunun arka plan rengi üzerine CSS gradyanı aracılığıyla bir şerit uygulamak .progress-bar-stripediçin herhangi birine ekleyin ..progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></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"></div>
</div>

animasyonlu çizgiler

Çizgili degrade de canlandırılabilir. CSS3 animasyonları aracılığıyla sağdan sola şeritleri canlandırmak için .progress-bar-animatedekleyin ..progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>