Disons que tu as besoin de construire un tableau de bord analytique pour ton entreprise.
Tu as besoin d’un site qui ait l’air professionnel et fonctionne bien sur différents appareils, mais tu n’as pas beaucoup de temps pour tout concevoir dès le départ.
C’est là qu’intervient un Framework comme Bootstrap. Il te donne une longueur d’avance pour construire des sites web réactifs. Au lieu de fixer une page vide, tu commences avec une grille et des composants préconstruits. C’est comme avoir un tas de Legos. Tu dois toujours les assembler, mais la partie difficile de la fabrication de toutes les pièces individuelles est déjà faite.
Si Bootstrap te semble être un bon choix pour ton projet, ce guide est pour toi. Nous te guiderons à travers tout ce que tu dois savoir pour commencer à créer des sites web avec Bootstrap.
Commencez maintenant !
Qu’est-ce Que Bootstrap ?
Bootstrap est un Framework CSS gratuit et open-source qui fournit une collection de composants préconstruits, de styles et d’outils pour créer des designs web réactifs et cohérents. Développé par les ingénieurs de Twitter Mark Otto et Jacob Thornton en 2011, il est depuis devenu l’un des frameworks préférés des développeurs web du monde entier.
Bootstrap est actuellement le sixième Framework le plus populaire dans le top million de sites dans la catégorie des bibliothèques JavaScript.
Alors que jQuery et React ont reçu beaucoup d’attention ces dernières années, plus de 1,2 million de sites web dans le monde utilisent encore Bootstrap.
Ce Framework est conçu pour les mobiles en premier, ce qui signifie qu’il priorise la mise en page et le style pour les écrans plus petits et améliore progressivement le design pour les écrans plus grands. Grâce à cette approche, tous les sites web construits avec Bootstrap sont par défaut réactifs sur toutes les tailles d’écran.
Qu’est-ce Qui Rend Bootstrap Différent ?
Bootstrap se distingue des autres frameworks CSS de plusieurs manières clés.
Ses composants préfabriqués, tels que les barres de navigation, les boutons, les formulaires et les cartes, permettent aux développeurs de gagner beaucoup de temps. Le système de grille responsive de Bootstrap facilite la création de mises en page qui s’affichent bien sur différentes tailles d’écran, des grands écrans d’ordinateur aux petits écrans de téléphone.
Chaque composant de Bootstrap est personnalisable, afin que tu puisses modifier les couleurs et les tailles pour les adapter à ton design spécifique. Cette approche offre plusieurs avantages :
- Développement Rapide : Avec une large gamme de composants pré-construits et de classes utilitaires, les développeurs peuvent rapidement prototyper et construire des pages web sans passer trop de temps sur du CSS personnalisé.
- Design Cohérent : Bootstrap impose un langage de design cohérent à travers les projets, assurant une apparence et une sensation professionnelles et cohérentes.
- Responsive Par Défaut : Les composants et le système de grille de Bootstrap sont conçus pour être réactifs, s’adaptant à différentes tailles d’écran et appareils sans nécessiter de requêtes médias personnalisées extensives.
- Compatibilité Inter-Navigateurs : Bootstrap prend en charge les problèmes de compatibilité entre navigateurs, permettant aux développeurs de se concentrer sur la construction de fonctionnalités plutôt que de s’inquiéter des incohérences des navigateurs.
Cependant, Bootstrap, comme tout Framework, n’est pas adapté à tous les usages.
Les sites web construits avec Bootstrap semblent similaires avec différents agencements simplement parce que les éléments de l’interface utilisateur sont réutilisés. Le Framework est également accompagné de beaucoup de CSS et de JavaScript que tu pourrais ne pas utiliser, ce qui peut ralentir ton site web si tu n’es pas prudent. Il y a aussi une courbe d’apprentissage pour adopter les classes dans le Framework.
Malgré ces inconvénients potentiels, Bootstrap demeure un outil puissant et populaire pour le développement web, surtout si tu souhaites démarrer rapidement. Voyons comment faire exactement cela.
Commencer Avec Bootstrap
Avant de parler des bases, voici trois façons d’importer le Framework :
- Télécharge les fichiers CSS et JavaScript compilés depuis le site officiel de Bootstrap et lie-les dans ton fichier HTML.
- Utilise un réseau de distribution de contenu (CDN) pour charger Bootstrap depuis un serveur distant.
- Installe Bootstrap via un gestionnaire de paquets comme npm si tu utilises un outil de build.
Pour simplifier, utilisons la méthode CDN. Ajoute les lignes suivantes à l’intérieur de la balise <head> de ton fichier HTML :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">Ensuite, ajoute la ligne suivante juste avant la balise de fermeture </body>.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Note : Tu dois ajouter ces lignes pour que tous les exemples de code suivants fonctionnent.
Le Système De Grille Bootstrap
Le système de grille Bootstrap est l’une de ses caractéristiques principales, permettant la création de mises en page réactives qui s’adaptent sans effort à différentes tailles d’écran.
Il est basé sur une grille de 12 colonnes et utilise des classes prédéfinies pour spécifier comment les éléments doivent se comporter à différents points d’interruption.
Grille Basique
La grille de base est un cadre simple avec des colonnes de largeur égale qui deviennent plus hautes lorsque le contenu à l’intérieur est plus long. Pour en créer une de base, commence avec un conteneur <div> et ajoute des rangées et des colonnes. Voici un exemple :
Colonne 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Colonne 2
Pellentesque euismod dapibus odio, at volutpat sapien.
Colonne 3
Sed tincidunt neque vel risus faucibus fringilla.
Comme tu peux le voir, nous avons créé trois colonnes de largeur égale. Bootstrap gère le padding, l’espacement entre les colonnes et l’alignement.
Longueur De La Colonne De Grille
Et si tu veux contrôler la longueur de la colonne ? Bootstrap dispose de 12 paramètres d’unités qui te permettent de décider de la largeur ou de l’étroitesse d’une colonne. Par exemple, pour créer une ligne avec deux colonnes où la première colonne occupe huit unités et la seconde quatre unités, tu peux procéder comme suit :
<div class="container">
<div class="row">
<div class="col-8">
<div class="bg-light border p-3 text-center">
<h3>Colonne Plus Large</h3>
<p>Nunc vitae metus non velit aliquam rhoncus vel in leo.</p>
</div>
</div>
<div class="col-4">
<div class="bg-light border p-3 text-center">
<h3>Colonne Plus Étroite</h3>
<p>Fusce nec tellus sed augue semper porta.</p>
</div>
</div>
</div>
</div>
Comme tu peux le remarquer, il y a une différence dans les classes des colonnes où la colonne la plus large a la classe col-8 et la colonne la plus étroite est col-4.
Largeur de Colonne Réactive
Bootstrap fournit également des classes réactives qui te permettent de spécifier différentes largeurs de colonnes pour différentes tailles d’écran. Ces classes sont basées sur des points d’arrêt, qui sont des largeurs d’écran prédéfinies. Les points d’arrêt disponibles sont :
- xs (très petit): Moins de 576px
- sm (petit): 576px et plus
- md (moyen): 768px et plus
- lg (grand): 992px et plus
- xl (très grand): 1200px et plus
- xxl (extra très grand): 1400px et plus
Pour utiliser les classes réactives, ajoute l’abréviation du point d’arrêt au préfixe col-. Par exemple :
<div class=”container”>
<div class=”row”>
<div class=”col-md-6″>
<div class=”bg-light border p-3 text-center”>
<h3>Colonne 1</h3>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
<div class=”col-md-6″>
<div class=”bg-light border p-3 text-center”>
<h3>Colonne 2</h3>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</div>
Nous avons ajouté la largeur col-md-6 ici, donc les colonnes seront automatiquement redimensionnées lorsque la taille de l’écran sera de 768px et plus.
Composants Bootstrap
Bootstrap propose une large gamme de composants préconstruits pour assembler rapidement des interfaces utilisateur. Ces composants sont réactifs et personnalisables. Explorons quelques-uns des plus couramment utilisés.
Boutons
Bootstrap offre des styles de boutons bien conçus dès le départ. Pour créer un bouton, ajoute la classe btn à un élément <button> ou <a>.
Personnalise-le en ajoutant des classes comme btn-primary, btn-secondary, btn-success, etc.
<button type="button" class="btn btn-primary">Bouton Principal</button>
<button type="button" class="btn btn-secondary">Bouton Secondaire</button>
<a href="#" class="btn btn-success">Bouton Lien Succès</a>
Cartes
Les cartes sont des conteneurs polyvalents pour des contenus tels que des images, du texte et des boutons. Elles offrent une manière structurée de présenter des informations.
<div class="card">
<img src="https://getbootstrap.com/docs/4.5/assets/img/bootstrap-icons.png" class="card-img-top" alt="Image de la carte">
<div class="card-body">
<h5 class="card-title">Titre de la Carte</h5>
<p class="card-text">Un petit texte d'exemple pour compléter le titre de la carte.</p>
<a href="#" class="btn btn-primary">Aller quelque part</a>
</div>
</div>
Ici, tu peux voir une carte avec une image en haut, suivie d’un titre, de texte et d’un bouton. La classe card-img-top positionne l’image en haut de la carte, tandis que la classe card-body fournit un rembourrage et un espacement pour le contenu à l’intérieur de la carte.
Barre de navigation
Le composant navbar est un en-tête de navigation réactif avec des éléments de marque, des liens, des formulaires, et plus encore. Il se replie automatiquement sur les écrans plus petits et fournit un bouton bascule pour déployer le menu.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mon Site Web</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Bascule de navigation">
<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" aria-current="page" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fonctionnalités</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tarifs</a>
</li>
</ul>
</div>
</div>
</nav>
Avec ce simple extrait de code, nous avons créé un bouton de menu bascule pour les petits écrans et une liste de liens de navigation.
La classe navbar-expand-lg spécifie que la barre de navigation doit s’étendre sur les grands écrans et se replier sur les plus petits. Les classes navbar-light et bg-light définissent le schéma de couleurs pour la barre de navigation. Compare cela à la création du menu avec du CSS pur, et tu comprendras combien d’étapes Bootstrap nous a fait économiser.
Formulaires
Passant aux formulaires, Bootstrap offre une gamme de contrôles de formulaires et d’options de mise en page pour créer des formulaires interactifs et accessibles.
Tu peux facilement styliser des éléments de formulaire comme les champs de saisie, les cases à cocher, les boutons radio, et plus encore.
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Adresse email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">Nous ne partagerons jamais ton email avec quelqu'un d'autre.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Mot de passe</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Cocher ici</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
Le style Bootstrap a automatiquement aligné et embelli la disposition de ce formulaire en arrière-plan.
Cet exemple de formulaire comprend un champ de saisie d’adresse email, un champ de saisie de mot de passe, une case à cocher et un bouton de soumission. La classe form-label permet de styler les étiquettes, tandis que la classe form-control permet de styler les champs de saisie. La classe mb-3 ajoute une marge inférieure aux groupes de formulaires pour l’espacement.
Créer Un Tableau De Bord Analytique Simple Avec Bootstrap
Maintenant que nous avons couvert les bases, rassemblons tout et construisons un exemple concret : un tableau de bord d’analyse.
Imagine que tu construis une application web qui affiche les données analytiques pour une entreprise. Le tableau de bord comprendra un en-tête avec un logo et une navigation, une zone de contenu principal avec les données, et un pied de page avec des liens supplémentaires.
Décortiquons cela en sections gérables en utilisant un langage simple et facile à suivre.
Configuration Du HTML
Tout d’abord, nous devons configurer notre fichier HTML.
Commence par créer un nouveau fichier et ajoute l’architecture de base, comme la déclaration <!DOCTYPE html> et les balises <html>, <head> et <body>. Dans la section <head>, n’oublie pas de spécifier l’encodage des caractères, le viewport et le titre de la page.
Voici à quoi ton HTML devrait ressembler jusqu’à présent, incluant le Bootstrap.css (importé dans le <head>) et le Bootstrap.js (importé juste avant de fermer <body>) appelés dans le HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau de Bord Analytique</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Ton contenu sera ici -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Ajout De La Navigation D’en-tête
Ensuite, créons un en-tête avec une barre de navigation. Utilise le tag <header>, et ajoute un élément <nav> à l’intérieur. Le composant navbar de Bootstrap est parfait pour cela. Ensuite, inclut un logo et quelques liens de navigation, comme “Vue d’ensemble”, “Rapports” et “Paramètres”.
Colle ce code d’en-tête à l’intérieur des balises <body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Tableau de bord d'analytique</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Vue d’ensemble</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Rapports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Paramètres</a>
</li>
</ul>
</div>
</div>
</nav>
</header>Voici à quoi ressemblera la barre de navigation :
La classe navbar-expand-lg rend la navigation responsive, se repliant sur les écrans plus petits.
Nous avons utilisé navbar-dark et bg-dark pour lui donner un aspect élégant et sombre. Les liens de navigation sont dans une liste non ordonnée, et ms-auto les pousse vers le côté droit de la barre de navigation.
Création De La Zone De Contenu Principale
Il est temps de s’attaquer au contenu principal ! Utilisons la balise <main> et créons une mise en page à deux colonnes avec le système de grille de Bootstrap.
La colonne de gauche contiendra des cartes pour afficher des graphiques ou des diagrammes, et la colonne de droite aura une carte montrant les indicateurs clés. Colle ce code juste en dessous de la balise de fermeture </header>.
Pour rendre cet exemple plus interactif, ajoutons Chart.js pour afficher les métriques utilisateur. Ajoute ce script dans ton <head>.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>Rappelle-toi, tu peux ignorer l’ajout de ce script et des données d’exemple si tu veux juste voir comment fonctionne Bootstrap. Nous l’ajoutons pour que les boîtes ne soient pas vides.
Maintenant, écrivons les colonnes bootstrap pour donner de l’espace aux graphiques et aux métriques de données.
<main class="container my-5">
<div class="row">
<div class="col-md-8">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Trafic Du Site</h5>
<canvas id="trafficChart"></canvas>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Acquisition D'Utilisateurs</h5>
<canvas id="userChart"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Métriques Clés</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">Total Utilisateurs : 10,000</li>
<li class="list-group-item">Nouveaux Utilisateurs : 500</li>
<li class="list-group-item">Taux de Rebond : 25%</li>
</ul>
</div>
</div>
</div>
</div>
</main>Enfin, colle cette donnée d’exemple juste avant la balise de fermeture </body>. Encore une fois, cela n’est pas nécessaire si tu souhaites uniquement voir les colonnes Bootstrap en action. Nous ajoutons ces données d’exemple pour que Chart.js puisse récupérer les informations et les afficher sur un graphique interactif.
<script>
// Graphique Linéaire du Trafic sur le Site
var trafficCtx = document.getElementById('trafficChart').getContext('2d');
var trafficChart = new Chart(trafficCtx, {
type: 'line',
data: {
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
datasets: [{
label: 'Visiteurs Uniques',
data: [8000, 9500, 10200, 9800, 11000, 12500],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Graphique en Barres d'Acquisition d'Utilisateurs
var userCtx = document.getElementById('userChart').getContext('2d');
var userChart = new Chart(userCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
datasets: [{
label: 'Nouveaux Utilisateurs',
data: [400, 450, 500, 450, 550, 600],
backgroundColor: 'rgba(54, 162, 235, 0.6)'
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>En rassemblant tout, tu verras un beau tableau de bord avec un graphique linéaire et un graphique à barres montrant la croissance dans nos indicateurs clés. Les indicateurs clés sont également visibles sur le côté droit sous forme de tableau.
Nous avons utilisé la classe de conteneur pour centrer le contenu et ajouter un peu de marge. La classe de rangée crée une rangée, et les classes col-md-* définissent les largeurs des colonnes.
La colonne de gauche (col-md-8) contient deux cartes pour les graphiques, tandis que la colonne de droite (col-md-4) contient une carte avec des indicateurs clés dans un groupe de liste.
Ajout Du Pied De Page
Presque arrivé !
Ajoutons un pied de page avec des informations sur les droits d’auteur et des liens. Nous utiliserons la balise <footer> et le système de grille ainsi que les utilitaires d’espacement de Bootstrap pour contrôler la disposition et le remplissage.
Tu devrais maintenant voir ce pied de page ajouté au bouton de ton tableau de bord.
La classe bg-light donne au pied de page une couleur de fond claire, et py-3 ajoute un espacement vertical. Nous avons divisé le pied de page en deux colonnes : une pour le droit d’auteur et une pour les liens. La classe text-md-end aligne les liens à droite sur les écrans de taille moyenne et les plus grands.
Réunir Le Tout
Combinons maintenant le code pour que tu puisses voir l’image complète.
<p><!DOCTYPE html><br />
<html lang="fr"><br />
<head><br />
<meta charset="UTF-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<title>Tableau De Bord Des Analyses</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script></p>
<p></head><br />
<body></p>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Tableau De Bord Des Analyses</a><br />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><br />
<span class="navbar-toggler-icon"></span><br />
</button></p>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Vue D’ensemble</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Rapports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Paramètres</a>
</li>
</ul></div>
</p></div>
</nav>
</header>
<p> <main class="container my-5"></p>
<div class="row">
<div class="col-md-8">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Trafic Du Site Web</h5>
<p> <canvas id="trafficChart"></canvas>
</div>
</p></div>
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Acquisition D’utilisateurs</h5>
<p> <canvas id="userChart"></canvas>
</div>
</p></div>
</p></div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Métriques Clés</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">Utilisateurs Totals : 10,000</li>
<li class="list-group-item">Nouveaux Utilisateurs : 500</li>
<li class="list-group-item">Taux De Rebond : 25%</li>
</ul></div>
</p></div>
</p></div>
</p></div>
<p> </main><br />
<script><br />
// Graphique en ligne du trafic du site web<br />
var trafficCtx = document.getElementById('trafficChart').getContext('2d');<br />
var trafficChart = new Chart(trafficCtx, {<br />
type: 'line',<br />
data: {<br />
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],<br />
datasets: [{<br />
label: 'Visiteurs Uniques',<br />
data: [8000, 9500, 10200, 9800, 11000, 12500],<br />
borderColor: 'rgba(75, 192, 192, 1)',<br />
fill: false<br />
}]<br />
},<br />
options: {<br />
responsive: true,<br />
scales: {<br />
y: {<br />
beginAtZero: true<br />
}<br />
}<br />
}<br />
});</p>
<p> // Graphique en barres de l'acquisition des utilisateurs<br />
var userCtx = document.getElementById('userChart').getContext('2d');<br />
var userChart = new Chart(userCtx, {<br />
type: 'bar',<br />
data: {<br />
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],<br />
datasets: [{<br />
label: 'Nouveaux Utilisateurs',<br />
data: [400, 450, 500, 450, 550, 600],<br />
backgroundColor: 'rgba(54, 162, 235, 0.6)'<br />
}]<br />
},<br />
options: {<br />
responsive: true,<br />
scales: {<br />
y: {<br />
beginAtZero: true<br />
}<br />
}<br />
}<br />
});<br />
</script><br />
</body></p>
<footer class="bg-light py-3">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>© 2023 Tableau De Bord Des Analyses. Tous droits réservés.</p>
</p></div>
<div class="col-md-6 text-md-end">
<a href="#">Politique de Confidentialité</a><br />
<a href="#" class="ms-3">Conditions D’utilisation</a>
</div>
</p></div>
</p></div>
</footer>
<p></html></p>Comme tu peux le voir, la barre de navigation responsive est en haut, avec les graphiques juste en dessous. Bootstrap gère le padding et l’espacement entre les éléments de la grille, que tu peux observer sur les métriques de ton tableau de bord.
En bas de l’écran se trouve le pied de page avec les liens vers la Politique de confidentialité et les Conditions d’utilisation.
Tu viens de créer un tableau de bord d’analyse simple avec Bootstrap. Mais Bootstrap possède des tonnes de composants que nous n’avons même pas encore explorés. Assure-toi d’explorer la bibliothèque de composants Bootstrap pour trouver des composants réutilisables pour tes futurs projets.
Une Boîte À Outils Pour Le Design Web Réactif
Bootstrap est un Framework populaire qui aide les développeurs web à créer rapidement des sites web réactifs. Il dispose d’un système de grille, de composants préconstruits, et d’options de personnalisation, facilitant le développement de sites web qui sont esthétiques sur différents appareils.
Les développeurs de tous niveaux d’expérience utilisent Bootstrap. C’est assez facile à apprendre, mais suffisamment puissant pour gérer de grands projets. Il existe une grande communauté d’utilisateurs de Bootstrap pour le soutien et de nombreuses ressources pour vous aider à apprendre le framework.
Lorsque tu construis un site Bootstrap, tu as également besoin d’une bonne société d’hébergement. DreamHost propose une option de serveur privé virtuel (VPS) qui fonctionne parfaitement. Elle est flexible et peut répondre à différents besoins au fur et à mesure que ton site Bootstrap se développe.
Pourquoi ne pas essayer Bootstrap et voir ce que tu peux créer ? Avec les bons outils et un plan d’hébergement d’une entreprise comme Dreamhost, tu peux réaliser des sites web réactifs en un rien de temps.
