-
Bootstrap corso
Bootstrap CSS
- Bootstrap CSS Panoramica
- Bootstrap grid System
- Bootstrap composizione
- Bootstrap codice
- Bootstrap tavolo
- Bootstrap modulo
- Bootstrap pulsante
- Bootstrap immagine
- Bootstrap classe ausiliaria
- Bootstrap Utilità responsive
Bootstrap Componenti di layout
- Bootstrap Caratteri icona
- Bootstrap Menu a discesa
- Bootstrap pulsante Gruppo
- Bootstrap Pulsante menu a discesa
- Bootstrap gruppo casella Input
- Bootstrap elementi di navigazione
- Bootstrap barra di navigazione
- Bootstrap Pangrattato
- Bootstrap paging
- Bootstrap etichetta
- Bootstrap distintivo
- Bootstrap Grande schermo
- Bootstrap Titolo della pagina
- Bootstrap Miniature
- Bootstrap avvertimento
- Bootstrap Una barra di avanzamento
- Bootstrap oggetti multimediali
- Bootstrap Gruppi lista
- Bootstrap pannello
- Bootstrap Wells
Bootstrap widget
- Bootstrap Plug-Glance
- Bootstrap effetto di transizione
- Bootstrap dialogo modale
- Bootstrap Menu a discesa
- Bootstrap Monitor di scorrimento
- Bootstrap linguetta
- Bootstrap I suggerimenti
- Bootstrap finestra pop-up
- Bootstrap finestra di avviso
- Bootstrap pulsante
- Bootstrap piega
- Bootstrap giostra
- Bootstrap navigazione ausiliaria
Bootstrap altro
Il miglior tutorial barra di avanzamento Bootstrap Nel 2024, in questo tutorial puoi imparare La barra di avanzamento di default,Esempi,barra di avanzamento alternativo,Esempi,strisce Barra di avanzamento,Esempi,barra di avanzamento animato,Esempi,barra di avanzamento Stacked,Esempi,
barra di avanzamento Bootstrap
Questo capitolo spiegherà Bootstrap barra di avanzamento. In questo tutorial, si vedrà come creare barra di avanzamento di caricamento Bootstrap, reindirizzare, o stato di funzionamento.
Bootstrap barra di avanzamento utilizzando le transizioni CSS3 e animazioni per ottenere l'effetto. Le vecchie versioni di Internet Explorer e Firefox 9 e precedenti non supportano questa funzione, Opera 12 non supporta le animazioni.
La barra di avanzamento di default
Creare una barra di avanzamento di base, attenersi alla seguente procedura:
- Aggiungere un .progressclasse con il <div>.
- Poi, in quanto sopra <div> all'interno, aggiungere unaclasse .progress-bar con un vuoto <div>.
- Aggiungere un attributo di stile con una larghezza espressa in percentuale, come style = "60%"; 60% rappresenta la posizione della barra di avanzamento.
Diamo un'occhiata ai seguenti esempi:
Esempi
<div class = "progresso">
<div class = "progress-bar" role = "progressbar" Aria-valuenow = "60"
Aria-valuemin = "0" Aria-valuemax = "100" style = "width: 40%; ">
<span class = "SR-only"> 40% completato </ span>
</ Div>
</ Div>
Prova »
I risultati sono i seguenti:
barra di avanzamento alternativo
Per creare una diversa barra di avanzamento in stile come segue:
- Aggiungere un .progressclasse con il <div>.
- Poi, in quanto sopra <div> all'interno, aggiungere unaclasse .progress-bar e classe vuota progresso-bar *con un <div>. Dove * può esseresuccesso, informazioni, avviso, pericolo.
- Aggiungere un attributo di stile con una larghezza espressa in percentuale, come style = "60%"; 60% rappresenta la posizione della barra di avanzamento.
Diamo un'occhiata ai seguenti esempi:
Esempi
<div class = "progresso">
<div class = "progress-bar progress- bar-successo" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 90%; ">
<span class = "SR-only"> 90% completa (con successo) </ span>
</ Div>
</ Div>
<div class = "progresso">
<div class = "progress-bar progress- bar-info" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 30%; ">
<span class = "SR-only"> 30% completa (Informazioni) </ span>
</ Div>
</ Div>
<div class = "progresso">
<div class = "progress-bar progress- bar-warning" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 20%; ">
<span class = "SR-only"> 20% completa (warning) </ span>
</ Div>
</ Div>
<div class = "progresso">
<div class = "progress-bar progress- bar-pericolo" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 10%; ">
<span class = "SR-only"> 10% completa (pericolo) </ span>
</ Div>
</ Div>
Prova »
I risultati sono i seguenti:
strisce Barra di avanzamento
Creare una striscia barra di avanzamento, attenersi alla seguente procedura:
- L'aggiunta di un .progressdi classe e .progress a strisceil <div>.
- Poi, in quanto sopra <div> all'interno, aggiungere unaclasse .progress-bar e classe vuota progresso-bar *con un <div>. Dove * può esseresuccesso, informazioni, avviso, pericolo.
- Aggiungere un attributo di stile con una larghezza espressa in percentuale, come style = "60%"; 60% rappresenta la posizione della barra di avanzamento.
Diamo un'occhiata ai seguenti esempi:
Esempi
<div class = "progresso progresso a righe" >
<div class = "progress-bar progress- bar-successo" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 90%; ">
<span class = "SR-only"> 90% completa (con successo) </ span>
</ Div>
</ Div>
<div class = "progresso progresso a righe" >
<div class = "progress-bar progress- bar-info" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 30%; ">
<span class = "SR-only"> 30% completa (Informazioni) </ span>
</ Div>
</ Div>
<div class = "progresso progresso a righe" >
<div class = "progress-bar progress- bar-warning" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 20%; ">
<span class = "SR-only"> 20% completa (warning) </ span>
</ Div>
</ Div>
<div class = "progresso progresso a righe" >
<div class = "progress-bar progress- bar-pericolo" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 10%; ">
<span class = "SR-only"> 10% completa (pericolo) </ span>
</ Div>
</ Div>
Prova »
I risultati sono i seguenti:
barra di avanzamento animato
Crea un barra di avanzamento animato, attenersi alla seguente procedura:
- L'aggiunta di un .progressdi classe e .progress a strisceil <div>. Mentre l'aggiuntadi classe .active.
- Poi, in quanto sopra <div> all'interno, aggiungere unaclasse .progress-bar con un vuoto <div>.
- Aggiungere un attributo di stile con una larghezza espressa in percentuale, come style = "60%"; 60% rappresenta la posizione della barra di avanzamento.
Questo renderà le strisce hanno un senso di movimento da destra a sinistra.
Diamo un'occhiata ai seguenti esempi:
Esempi
<div class = "progresso progresso a righe attiva ">
<div class = "progress-bar progress- bar-successo" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 40%; ">
<span class = "SR-only"> 40% completato </ span>
</ Div>
</ Div>
Prova »
I risultati sono i seguenti:
barra di avanzamento Stacked
È anche possibile impilare più barra di avanzamento. Diverse barre di avanzamento sulla stessa pila.progress possono essere realizzati, come illustrato nei seguenti esempi:
Esempi
<div class = "progresso">
<div class = "progress-bar progress- bar-successo" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 40%; ">
<span class = "SR-only"> 40% completato </ span>
</ Div>
<div class = "progress-bar progress- bar-info" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 30%; ">
<span class = "SR-only"> 30% completa (Informazioni) </ span>
</ Div>
<div class = "progress-bar progress- bar-warning" role = "progressbar"
Aria-valuenow = "60" Aria-valuemin = "0" Aria-valuemax = "100"
style = "width: 20%; ">
<span class = "SR-only"> 20% completa (warning) </ span>
</ Div>
</ Div>
Prova »
I risultati sono i seguenti:
