OUJOOD.COM
Exemples bootstap 5
Ce tutoriel contient plusieurs exemples de Bootstrap 5.
Code
<!DOCTYPE html>
<html lang="fr">
<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.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Ma première page Bootstrap</h1>
<p>Redimensionner cette page responsive pour voir l'effet !</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Colonne 1</h3>
<p>Lorem Ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Unt enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Colonne 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Unt enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Colonne 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Unt enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Bootstrap 5 vs. Bootstrap 3 & 4
Bootstrap 5 est la toute dernière version de Bootstrap ; avec de nouveaux composants, une feuille de style plus rapide et une plus grande réactivité.
Bootstrap 5 prend en charge les dernières versions stables de tous les principaux navigateurs et plateformes. Toutefois, Internet Explorer 11 et versions ultérieures ne sont pas pris en charge.
La principale différence entre Bootstrap 5 et Bootstrap 3 & 4 est que Bootstrap 5 utilise JavaScript 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 vous pouvez continuer à les utiliser en toute sécurité.
Cependant, aucune des nouvelles fonctionnalités ne leur sera ajoutée.
Démarrage de Bootstrap 5
Qu'est-ce que Bootstrap ?
Bootstrap est un front-end framework 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 modales, les carrousels d'images et bien d'autres, ainsi que des plugins JavaScript facultatifs.
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'adaptent automatiquement pour être beaux sur tous les appareils, des petits téléphones aux grands ordinateurs de bureau.
Pourquoi utiliser Bootstrap ?
Avantages de Bootstrap :
Facile à utiliser : Toute personne ayant des connaissances de base en HTML et CSS peut commencer à utiliser Bootstrap.
Fonctions réactives : Le CSS réactif de Bootstrap s'adapte aux téléphones, aux tablettes et aux ordinateurs de bureau.
Approche "mobile-first" : Dans Bootstrap, les styles " mobile-first " font partie du cadre de base.
Compatibilité avec les navigateurs : Bootstrap 5 est compatible avec tous les navigateurs modernes (Chrome, Firefox, Edge, Safari et Opera). Notez que si vous avez besoin de la prise en charge d'IE11 et des versions ultérieures, vous devez utiliser BS4 ou BS3.
Où obtenir Bootstrap 5 ?
Il y a deux façons de commencer à utiliser Bootstrap 5 sur votre propre site Web.
Vous pouvez : Inclure Bootstrap 5 à partir d'un CDN ou Télécharger et héberger Bootstrap 5 depuis getbootstrap.com
Bootstrap 5 à partir d`un CDN
Si vous ne souhaitez pas télécharger et héberger vous-même Bootstrap 5, vous pouvez l'inclure à partir d'un CDN (Content Delivery Network).
jsDelivr fournit un support CDN pour les CSS et JavaScript de Bootstrap que vous devez mettre dans le head de votre page :
Code
<!-- Les dernières CSS compilées et minifiées --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Le dernier JavaScript compilé --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
Avantage de l'utilisation du CDN de Bootstrap 5 :
Un grand nombre d'utilisateurs ont déjà téléchargé Bootstrap 5 depuis jsDelivr lorsqu'ils ont visité un autre site. Par conséquent, il sera chargé à partir du cache lorsqu'ils visiteront votre site, ce qui accélère le temps de chargement. En outre, la plupart des CDN veillent à ce que, lorsqu'un utilisateur demande un fichier, celui-ci soit servi par le serveur le plus proche, ce qui accélère également le temps de chargement.
JavaScript ?
Bootstrap 5 utilise JavaScript pour différents composants (comme les fenêtres modales, les info bulles, les popovers, etc.) Cependant, si vous utilisez uniquement la partie CSS de Bootstrap, vous pouvez vous passer de JavaScript de bootstrap et ne pas l’inclure dans votre page.
Télécharger Bootstrap 5
Si vous souhaitez télécharger et héberger vous-mêmes Bootstrap 5, rendez-vous sur le site https://getbootstrap.com/ et suivez les instructions qui y figurent.
Pour créer votre première page Web avec Bootstrap 5 il faut : Ajouter le doctype HTML5 :
Bootstrap 5 utilise des éléments HTML et des propriétés CSS qui nécessitent le doctype HTML5.
Il faut toujours inclure le doctype HTML5 au début de la page, ainsi que l'attribut lang et le titre et le jeu de caractères corrects comme suit:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple Bootstrap 5 </title>
<meta charset="utf-8">
</head>
</html>
Bootstrap 5 est axé sur le mobile
Comme Bootstrap 5 est conçu pour être adapté aux appareils mobiles. Les styles mobile-first font partie du framework de base.
Pour assurer un bon rendu et un zoom tactile, ajoutez la balise <meta> suivante à l'intérieur de l'é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 lorsque la page est chargée pour la première fois par le navigateur.
Conteneurs
Bootstrap 5 requiert é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 réactif à largeur fixe.
La classe .container-fluid fournit un conteneur pleine largeur, qui s'étend sur toute la largeur de la fenêtre d'affichage. Deux exemples de basique de Bootstrap 5
L'exemple suivant montre le code d'une page Bootstrap 5 de base (avec un conteneur réactif à largeur fixe) :
Code
<!DOCTYPE html> <html lang="fr"> <head> <title>Exemple Bootstrap </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container"> <h1>Ma première page Bootstrap</h1> <p>Cette partie se trouve à l'intérieur d'une classe .container.</p> <p>La classe .container fournit un conteneur réactif à largeur fixe.</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="fr"> <head> <title> Exemple Bootstrap </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Ma première page Bootstrap</h1> <p>Cette partie se trouve à l'intérieur d'une classe .container-fluid.</p> <p>La classe .container-fluid fournit un conteneur pleine largeur, s'étendant sur toute la largeur de la fenêtre d'affichage.</p> </div> </body> </html>