Πρόοδος

Τεκμηρίωση και παραδείγματα για τη χρήση προσαρμοσμένων γραμμών προόδου Bootstrap που διαθέτουν υποστήριξη για στοιβαγμένες γραμμές, κινούμενα φόντο και ετικέτες κειμένου.

Σε αυτήν την σελίδα

Πως δουλεύει

Τα στοιχεία προόδου είναι κατασκευασμένα με δύο στοιχεία HTML, μερικά CSS για να ορίσετε το πλάτος και μερικά χαρακτηριστικά. Δεν χρησιμοποιούμε το στοιχείο HTML5<progress> , διασφαλίζοντας ότι μπορείτε να στοιβάζετε γραμμές προόδου, να τις κάνετε κίνηση και να τοποθετείτε ετικέτες κειμένου πάνω τους.

Χρησιμοποιούμε το .progressως περιτύλιγμα για να υποδείξουμε τη μέγιστη τιμή της γραμμής προόδου.
Χρησιμοποιούμε το εσωτερικό .progress-barγια να υποδείξουμε την πρόοδο μέχρι στιγμής.
.progress-barΑπαιτεί ένα ενσωματωμένο στυλ, μια τάξη βοηθητικού προγράμματος ή προσαρμοσμένο CSS για να ορίσετε το πλάτος τους .
Απαιτεί .progress-barεπίσης ορισμένα roleκαι ariaχαρακτηριστικά για να γίνει προσβάσιμο, συμπεριλαμβανομένου ενός προσβάσιμου ονόματος (χρησιμοποιώντας aria-label, aria-labelledby, ή παρόμοιο).

Συνδυάστε τα όλα μαζί και έχετε τα ακόλουθα παραδείγματα.

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Το Bootstrap παρέχει μια χούφτα βοηθητικά προγράμματα για τη ρύθμιση του πλάτους . Ανάλογα με τις ανάγκες σας, αυτά μπορεί να βοηθήσουν στη γρήγορη διαμόρφωση της προόδου.

html

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

Ετικέτες

Προσθέστε ετικέτες στις γραμμές προόδου σας τοποθετώντας κείμενο μέσα στο .progress-bar.

25%

html

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

Υψος

Ορίζουμε μόνο μια heightτιμή στο .progress, οπότε αν αλλάξετε αυτήν την τιμή, το εσωτερικό .progress-barθα αλλάξει αυτόματα ανάλογα το μέγεθος.

html

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" 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" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Φόντο

Χρησιμοποιήστε κλάσεις βοηθητικού προγράμματος παρασκηνίου για να αλλάξετε την εμφάνιση μεμονωμένων γραμμών προόδου.

html

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" 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" aria-label="Info example" 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" aria-label="Warning example" 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" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες

Η χρήση χρώματος για να προσθέσετε νόημα παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί στους χρήστες βοηθητικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (π.χ. το ορατό κείμενο), είτε περιλαμβάνονται με εναλλακτικά μέσα, όπως πρόσθετο κείμενο που είναι κρυμμένο με την .visually-hiddenτάξη.

Πολλαπλές μπάρες

Συμπεριλάβετε πολλές γραμμές προόδου σε ένα στοιχείο προόδου, εάν χρειάζεστε.

html

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

Ριγέ

Προσθέστε .progress-bar-stripedσε οποιοδήποτε .progress-barγια να εφαρμόσετε μια λωρίδα μέσω διαβάθμισης CSS πάνω από το χρώμα φόντου της γραμμής προόδου.

html

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" 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" aria-label="Success striped example" 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" aria-label="Info striped example" 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" aria-label="Warning striped example" 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" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Κινούμενες ρίγες

Η ριγέ κλίση μπορεί επίσης να κινηθεί. Προσθέστε .progress-bar-animatedστο για .progress-barνα κάνετε κίνηση των λωρίδων από δεξιά προς τα αριστερά μέσω κινούμενων εικόνων CSS3.

html

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

CSS

Μεταβλητές

Προστέθηκε στην έκδοση 5.2.0

Ως μέρος της εξελισσόμενης προσέγγισης μεταβλητών CSS του Bootstrap, οι γραμμές προόδου χρησιμοποιούν πλέον τοπικές μεταβλητές CSS .progressγια βελτιωμένη προσαρμογή σε πραγματικό χρόνο. Οι τιμές για τις μεταβλητές CSS ορίζονται μέσω Sass, επομένως η προσαρμογή Sass εξακολουθεί να υποστηρίζεται.

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Μεταβλητές Sass

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Βασικά καρέ

Χρησιμοποιείται για τη δημιουργία κινούμενων εικόνων CSS για .progress-bar-animated. Περιλαμβάνεται στο scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}