1. A propos du framework Bootstrap ?
1.1 Qu'est-ce que Bootstrap ?
Bootstrap est un framework de développement front-end gratuit et open source pour la création de sites Web et d'applications Web. Conçu pour permettre le développement réactif de sites Web mobiles, Bootstrap fournit un ensemble de syntaxes pour la conception de modèles.
En tant que framework, Bootstrap inclut les bases du développement Web réactif, de sorte que les développeurs n'ont besoin que d'insérer le code dans un système de grille prédéfini. Le framework Bootstrap est basé sur le langage de balisage hypertexte (HTML), les feuilles de style en cascade (CSS) et JavaScript. Les développeurs Web utilisant Bootstrap peuvent créer des sites Web beaucoup plus rapidement sans perdre de temps à se soucier des commandes et des fonctions de base.
1.2 Les conténeurs (containers) de Bootstrap
Les conteneurs sont l'élément de mise en page le plus basique de Bootstrap et sont nécessaires lors de l'utilisation de notre système de grille par défaut. Les conteneurs sont utilisés pour contenir, remplir et (parfois) centrer le contenu qu'ils contiennent. Bien que les conteneurs puissent être imbriqués, la plupart des mises en page ne nécessitent pas de conteneur imbriqué.
Syntaxe générale
|
1 2 3 4 5 |
<div class="container"> <div class="Element1"> Element1 </div> <div class="Element2"> Element2 </div> <div class="Element3"> Element3 </div> </div> |
Cela vous semble un peu abstrait, mais ne vous inquiètez pas! Nous vous le détaillerons sur des exemples simples dans les prochains paragraphes
Pourquoi utiliser Bootstrap ?
- Gagnez du temps avec des styles prédéfinis.
- Créez des designs adaptatifs facilement.
- Large communauté pour le support.
2. Installation de Bootstrap
2.1 Installation de Bootstrap via CDN
Ajoutez les liens suivants à votre fichier HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <!-- Contenu ici --> </body> </html> |
2.2 Installation de Bootstrap en local
Pour utiliser Bootstrap en local, vous devez télécharger les fichiers nécessaires (CSS et JS) et les inclure dans votre projet. Voici un guide détaillé pour y parvenir:
a. Télécharger Bootstrap
- Rendez-vous sur le site officiel de Bootstrap: https://getbootstrap.com/
- Cliquez sur Download pour accéder à la page de téléchargement.
- Choisissez l'option Compiled CSS and JS et téléchargez le fichier compressé (.zip).
- Décompressez le fichier téléchargé.
Vous obtiendrez une structure contenant les dossiers suivants:
- css/ : (contient les fichiers CSS nécessaires)
- js/ : (contient les fichiers JavaScript nécessaires)
b. Inclure les fichiers dans votre projet
Organisez votre projet : Créez une structure comme celle-ci :
|
1 2 3 4 |
/your_projet/ index.html /css/ /js/ |
c. organisation des fichiers et dossiers
- Copiez les fichiers de css/ et js/ : (extraits du zip de Bootstrap) dans les dossiers css/ et js/ de votre projet.
- Ajouter Bootstrap à votre HTML : Ouvrez votre fichier index.html et incluez les fichiers CSS et JS dans les balises <head> et avant la fin de <body> respectivement.
Exemple de code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Local</title> <!-- Inclure le CSS de Bootstrap --> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <h1 class="text-center">Hello, Bootstrap Local!</h1> <!-- Inclure le JavaScript de Bootstrap et ses dépendances --> <script src="js/bootstrap.bundle.min.js"></script> </body> </html> |
3. Système de Grille (Grid System)
3.1 Système de répartition des grilles en 12 colonnes
La grille Bootstrap repose sur un système de 12 colonnes. Cela signifie que, quelle que soit la taille de l’écran, la largeur totale disponible pour une rangée est divisée en 12 parts égales. Les classes comme col-4, col-6, et col-8 définissent combien de ces 12 colonnes sont occupées par un élément.
Comment fonctionne ce système ?
- La classe col-X : signifie qu'un élément occupe X colonnes sur les 12 disponibles.
- Si le total des colonnes dans une rangée dépasse 12: les colonnes débordent et se placent automatiquement sur une nouvelle ligne.
- Si le total est inférieur à 12 : l'espace restant est distribué de manière flexible.
Exemple simple
|
1 2 3 4 5 6 7 |
<div class="container"> <div class="row"> <div class="col-6" style="background-color: blue;">Colonne 1</div> <div class="col-4" style="background-color: yellow;">Colonne 2</div> <div class="col-2" style="background-color: green;">Colonne 3</div> </div> </div> |
Le système de grille est au cœur de Bootstrap et permet de créer des mises en page adaptatives.
3.1 Colonnes et rangées
Utilisez des conteneurs pour structurer vos pages :
|
1 2 3 4 5 6 7 |
<div class="container"> <div class="row"> <div class="col">Colonne 1</div> <div class="col">Colonne 2</div> <div class="col">Colonne 3</div> </div> </div> |
3.2 Breakpoints
Les breakpoints adaptent la mise en page aux différents écrans :
- col- : pour tous les écrans
- col-sm- : pour écrans étroits
- col-md- : pour écrans moyens
- col-lg- : pour écrans larges
- col-xl- : pour écrans très larges
4. Composants de Bootstrap
4.1 Boutons de Bootstrap
Le framework Bootstrap est doté d'une variété de boutons offrant un large choix aux développeurs. Voici les différents types de boutons disponibles les plus utilisés avec leurs exemples:
Exemple
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <button type="button" class="btn btn-primary">Bouton Principal</button> <button type="button" class="btn btn-secondary">Bouton Secondaire</button><br /><br /> <button type="button" class="btn btn-success">Succès</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Avertissement</button><br /><br /> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Clair</button> <button type="button" class="btn btn-dark">Sombre</button> <button type="button" class="btn btn-link">Lien</button> <br /><br /> </div> |
4.2 Alertes de Bootstrap
|
1 2 3 |
<div class="alert alert-warning" role="alert"> Ceci est une alerte ! </div> |
4.3 Barres de navigation de Bootstrap
4.3.1 A propos de la barre de navigation nav bar
Les liens de navigation de la barre de navigation navbar s'appuient sur les options de la classe .nav avec leur propre classe de modificateur et nécessitent l'utilisation de classes de bascule pour un style réactif approprié. La navigation dans les barres de navigation s'agrandira également pour occuper autant d'espace horizontal que possible afin de maintenir le contenu de votre barre de navigation bien aligné.
4.3.2 Contenu de la barre de navigation
Les barres de navigation sont livrées avec une prise en charge intégrée pour une poignée de sous-composants. Choisissez parmi les éléments suivants selon vos besoins :
- .navbar-brand : pour le nom de votre entreprise, produit ou projet.
- .navbar-nav : pour une navigation pleine hauteur et légère (y compris la prise en charge des menus déroulants).
- .navbar-toggler : à utiliser avec le plugin de réduction et d'autres comportements de basculement de navigation.
- .navbar-text : pour ajouter des chaînes de texte centrées verticalement.
- .collapse.navbar-collapse : pour regrouper et masquer le contenu de la barre de navigation par un point d'arrêt parent.
- .navbar-scroll facultatif : pour définir une hauteur maximale et faire défiler le contenu de la barre de navigation étendue.
Pour plus de détails, consultez le site officiel de Bootstrap: https://getbootstrap.com/docs/5.0/components/navbar/
4.3.3 Syntaxe générale
|
1 2 3 4 5 6 7 8 9 10 11 |
<nav class="navbar navbar-dark bg-dark"> <!-- Navbar content --> </nav> <nav class="navbar navbar-dark bg-primary"> <!-- Navbar content --> </nav> <nav class="navbar navbar-light" style="background-color: #e3f2fd;"> <!-- Navbar content --> </nav> |
Exemple navbar avec zone de recherche
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">My Site</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> |
4.4 Modales Bootstrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Ouvrir la Modale </button> <div class="modal fade" id="exampleModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Titre</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> Contenu de la modale. </div> </div> </div> </div> |
5. Formulaires de Bootstrap
5.1 Champs
|
1 2 3 4 5 6 |
<form> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Adresse email</label> <input type="email" class="form-control" id="exampleInputEmail1"> </div> </form> |
5.2 Validation
Ajoutez des classes comme is-invalid ou is-valid:
|
1 |
<input type="text" class="form-control is-valid"> |
6. Badge Bootstrap
Un badge numérique sur l'icône de notification est l'un des éléments utiles d'une interface conviviale. Ce badge avertit les utilisateurs de lire leurs notifications non lues et indique le nombre de notifications. Ainsi, dans ce tutoriel, nous allons créer un badge numérique sur l'icône de notification à l'aide de CSS. En gros, ce badge numérique peut être placé sur n'importe quelle icône comme indiqué dans l'image ci-dessous. Que vous utilisiez des icônes Font Awesome ou toute autre bibliothèque de polices iconiques, vous pouvez facilement placer ce badge sur votre icône. De même, vous pouvez également placer ce badge sur une image ou un élément div selon vos besoins.
6.1 Exemple de badge simple
|
1 2 3 4 5 6 7 |
<button type="button" class="btn btn-primary position-relative"> Inbox <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> 99+ <span class="visually-hidden">unread messages</span> </span> </button> |
6.2 Exemple de badge avec icône de notification
Afin de pouvoir afficher les notifications sur une icône à l'aide de Bootstrap, nous devons inclure la bibliothèque des icônes de Bootstrap:
|
1 |
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> |
Voici un exemple complet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Notification Badge Bootstrap</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5 text-center"> <div class="position-relative d-inline-block"> <!-- Icône de notification avec Bootstrap Icons --> <i class="bi bi-bell-fill" style="font-size: 2rem;"></i> <!-- Badge numérique --> <span class="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-danger"> 5 </span> </div> <p class="mt-3">Notifications</p> </div> </body> </html> |
7. Les cartes (cards) Bootstrap
7.1 A propos des cartes (cards) Bootstrap
Une carte est un conteneur de contenu flexible et extensible. Elle comprend des options pour les en-têtes et les pieds de page, une grande variété de contenus, des couleurs d'arrière-plan contextuelles et de puissantes options d'affichage.
7.2 Les principaux constituants des Cards Bootstrap
- card-header : Utilisée pour afficher un en-tête ou un titre en haut de la carte.
- card-body : Contient le contenu principal de la carte, comme du texte, des boutons ou d'autres éléments.
- card-title : Utilisée pour styliser et structurer le titre principal dans le corps de la carte.
- card-subtitle : Ajoute un sous-titre au contenu, généralement stylé avec une taille plus petite et une couleur discrète.
- card-text : Contient des paragraphes de texte standard dans la carte.
- card-footer : Utilisée pour afficher des informations en bas de la carte, souvent pour des notes ou des liens.
- card-img-top : Place une image au-dessus du contenu de la carte.
- card-img-bottom : Place une image en dessous du contenu de la carte.
- card-link : Stylise des liens dans la carte pour les rendre cohérents avec le design Bootstrap.
- list-group (dans une carte) : Affiche une liste à l'intérieur de la carte pour organiser des éléments.
- card-deck, card-group, card-columns : Fournissent différentes dispositions pour aligner plusieurs cartes dans une rangée ou une colonne.
Exemple de card Bootstrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="card text-black mb-3" style="max-width: 250px; margin: 10px;"> <!-- En-tête de la carte --> <div class="card-header bg-primary text-white">Card Header</div> <!-- Corps de la carte --> <h5 class="card-title" style="padding-left:10px;">Card title</h5> <div class="card-body" style="background-color: white; color:black;"> <p class="card-text"> Exemple de contenu inséré au sein d'une élégante carte Bootstrap CSS. </p> <!-- Bouton avec un lien --> <a href="#" class="btn btn-primary">En savoir plus !</a> </div> </div> |
Younes Derfoufi
CRMEF OUJDA
