Bootstrap - Dashboard Demo

Benvenuti, futuri sviluppatori! Oggi ci imbarchiamo in un viaggio emozionante nel mondo di Bootstrap e creeremo una dimostrazione di dashboard spettacolare. Come il vostro amico insegnante di scienze informatiche del quartiere, sono entusiasta di guidarvi in questo processo, anche se non avete mai scritto una riga di codice prima. Allora, fate il nodo alla cintura e tuffiamoci!

Bootstrap-Dashboard Demo

Cos'è Bootstrap?

Prima di iniziare a costruire la nostra dashboard, prendiamo un momento per capire cos'è Bootstrap. Immaginate di voler costruire una casa. Bootstrap è come un kit prefabbricato che arriva con muri, porte e finestre già progettati. È un potente framework front-end che fornisce componenti e stili pre-costruiti, rendendo più facile creare siti web responsivi e visivamente accattivanti.

Configurazione del Nostro Progetto

Passo 1: Includere Bootstrap

Prima di tutto, dobbiamo includere Bootstrap nel nostro progetto. Lo faremo aggiungendo le seguenti righe nella sezione <head> del nostro file HTML:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Queste righe sono come invitare Bootstrap alla nostra festa di programmazione. Portano con sé tutti gli stili e le funzionalità interattive di cui avremo bisogno.

Passo 2: Struttura HTML di Base

Ora, impostiamo la struttura di base della nostra dashboard:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Mia Dashboard Meravigliosa</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<!-- Il contenuto della nostra dashboard andrà qui -->
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Questo è come posare le fondamenta della nostra casa. La classe container-fluid garantisce che il nostro contenuto si estenda per tutta la larghezza dello schermo.

Costruzione della Dashboard

Passo 3: Creazione della Barra di Navigazione

Iniziamo aggiungendo una barra di navigazione alla nostra dashboard:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">La Mia Dashboard</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analisi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impostazioni</a>
</li>
</ul>
</div>
</div>
</nav>

Questo codice crea una barra di navigazione reattiva. È come la targa della nostra dashboard, aiutando gli utenti a navigare attraverso diverse sezioni.

Passo 4: Aggiunta di una Sidebar

Successivamente, aggiungiamo una sidebar per ulteriori opzioni di navigazione:

<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Ordini
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Prodotti
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Clienti
</a>
</li>
</ul>
</div>
</nav>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<!-- Il contenuto principale andrà qui -->
</main>
</div>

Questa sidebar funziona come un menu in un ristorante, offrendo un accesso rapido a diverse sezioni della nostra dashboard.

Passo 5: Creazione dei Widget della Dashboard

Ora, aggiungiamo alcuni widget alla nostra area di contenuto principale:

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>

<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Vendite Totali</h5>
<p class="card-text display-4">$15,000</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Nuovi Clienti</h5>
<p class="card-text display-4">250</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Ordini in Sospeso</h5>
<p class="card-text display-4">18</p>
</div>
</div>
</div>
</div>
</main>

Questi widget sono come le stanze nella nostra casa dashboard, ciascuna con uno scopo specifico e che visualizza informazioni importanti.

Miglioramento della Nostra Dashboard

Passo 6: Aggiunta di un Grafico

Aggiungiamo un grafico per rendere la nostra dashboard più dinamica. Useremo Chart.js, una popolare libreria di grafici:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="row mt-4">
<div class="col-md-8">
<canvas id="salesChart"></canvas>
</div>
</div>

<script>
var ctx = document.getElementById('salesChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu'],
datasets: [{
label: 'Vendite',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>

Questo grafico è come una finestra nella nostra casa dashboard, offrendo una vista delle tendenze delle vendite nel tempo.

Passo 7: Aggiunta di una Tabella

Infine, aggiungiamo una tabella per visualizzare alcuni dati dettagliati:

<div class="row mt-4">
<div class="col-md-12">
<h3>Ordini Recenti</h3>
<table class="table table-striped">
<thead>
<tr>
<th>ID Ordine</th>
<th>Cliente</th>
<th>Prodotto</th>
<th>Importo</th>
<th>Stato</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>John Doe</td>
<td>Widget A</td>
<td>$100</td>
<td><span class="badge bg-success">Completato</span></td>
</tr>
<tr>
<td>002</td>
<td>Jane Smith</td>
<td>Widget B</td>
<td>$75</td>
<td><span class="badge bg-warning">In Sospeso</span></td>
</tr>
<!-- Aggiungi altre righe según necessario -->
</tbody>
</table>
</div>
</div>

Questa tabella è come un armadio nella nostra dashboard, organizzando e visualizzando in modo ordinato i dati importanti.

Conclusione

Congratulazioni! Avete appena costruito una bellissima dashboard Bootstrap. Ricordate, come ogni abilità, lo sviluppo web migliora con la pratica. Non scoraggiatevi se le cose non funzionano perfettamente la prima volta - anche gli sviluppatori esperti passano del tempo a debuggare e migliorare il loro codice.

Ecco una tabella di riferimento rapida delle classi Bootstrap che abbiamo utilizzato:

Classe	Scopo
container-fluid	Crea un contenitore a piena larghezza
navbar	Crea una barra di navigazione
row	Crea un gruppo orizzontale di colonne
col-md-*	Crea colonne responsive
card	Crea un contenitore flessibile di contenuto
table	Stile di una tabella HTML
badge	Crea un piccolo componente di conteggio e etichettatura

Continuate a esplorare, continuate a programmare e, soprattutto, divertitevi! Il vostro viaggio nello sviluppo web è appena iniziato, e c'è un mondo intero di possibilità emozionanti davanti a voi.

Credits: Image by storyset

Tutorial precedente:

Demo Bootstrap-Cover

Prossimo tutorial:

Bootstrap Demo di-navbar inferiore sticky