Stiftung Fortschrittsbalken
Stiftung kann als Fortschrittsbalken verwendet werden, um den Grad der Programmbearbeitung zu zeigen:
Wir können <div> verwenden Element .progress Klasse Fortschrittsbalken zu schaffen, .meter Klasse für Kind - Element (<span>). Wir können den Prozentsatz der Fortschritte in <span> -Element gesetzt, wie folgt:
Beispiele
<Span class = "meter" style = "width: 70%"> </ span>
</ Div>
Versuchen »
Der Fortschrittsbalken Farbe
Standardmäßig ist der Fortschrittsbalken Farbe Blau. Verschiedene Farben der Klasse: .secondary , .success oder .alert :
Beispiele
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
<Div class = "Fortschritt sekundäre" >
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
<Div class = "Fortschritt Erfolg" >
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
<Div class = "Fortschritt alert" >
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
Versuchen »
Fillet Fortschrittsbalken
.radius und .round Klassen verwendet , um abgerundete Ecken für den Fortschrittsbalken hinzu:
Beispiele
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
<Div class = "Fortschritt Radius" >
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
<Div class = "Fortschritt abgerundet" >
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
Versuchen »
Ein Fortschrittsbalken Größe
Sie können mit .small- num oder .large- num die Breite des Fortschrittsbalken zu ändern, num ist eine Zahl zwischen 1 (8,33%) und 12 (Standard (100%)) :
Beispiele
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
<Div class = "Fortschritt groß 6">
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
<Div class = "Fortschritt groß 9">
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
<Div class = "Fortschritt groß 11">
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
<! - Standardbreite ->
<Div class = "Fortschritt groß 12">
<Span class = "meter" style = "width: 50%"> </ span>
</ Div>
Versuchen »
Fortschrittsbalken Etikett
CSS kann verwendet werden, um die Statusleiste zu markieren. Das folgende Beispiel fügten wir eine <span> -Element Prozentsätze anzuzeigen:
Beispiele
.percentage {
position: absolute;
Top: 50%;
links: 50%;
color: white;
Transformation: übersetzen (-50%, -50%);
font-size: 12px;
}
</ Style>
<Div class = "Fortschritt">
<Span class = "meter" style = "position: relative; width: 75%">
<Span class = "Prozentsatz"> 75% </ span>
</ Span>
</ Div>
<Div class = "Fortschritt Erfolg" >
<Span class = "meter" style = "position: relative; Breite: 50%">
<Span class = "Prozentsatz"> 50% </ span>
</ Span>
</ Div>
<Div class = "Fortschritt alert" >
<Span class = "meter" style = "position: relative; Breite: 25%">
<Span class = "Prozentsatz"> 25% </ span>
</ Span>
</ Div>
Versuchen »