HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap- voortgangsbalken

❮ Vorig Volgende ❯

Basisvoortgangsbalk

Een voortgangsbalk kan worden gebruikt om een ​​gebruiker te laten zien hoe ver hij/zij is in een proces.

Bootstrap biedt verschillende soorten voortgangsbalken.

Een standaard voortgangsbalk in Bootstrap ziet er als volgt uit:

70% voltooid

Om een ​​standaard voortgangsbalk te maken, voegt u een .progressklasse toe aan een <div>element:

Voorbeeld

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

Opmerking: voortgangsbalken worden niet ondersteund in Internet Explorer 9 en eerder (omdat ze CSS3-overgangen en animaties gebruiken om sommige van hun effecten te bereiken).

Opmerking: om de toegankelijkheid te verbeteren voor mensen die schermlezers gebruiken, moet u de aria-*-kenmerken opnemen.

Voortgangsbalk met label

Een voortgangsbalk met een label ziet er als volgt uit:

70%

Verwijder de .sr-onlyklas uit de voortgangsbalk om een ​​zichtbaar percentage weer te geven:

Voorbeeld

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

Gekleurde voortgangsbalken

Contextuele klassen worden gebruikt om "betekenis door middel van kleuren" te geven.

De contextuele klassen die kunnen worden gebruikt met voortgangsbalken zijn:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
40% Voltooid (succes)
50% Compleet (info)
60% voltooid (waarschuwing)
70% Compleet (gevaar)

Het volgende voorbeeld laat zien hoe u voortgangsbalken maakt met de verschillende contextuele klassen:

Voorbeeld

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

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

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

Gestreepte voortgangsbalken

Voortgangsbalken kunnen ook worden gestreept:

40% Voltooid (succes)
50% Compleet (info)
60% voltooid (waarschuwing)
70% Compleet (gevaar)

Voeg klasse .progress-bar-stripedtoe om strepen aan de voortgangsbalken toe te voegen:

Voorbeeld

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

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

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

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

Geanimeerde voortgangsbalk

40%

Voeg klasse .activetoe om de voortgangsbalk te animeren:

Voorbeeld

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

Gestapelde voortgangsbalken

Voortgangsbalken kunnen ook worden gestapeld:

Vrije ruimte
Waarschuwing
Gevaar

Maak een gestapelde voortgangsbalk door meerdere balken in dezelfde te plaatsen <div class="progress">:

Voorbeeld

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>

Test jezelf met oefeningen

Oefening:

Voeg de juiste klassen toe om ervoor te zorgen dat deze HTML-code zich als een voortgangsbalk gedraagt.

<div class="">
  <div class=""
    role="progressbar"
    style="width:70%">
  </div>
</div>


❮ Vorig Volgende ❯