Fondazione barra di avanzamento
Fondazione può essere utilizzato come una barra di avanzamento per mostrare l'elaborazione del programma di laurea:
Siamo in grado di <div> utilizzare elemento .progress classe per creare barra di avanzamento, .meter classe per elemento figlio (<span>). Possiamo impostare la percentuale di progresso elemento <span>, come segue:
Esempi
<Span class = stile "metro" = "width: 70%"> </ span>
</ Div>
Prova »
Il colore della barra di avanzamento
Per impostazione predefinita, il colore della barra di progresso è blu. Diversi colori di classe: .secondary , .success , o .alert :
Esempi
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
<Div class = "progresso secondario" >
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
<Div class = "successo progresso" >
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
<Div class = "alert progresso" >
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
Prova »
barra di avanzamento Filetto
.radius e .round classi utilizzate per aggiungere gli angoli arrotondati per la barra di avanzamento:
Esempi
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
<Div class = "Raggio di progresso" >
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
<Div class = "progresso arrotondato" >
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
Prova »
Una barra di avanzamento Size
È possibile utilizzare .small- num o .large- num per modificare la larghezza della barra di avanzamento, num è un numero compreso tra 1 (8,33%) e 12 (di default (100%)) :
Esempi
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
<Div class = "progresso larga 6">
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
<Div class = "progresso larga 9">
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
<Div class = "progresso larga 11">
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
<! - Larghezza predefinita ->
<Div class = "progresso larga 12">
<Span class = stile "metro" = "width: 50%"> </ span>
</ Div>
Prova »
Etichetta Barra di avanzamento
CSS può essere usato per codificare la barra di avanzamento. Il seguente esempio abbiamo aggiunto un elemento <span> per visualizzare le percentuali:
Esempi
.percentage {
position: absolute;
top: 50%;
sinistra: 50%;
color: white;
trasformare: translate (-50%, -50%);
font-size: 12px;
}
</ Style>
<Div class = "progresso">
<Span class = stile "metro" = "position: relative; width: 75%">
<Span class = "percentuale"> 75% </ span>
</ Span>
</ Div>
<Div class = "successo progresso" >
<Span class = stile "metro" = "position: relative; width: 50%">
<Span class = "percentuale"> 50% </ span>
</ Span>
</ Div>
<Div class = "alert progresso" >
<Span class = stile "metro" = "position: relative; width: 25%">
<Span class = "percentuale"> 25% </ span>
</ Span>
</ Div>
Prova »