Detaillierte Erläuterung der Fortschrittsbalkenkomponente in Bootstrap

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Fortschrittsbalkenkomponente in Bootstrap. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Auf Webseiten ist die Wirkung von Fortschrittsbalken keine Seltenheit, etwa ein Punktesystem, etwa zum Ladestatus usw. Durch einfache und flexible Fortschrittsbalken kann Echtzeit-Feedback für den aktuellen Workflow bzw. gegeben werden Aktion. Werfen wir einen Blick auf die Fortschrittsbalkenkomponente in Bootstrap.

Verwandte Empfehlungen: „Bootstrap-Tutorial“

Grundlegender Stil

Das Bootstrap-Framework bietet einen Grundstil für den Fortschrittsbalken, eine Hintergrundfarbe von 100 % Breite und dann eine hervorgehobene Farbe, um den Abschlussfortschritt anzuzeigen. Tatsächlich ist es sehr einfach, einen solchen Fortschrittsbalken zu erstellen. Der äußere Container hat eine bestimmte Breite und das untergeordnete Element legt eine Breite fest % (d. h. das Breitenverhältnis des übergeordneten Containers) und eine Hervorhebungshintergrundfarbe festlegen. Das Bootstrap-Framework wird ebenfalls auf diese Weise implementiert. Der äußere Container verwendet den „Progress“-Stil. und der Untercontainer verwendet den „Fortschrittsbalken“-Stil. Unter anderem wird progress verwendet, um den Containerstil des Fortschrittsbalkens festzulegen, während progress-bar verwendet wird, um den Fortschritt des Fortschrittsbalkens zu begrenzen Engine, dass die Funktion dieses p ein Fortschrittsbalken ist; das Attribut -valuenow="40" gibt an, dass der Fortschritt des aktuellen Fortschrittsbalkens 40 % beträgt; das Attribut aria-valuemin="0" gibt den Mindestwert des Fortschritts an bar auf 0 % festgelegt; das Attribut aria-valuemax="100" gibt an, dass der Maximalwert des Fortschrittsbalkens 100 % sein soll Das Warnmeldungsfeld Um dem Benutzer ein besseres Erlebnis zu bieten, werden je nach Status unterschiedliche Farben des Fortschrittsbalkens konfiguriert. Es wird hier als farbiger Fortschrittsbalken bezeichnet, der hauptsächlich die folgenden vier Typen umfasst:

☑ Fortschrittsbalken-Info: Stellt den Informationsfortschrittsbalken dar, die Farbe des Fortschrittsbalkens ist blau

☑ Fortschrittsbalken-Erfolg: Stellt dar ein erfolgreicher Fortschrittsbalken, Fortschritt. Die Balkenfarbe ist grün

☑ progress-bar-warning: zeigt einen warnenden Fortschrittsbalken an, die Farbe des Fortschrittsbalkens ist gelb

☑ progress-bar-danger: zeigt einen Fehler an. Fortschrittsbalken, der Fortschrittsbalken Die Farbe ist rot

Die spezifische Verwendung ist sehr einfach, Sie müssen lediglich den entsprechenden Klassennamen zum Basis-Fortschrittsbalken hinzufügen. Im Vergleich zum Basis-Fortschrittsbalken hat sich die Farbe des Fortschrittsbalkens bis zu einem gewissen Grad geändert

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
          transition: width .6s ease;
}

rrree

Gestreifter Fortschrittsbalken

im Bootstrap-Framework Neben der Bereitstellung farbiger Fortschrittsbalken bietet es auch einen gestreiften Fortschrittsbalken, der mithilfe linearer CSS3-Verläufe ohne Verwendung von Bildern implementiert wird. Um den gestreiften Fortschrittsbalken im Bootstrap-Framework zu verwenden, müssen Sie nur den Klassennamen „progress-striped“ zum Container „progress“ des Fortschrittsbalkens hinzufügen. Natürlich, wenn Sie möchten, dass die Fortschrittsbalkenstreifen einen Farbeffekt haben Wie beim farbigen Fortschritt müssen Sie nur den Klassennamen „progress-striped“ zum Fortschrittsbalkencontainer hinzufügen. Fügen Sie den entsprechenden Farbklassennamen zum Balken hinzu.

was vom IE9-Browser nicht unterstützt wird. Das Implementierungsprinzip wird hauptsächlich durch die Animation von CSS3 erreicht. Zunächst wird über @keyframes eine Fortschrittsbalken-Streifenanimation erstellt. Diese Animation dient hauptsächlich dazu, die Position des Hintergrundbilds zu ändern, nämlich den Wert von Hintergrundposition. Da der gestreifte Fortschrittsbalken durch den linearen Farbverlauf von CSS3 erstellt wird und der lineare Farbverlauf das Hintergrundbild im entsprechenden Hintergrund implementiert

[Hinweis] IE9-Browser unterstützt nicht

<div class="progress">
       <div class="progress-bar" style="width:40%"></div>
</div>

Im Bootstrap-Framework, indem Sie den Fortschritt angeben, fügen Sie a hinzu Klassennamen „aktiv“ in den Strip-Container „progress“ einfügen und die Animation „progress-bar-stripes“ wirksam werden lassen, sobald das Dokument geladen wird, sodass der Animationseffekt einer Bewegung von rechts nach links angezeigt wird

<div>
    <div>
        <span>40% Complete</span>
    </div>
</div>

.progress-bar-success {
  background-color: #5cb85c;
}
.progress-bar-info {
  background-color: #5bc0de;
}
.progress-bar-warning {
  background-color: #f0ad4e;
}
.progress-bar-danger {
  background-color: #d9534f;
}

kaskadierender Fortschrittsbalken

Zusätzlich zu den oben genannten Fortschrittsbalken bietet das Bootstrap-Framework auch einen kaskadierenden Fortschrittsbalken. Durch kaskadierende Fortschrittsbalken können Fortschrittsbalken in verschiedenen Zuständen zusammengelegt und horizontal angeordnet werden.

Fügen Sie mehrere Fortschrittsbalken in denselben

ein, damit sie gestapelt erscheinen 100 %

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

提示标签

在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，Bootstrap考虑了这种使用场景，只需要在进度条中添加需要的值

<div>
    <div>20%</div>
</div>

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性 

<div>
    <div>0%</div>
</div>
<div>
    <div>0%</div>
</div>
<div>
    <div>1%</div>
</div>
<div>
    <div>1%</div>
</div>

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Fortschrittsbalkenkomponente in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!