Najlepszy samouczek Fundacja pasek postępu W 2024 r. W tym samouczku możesz dowiedzieć się
Kolor paska postępu,Filet pasek postępu,Pasek postępu Rozmiar,Pasek postępu etykiety,
Fundacja pasek postępu
Fundament może być stosowany jako pasek postępu, aby zobaczyć stopień przetwarzania programu:
Możemy <div>
użyć elementu .progress
klasę aby utworzyć pasek postępu, .meter
klasę dla elementu podrzędnego (<span>). Możemy ustawić procent postępu w <span> element, a mianowicie:
Przykłady
<Div class = "postęp">
<Span class = "Miernik" style = "width: 70%"> </ span>
</ Div>
Spróbuj »
Kolor paska postępu
Domyślnie kolor pasek postępu jest niebieski. Różne kolory Klasa: .secondary
, .success
lub .alert
:
Przykłady
<Div class = "postęp">
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
<Div class = "Postęp wtórny" >
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
<Div class = "sukces postęp" >
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
<Div class = "alert postęp" >
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
Spróbuj »
Filet pasek postępu
.radius
i .round
klasy używane do dodawania zaokrąglone narożniki na pasku postępu:
Przykłady
<Div class = "postęp">
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
<Div class = "Promień postęp" >
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
<Div class = "Postęp zaokrąglone" >
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
Spróbuj »
Pasek postępu Rozmiar
Można użyć .small- num
lub .large- num
zmodyfikować szerokość paska postępu, num jest liczbą z przedziału od 1 (8,33%) i 12 (domyślnie (100%)) :
Przykłady
<Div class = "Postęp dużymi 1">
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
<Div class = "Postęp dużymi 6">
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
<Div class = "Postęp dużymi 9">
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
<Div class = "Postęp dużymi 11">
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
<! - Domyślna szerokość ->
<Div class = "Postęp dużymi 12">
<Span class = "Miernik" style = "width: 50%"> </ span>
</ Div>
Spróbuj »
Pasek postępu etykiety
CSS może być używany, aby oznaczyć pasek postępu. W poniższym przykładzie dodaliśmy elementu <span>, aby wyświetlić procenty:
Przykłady
<Style>
.percentage {
position: absolute;
top: 50%;
left: 50%;
kolor: biały;
transform: translate (-50%, -50%);
font-size: 12px;
}
</ Style>
<Div class = "postęp">
<Span class = "Miernik" style = "position: relative; width: 75%">
<Span class = "procent"> 75% </ span>
</ Span>
</ Div>
<Div class = "sukces postęp" >
<Span class = "Miernik" style = "position: relative; width: 50%">
<Span class = "procent"> 50% </ span>
</ Span>
</ Div>
<Div class = "alert postęp" >
<Span class = "Miernik" style = "position: relative; width: 25%">
<Span class = "procent"> 25% </ span>
</ Span>
</ Div>
Spróbuj »