Corso di base Bootstrap

Plugin Bootstrap

Oggetti Multimediale Bootstrap Avvisi Bootstrap

Barre di Progresso Bootstrap

Questo capitolo spiega le barre di avanzamento di Bootstrap. In questo tutorial, vedrai come utilizzare Bootstrap per creare barre di avanzamento per stati di caricamento, reindirizzamento o azione.

Bootstrap utilizza transizioni CSS3 e animazioni per ottenere questo effetto. Internet Explorer 9 e versioni precedenti e vecchie versioni di Firefox non supportano questa funzionalità, Opera 12 non supporta le animazioni.

Barra di avanzamento predefinita

Ecco i passaggi per creare una barra di avanzamento di base:

aggiungi una classe .progress al <div>.
Poi, all'interno del <div> superiore, aggiungi una classe .progress-bar div vuoto.</div>
Aggiungi uno stile con una percentuale di larghezza, ad esempio style="width: 60%"; indica che la barra di avanzamento è al 60%.

Vediamo l'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Barra di avanzamento</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress">
	<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>
</body>
</html>

Prova a vedere ‹/›

I risultati sono come segue:

Barra di avanzamento alternata

Ecco i passaggi per creare barre di avanzamento di diversi stili:

aggiungi una classe .progress al <div>.
Poi, all'interno del <div> superiore, aggiungi una classe .progress-bar e classe progress-bar-* di un <div> vuoto. Quindi, * può essere success, info, warning, danger.
Aggiungi uno stile width con percentuale, ad esempio style="60%"; indica che la barra di progresso è al 60%.

Vediamo l'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Barra di avanzamento alternata</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress">
	<div class="progress-bar progress-bar-success" role="progressbar">
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width: 90%;">
		<span class="sr-only">90% completato (successo)</span>
	</div>
</div>
<div class="progress">
	<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% completato (informazione)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-warning" role="progressbar">
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="larghezza: 20%;">
		<span class="sr-only">20% completato (avviso)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-danger" role="progressbar"
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width: 10%;">
		<span class="sr-only">10% completato (pericolo)</span>
	</div>
</div>
</body>
</html>

Prova a vedere ‹/›

I risultati sono come segue:

Barra di avanzamento a strisce

Ecco i passaggi per creare una barra di avanzamento a strisce:

aggiungi una classe .progress e .progress-striped al <div>.
Poi, all'interno del <div> superiore, aggiungi una classe .progress-bar e classe progress-bar-* di un <div> vuoto. Quindi, * può essere success, info, warning, danger.
Aggiungi uno stile width con percentuale, ad esempio style="60%"; indica che la barra di progresso è al 60%.

Vediamo l'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Esempio Bootstrap - Barra di avanzamento a strisce</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress progress-striped">
　　　　<div class="progress-bar progress-bar-success" role="progressbar">
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="width: 90%;">
　　　　　　　　<span class="sr-only">90% completato (successo)</span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<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% completato (informazione)</span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress-bar progress-bar-warning" role="progressbar">
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="larghezza: 20%;">
　　　　　　　　<span class="sr-only">20% completato (avviso)</span>
　　　　</div>
</div>
<div class="progress progress-striped">
　　　　<div class="progress-bar progress-bar-danger" role="progressbar"
　　　　　　　　　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
　　　　　　　　　style="width: 10%;">
　　　　　　　　<span class="sr-only">10% completato (pericolo)</span>
　　　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

I risultati sono come segue:

Barra di avanzamento animata

Ecco i passaggi per creare una barra di avanzamento animata:

aggiungi una classe .progress e .progress-striped al <div>. .active.
Poi, all'interno del <div> superiore, aggiungi una classe .progress-bar div vuoto.</div>
Aggiungi uno stile width con percentuale, ad esempio style="60%"; indica che la barra di progresso è al 60%.

Questo renderà le strisce muoversi da destra a sinistra.

Vediamo l'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Barre di progresso animate</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress progress-striped active">
	<div class="progress-bar progress-bar-success" role="progressbar">
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="width: 40%;">
		<span class="sr-only">40% completato</span>
	</div>
</div>
</body>
</html>

Prova a vedere ‹/›

I risultati sono come segue:

Barre di progresso sovrapposte

Puoi sovrapporre anche più barre di progresso. Metti più barre di progresso nella stessa .progress E' possibile sovrapporre, come mostrato nell'esempio seguente:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Barre di progresso sovrapposte</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress">
	<div class="progress-bar progress-bar-success" 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% completato (informazione)</span>
	</div>
	<div class="progress-bar progress-bar-warning" role="progressbar">
		　aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		　style="larghezza: 20%;">
		<span class="sr-only">20% completato (avviso)</span>
	</div>
</div>
</body>
</html>

Prova a vedere ‹/›

I risultati sono come segue:

Oggetti Multimediale Bootstrap Avvisi Bootstrap