Latest web development tutorials

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 »