Bootstrap - Dashboard Demo
Bienvenue, aspirants développeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de Bootstrap et créer une démonstration de tableau de bord époustouflante. En tant que votre gentil voisin professeur de sciences informatiques, je suis ravi de vous guider à travers ce processus, même si vous n'avez jamais écrit une ligne de code auparavant. Alors, bouclez votre ceinture et plongeons dedans !
Qu'est-ce que Bootstrap ?
Avant de commencer à construire notre tableau de bord, penchons-nous sur ce qu'est Bootstrap. Imaginez que vous essayez de construire une maison. Bootstrap est comme un kit pré-fabriqué qui vient avec des murs, des portes et des fenêtres déjà conçus. C'est un puissant framework front-end qui fournit des composants et des styles pré-conçus, rendant plus facile la création de sites web responsifs et visuellement attrayants.
Configuration deNotre Projet
Étape 1 : Inclure Bootstrap
Premièrement, nous devons inclure Bootstrap dans notre projet. Nous allons faire cela en ajoutant les lignes suivantes à la section <head> de notre fichier 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>Ces lignes sont comme inviter Bootstrap à notre fête de codage. Elles apportent tous les styles et fonctionnalités interactives dont nous aurons besoin.
Étape 2 : Structure HTML de Base
Maintenant, mettons en place la structure de base de notre tableau de bord :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon super tableau de bord</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<!-- Le contenu de notre tableau de bord ira ici -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>C'est comme poser les fondations de notre maison. La classe container-fluid garantit que notre contenu s'étend sur toute la largeur de l'écran.
Construction du Tableau de Bord
Étape 3 : Création de la Barre de Navigation
Commençons par ajouter une barre de navigation à notre tableau de bord :
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mon Tableau de Bord</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="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytiques</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Paramètres</a>
</li>
</ul>
</div>
</div>
</nav>Ce code crée une barre de navigation responsive. C'est comme l'enseigne de notre tableau de bord, aidant les utilisateurs à naviguer entre différentes sections.
Étape 4 : Ajout d'une Sidebar
Ensuite, ajoutons une barre latérale pour des options de navigation supplémentaires :
<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="#">
Tableau de Bord
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Commandes
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Produits
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Clients
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<!-- Le contenu principal ira ici -->
</main>
</div>Cette barre latérale agit comme un menu dans un restaurant, offrant un accès rapide aux différentes sections de notre tableau de bord.
Étape 5 : Création des Widgets du Tableau de Bord
Maintenant, ajoutons quelques widgets à notre zone de contenu principal :
<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">Tableau de Bord</h1>
</div>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Ventes Totales</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">Nouveaux Clients</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">Commandes en Attente</h5>
<p class="card-text display-4">18</p>
</div>
</div>
</div>
</div>
</main>Ces widgets sont comme les chambres dans notre maison de tableau de bord, chacune servant un objectif spécifique et affichant des informations importantes.
Amélioration de Notre Tableau de Bord
Étape 6 : Ajout d'un Graphique
Ajoutons un graphique pour rendre notre tableau de bord plus dynamique. Nous allons utiliser Chart.js, une bibliothèque de graphiques populaire :
<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: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
datasets: [{
label: 'Ventes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>Ce graphique est comme une fenêtre dans notre maison de tableau de bord, offrant une vue des tendances des ventes au fil du temps.
Étape 7 : Ajout d'un Tableau
Enfin, ajoutons un tableau pour afficher des données détaillées :
<div class="row mt-4">
<div class="col-md-12">
<h3>Commandes Récentes</h3>
<table class="table table-striped">
<thead>
<tr>
<th>ID Commande</th>
<th>Client</th>
<th>Produit</th>
<th>Montant</th>
<th>Statut</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">Terminée</span></td>
</tr>
<tr>
<td>002</td>
<td>Jane Smith</td>
<td>Widget B</td>
<td>$75</td>
<td><span class="badge bg-warning">En Attente</span></td>
</tr>
<!-- Ajoutez plus de lignes si nécessaire -->
</tbody>
</table>
</div>
</div>Ce tableau est comme un classeur dans notre maison de tableau de bord, organisant et affichant soigneusement les données importantes.
Conclusion
Félicitations ! Vous venez de construire un tableau de bord Bootstrap magnifique. Souvenez-vous, comme toute compétence, le développement web s'améliore avec la pratique. Ne soyez pas découragé si les choses ne fonctionnent pas parfaitement la première fois - même les développeurs expérimentés passent du temps à déboguer et à améliorer leur code.
Voici un tableau de référence rapide des classes Bootstrap que nous avons utilisées :
| Classe | Objectif |
|---|---|
| container-fluid | Crée un conteneur sur toute la largeur |
| navbar | Crée une barre de navigation |
| row | Crée un groupe horizontal de colonnes |
| col-md-* | Crée des colonnes responsives |
| card | Crée un conteneur de contenu flexible |
| table | Style une table HTML |
| badge | Crée un petit composant de compte et d'étiquetage |
Continuez à explorer, à coder et, surtout, amusez-vous ! Votre voyage dans le développement web vient de commencer, et il y a un monde d'excitantes possibilités devant vous.
Credits: Image by storyset