Bootstrap-Fortschrittsbalken

Im Allgemeinen ist die Fortschrittsanzeige ist eine grafische Benutzeroberfläche, die zur Visualisierung des Fortschritts des Computerbetriebs verwendet wird, z. B. beim Herunterladen von Dateien, beim Übertragen von Dateien, beim Anzeigen des Aktionsstatus für Benutzer oder beim Installieren von Dateien. Stellen Sie sich beispielsweise eine Aufgabe vor, die innerhalb eines Programms ausgeführt wird und deren Abschluss eine Weile dauern kann. Es gibt dem Benutzer einen Hinweis darauf, dass die Aufgabe ausgeführt wird, wie lange es dauern kann, bis sie abgeschlossen ist, wie viel Arbeit bereits erledigt wurde usw. Dies sind alles Aktivitäten, die mithilfe der Fortschrittsbalken angezeigt werden können.

Bootstrap stellt Fortschrittsbalken bereit, die CSS-Übergänge und Animationen verwenden, um einige Effekte für verschiedene Aktivitäten zu erzielen, wie im obigen Absatz angegeben. In diesem Tutorial werden die folgenden Themen erläutert, die mit Bootstrap-Fortschrittsbalken verwendet werden.

  • Standard-Fortschrittsbalken
  • Fortschrittsbalken mit Beschriftung
  • Alternative Fortschrittsbalken
  • Gestreifter Fortschrittsbalken
  • Animierter Fortschrittsbalken
  • Gestapelter Fortschrittsbalken
  • lesen Sie auch:

    • Bootstrap-Setup
    • Bootstrap-Typografie

    Um einen Fortschrittsbalken zu erstellen, wickeln Sie ihn einfach ein .Fortschritt Klasse innerhalb des div-Elements und als nächstes innerhalb eines anderen div-Elements hinzufügen .Fortschrittsanzeige Klasse.

    Die folgenden Beispiele zeigen die verschiedenen Techniken, die zum Implementieren der Fortschrittsbalken in Bootstrap verwendet werden. Wenn Sie Fragen dazu haben Bootstrap-Fortschrittsbalkenschreiben Sie es bitte in den Kommentarbereich.

    Bootstrap-Standardfortschrittsbalken

    Das folgende Beispiel zeigt die Erstellung eines Standard-Fortschrittsbalkens:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Default Progress Bar</h2>
    <div  >
       <div   role="progressbar" aria-valuenow="50"
          aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
       <span  >55% Complete</span>
       </div>
    </div>
    </div>
    </body>
    </html>
    
    • Beispiel für den Bootstrap-Standardfortschrittsbalken ausführen

    Beispiel für den Bootstrap-Standardfortschrittsbalken

    Bootstrap-Fortschrittsbalken mit Beschriftung

    Wir können einen Fortschrittsbalken erstellen, um den sichtbaren Prozentsatz anzuzeigen, indem wir einfach den entfernen Nur .sr Klasse im Fortschrittsbalken. Der Prozentsatz wird auf dem Fortschrittsbalken angezeigt, wie im folgenden Beispiel gezeigt:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Progress Bar with Label</h2>
    <div  >
       <div   role="progressbar" aria-valuenow="50"
          aria-valuemin="0" aria-valuemax="100" style="width: 55%;">55% Complete</span>
       </div>
    </div>
    </div>
    </body>
    </html>
    
    • Beispiel für Bootstrap-Fortschrittsbalkenbeschriftung ausführen

    Beispiel für die Beschriftung eines Bootstrap-Fortschrittsbalkens

    Bootstrap-Alternative-Fortschrittsbalken

    Es ist möglich, verschiedene Arten von Fortschrittsbalken mit jeweils unterschiedlichen Farben zu erstellen, indem diese Klassen einfach mit dem div-Element umschlossen werden. Im Folgenden sind die vier Typen aufgeführt, die dem Fortschrittsbalken unterschiedliche Stile verleihen:

    • Fortschrittsbalken-Erfolg
    • Fortschrittsbalken-Info
    • Fortschrittsbalkenwarnung
    • Fortschrittsbalken-Gefahr

    Verwenden Sie diese Klassen innerhalb des div-Elements zusammen mit der Basisklasse .Fortschrittsanzeige Klasse. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Contextual Alternatives of Progress Bar</h2><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
      	  80% Complete (Success Bar)
       </div>
    </div><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
      	  65% Complete (Info Bar)
       </div>
    </div><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
      	  50% Complete (Warning Bar)
       </div>
    </div><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 35%;">
      	  30% Complete (Danger Bar)
       </div>
    </div>
    </div>
    </body>
    </html>
    
    • Führen Sie ein Beispiel für Bootstrap-Alternative-Fortschrittsbalken aus

    Beispiel für Bootstrap-Alternative-Fortschrittsbalken

    Bootstrap-gestreifter Fortschrittsbalken

    Mit dem können wir einen Streifeneffekt für Fortschrittsbalken erzeugen .fortschrittsgestreift Klasse innerhalb des div-Elements zusammen mit .Fortschritt Klasse. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Striped Progress Bars</h2><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
      	  70% Complete (Success Bar)
       </div>
    </div>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
      	  55% Complete (Info Bar)
       </div>
    </div><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
      	  45% Complete (Warning Bar)
       </div>
    </div><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
      	  30% Complete (Danger Bar)
       </div>
    </div>
    </div>
    </body>
    </html>
    
    • Führen Sie ein Beispiel für gestreifte Bootstrap-Fortschrittsbalken aus

    Beispiel für gestreifte Bootstrap-Fortschrittsbalken

    Animierter Bootstrap-Fortschrittsbalken

    Wir können die Streifen von rechts nach links animieren, indem wir hinzufügen .aktiv Klasse .progress-bar-striped Klasse innerhalb des div-Elements. Das Folgende ist ein Beispiel:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Striped Progress Bars</h2><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
      	  70% Complete (Success Bar)
       </div>
    </div>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 55%;">
      	  55% Complete (Info Bar)
       </div>
    </div><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
      	  45% Complete (Warning Bar)
       </div>
    </div><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
      	  30% Complete (Danger Bar)
       </div>
    </div>
    </div>
    </body>
    </html>
    
    • Führen Sie ein Beispiel für animierte Bootstrap-Fortschrittsbalken aus

    Beispiel für animierte Bootstrap-Fortschrittsbalken

    Bootstrap-Stacked-Fortschrittsbalken

    Wir können mehrere Fortschrittsbalken in denselben Fortschrittsbalken einfügen, um sie zu stapeln, indem wir alle kontextbezogenen Klassen innerhalb des Fortschrittsbalkens hinzufügen .Fortschritt Klasse wie im folgenden Beispiel gezeigt:

    <!DOCTYPE html>
    <head>
    <title>Bootstrap Example</title>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div  >
    <h2>Stacked Progress Bar</h2><br>
    <div  >
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 35%;">
      	  <span  >35% Complete (Success Bar)</span>
       </div>
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
      	  <span  >25% Complete (Info Bar)</span>
       </div>
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 15%;">
      	  <span  >15% Complete (Warning Bar)</span>
       </div>
       <div   role="progressbar" aria-valuenow="90"
          aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
      	  <span  >10% Complete (Danger Bar)</span>
       </div>
    </div>
    </div>
    </body>
    </html>
    
    • Führen Sie ein Beispiel für gestapelte Bootstrap-Fortschrittsbalken aus

    Beispiel für gestapelte Bootstrap-Fortschrittsbalken

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen