Tutorial di Bootstrap4

Paginazione di Bootstrap4 Medaglioni di Bootstrap4

Barre di Progresso di Bootstrap4

La barra di progresso può essere utilizzata per mostrare all'utente il progresso di un'operazione o una task. Esempio di creazione di una barra di progresso semplice con una gradazione verticale.

La barra di progresso può mostrare il processo di completamento dell'utente.

I passaggi per creare una barra di progresso di base sono i seguenti:

Aggiungi un attributo .progress alla <div> sopra.
Quindi, aggiungi un <div> con la classe .progress-bar un <div> vuoto.
Aggiungi un attributo style con una percentuale di larghezza per rappresentare il progresso, ad esempio style="width:70%" indica che la barra di progresso è 70% posizione.

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Barra di progresso di base</h2>
　　<p>Per creare una barra di progresso predefinita, aggiungi la classe .progress all'elemento contenitore e la classe .progress-bar agli elementi figli, e imposta la situazione di progresso della barra di progresso:</p>
　　<div class="progress">
　　　　<div class="progress-bar" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Testa a Vedere ‹/›

Altezza della barra di progresso

L'altezza predefinita della barra di progresso è di 16px. Possiamo modificarla utilizzando l'attributo height di CSS:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Altezza della barra di progresso</h2>
　　<p>La altezza predefinita della barra di progresso è di 16px. Possiamo modificarla utilizzando l'attributo height di CSS:</p>　
　　<div class="progress" style="height:10px;">
　　　　<div class="progress-bar" style="width:40%;"></div>
　　</div>
　　<br>
　　<div class="progress" style="height:20px;">
　　　　<div class="progress-bar" style="width:50%;"></div>
　　</div>
　　<br>
　　<div class="progress" style="height:30px;"></div>
　　　　<div class="progress-bar" style="width:60%;"></div>
　　</div>
</div>
</body>
</html>

Testa a Vedere ‹/›

Etichetta della barra di avanzamento

È possibile aggiungere testo all'interno della barra di avanzamento, come la percentuale di avanzamento:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Etichette di testo della barra di avanzamento</h2>
　　<div class="progress">
　　　　<div class="progress-bar" style="width:70%">70%</div>
　　</div>
</div>
</body>
</html>

Testa a Vedere ‹/›

Barre di avanzamento a colori diversi

Di default, la barra di avanzamento è blu, ma Bootstrap4 offre anche barre di avanzamento nei seguenti colori:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Barre di avanzamento a colori multipli</h2>
　　<p>Bootstrap4 fornisce i seguenti colori di barra di avanzamento:</p>　
　　<div class="progress">
　　　　<div class="progress-bar" style="width:30%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-success" style="width:40%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-info" style="width:50%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-warning" style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-danger" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Testa a Vedere ‹/›

Barra di avanzamento a strisce

È possibile utilizzare la classe .progress-bar-striped per impostare la barra di avanzamento a strisce:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Barra di avanzamento a strisce</h2>
　　<p>È possibile utilizzare la classe .progress-bar-striped per impostare la barra di avanzamento a strisce:</p>　
　　<div class="progress">
　　　　<div class="progress-bar progress-bar-striped" style="width:30%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
　　</div>
　　<br>
　　<div class="progress">
　　　　<div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
　　</div>
</div>
</body>
</html>

Testa a Vedere ‹/›

Barra di avanzamento animata

Utilizzando la classe .progress-bar-animated è possibile aggiungere animazione alla barra di avanzamento:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Barra di avanzamento animata</h2>
　　<p>Utilizzando la classe .progress-bar-animated è possibile aggiungere animazione alla barra di avanzamento:</p>　
　　<div class="progress">
　　　　<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
　　</div>
</div>
</body>
</html>

Testa a Vedere ‹/›

Barra di avanzamento a colori misti

La barra di avanzamento può essere impostata con vari colori:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Barra di Progresso a Colori Misto</h2>
　　<p>Le barre di progresso possono essere impostate con vari colori:</p>　
　　<div class="progress">
　　　　<div class="progress-bar bg-success" style="width:40%">
　　　　　　Spazio Libero
　　　　</div>
　　　　<div class="progress-bar bg-warning" style="width:10%">
　　　　　　Avviso
　　　　</div>
　　　　<div class="progress-bar bg-danger" style="width:20%">
　　　　　　Danno
　　　　</div>
　　</div>
</div>
</body>
</html>

Testa a Vedere ‹/›

Paginazione di Bootstrap4 Medaglioni di Bootstrap4