Bootstrap est un framework front-end gratuit pour un développement Web plus rapide et plus facile
Bootstrap comprend des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les boutons, les tableaux, la navigation, les modaux, les carrousels d'images et bien d'autres, ainsi que des plugins JavaScript en option.
Bootstrap vous donne également la possibilité de créer facilement des conceptions réactives
Qu'est-ce que le Responsive Web Design ?
La conception Web réactive consiste à créer des sites Web qui s'ajustent automatiquement eux-mêmes pour bien paraître sur tous les appareils, des petits téléphones aux grands ordinateurs de bureau.
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>Essayez-le vous-même →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Bootstrap 5 (sortie en 2021) est la dernière version de Bootstrap (publié en 2013); avec de nouveaux composants, une feuille de style plus rapide et plus de réactivité.
Bootstrap 5 prend en charge les dernières versions stables de tous les principaux navigateurs et plates-formes. Cependant, Internet Explorer 11 et versions ultérieures ne sont pas pris en charge.
Les principales différences entre Bootstrap 5 et Bootstrap 3 et 4 sont que Bootstrap 5 est passé à JavaScript Vanilla au lieu de jQuery.
Remarque : Bootstrap 3 et Bootstrap 4 sont toujours pris en charge par l'équipe pour les corrections de bogues critiques et les modifications de la documentation. et il est parfaitement sûr de continuer à les utiliser. Cependant, de nouvelles fonctionnalités ne seront PAS ajoutées à eux.
Avantages de Bootstrap :
Facile à utiliser : toute personne possédant seulement des connaissances de base en HTML et CSS peut commencer à utiliser Bootstrap.
Fonctionnalités réactives : le CSS réactif de Bootstrap s'adapte aux téléphones, tablettes et ordinateurs de bureau
Approche axée sur le mobile : dans Bootstrap, les styles axés sur le mobile font partie du cadre de base
Compatibilité des navigateurs : Bootstrap 5 est compatible avec tous les navigateurs modernes (Chrome, Firefox, Edge, Safari et Opera). Notez que si vous avez besoin d'une prise en charge pour IE11 et versions antérieures, vous devez utiliser soit BS4 ou BS3.
Il existe deux façons de commencer à utiliser Bootstrap 5 sur votre propre site Web.
Tu peux:
Inclure Bootstrap 5 à partir d'un CDN
Téléchargez Bootstrap 5 sur getbootstrap.com
Si vous ne souhaitez pas télécharger et héberger Bootstrap 5 vous-même, vous pouvez l'inclure à partir d'un CDN (Content Delivery Network).
jsDelivr fournit un support CDN pour le CSS et le JavaScript de Bootstrap :
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>Un avantage de l'utilisation du CDN Bootstrap 5 :
De nombreux utilisateurs ont déjà téléchargé Bootstrap 5 de jsDelivr lors de la visite un autre site. En conséquence, il sera chargé à partir du cache lorsqu’ils visiteront votre site, ce qui entraînera un temps de chargement plus rapide. De plus, la plupart des CDN s'assureront qu'une fois qu'un utilisateur lui demandera un fichier, celui-ci sera servi. depuis le serveur le plus proche, ce qui entraîne également un temps de chargement plus rapide.
JavaScript ?
Bootstrap 5 utilise JavaScript pour différents composants (comme les modaux, les info-bulles, les popovers, etc.). Cependant, si vous utilisez simplement le Partie CSS de Bootstrap, vous n'en avez pas besoin.
Si vous souhaitez télécharger et héberger Bootstrap 5 vous-même, accédez à https://getbootstrap.com/, et suivez les instructions qui s'y trouvent.
1. Ajoutez le doctype HTML5
Bootstrap 5 utilise des éléments HTML et des propriétés CSS qui nécessitent le doctype HTML5.
Incluez toujours le doctype HTML5 au début de la page, avec l'attribut lang et le titre et le jeu de caractères corrects :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>2. Bootstrap 5 est axé sur le mobile
Bootstrap 5 est conçu pour répondre aux appareils mobiles. Les styles axés sur le mobile sont fait partie du cadre de base.
Pour garantir un rendu et un zoom tactile corrects, ajoutez la balise suivante à l'intérieur du Élément <head> :
<meta name="viewport" content="width=device-width, initial-scale=1">La partie width=device-width définit la largeur de la page pour qu'elle suive la largeur de l'écran de l'appareil (qui varie en fonction de l'appareil).
La partie initial-scale=1 définit le niveau de zoom initial lors du premier chargement de la page par le navigateur.
3. Conteneurs
Bootstrap 5 nécessite également un élément conteneur pour envelopper le contenu du site.
Vous avez le choix entre deux classes de conteneurs :
La classe .container fournit un conteneur à largeur fixe réactif.
La classe .container-fluid fournit un conteneur pleine largeur, couvrant toute la largeur de la fenêtre d'affichage.
L'exemple suivant montre le code d'une page Bootstrap 5 de base (avec un conteneur réactif à largeur fixe) :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>Essayez-le vous-même →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>
</body>
</html>
L'exemple suivant montre le code d'une page Bootstrap 5 de base (avec un conteneur pleine largeur) :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>Essayez-le vous-même →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>