Introduction à Bootstrap 5

Qu'est-ce que Bootstrap ?

  • Bootstrap est un cadre frontal gratuit qui permet de développer des sites Web plus rapidement et plus facilement
  • Bootstrap inclut des modèles de conception basés sur HTML et CSS pour la mise en page, les formulaires, les boutons, les tableaux, la navigation, les modaux, les diaporamas d'images, etc.
  • Bootstrap propose une riche collection de plugins JavaScript
  • Bootstrap vous permet de créer facilement des conceptions responsives

Qu'est-ce que la conception de site web responsive ?

La conception de site web responsive vise à créer des sites qui s'adaptent automatiquement pour améliorer l'expérience utilisateur sur tous les appareils, que ce soit des téléphones ou des ordinateurs de bureau de grande taille.

Exemple Bootstrap 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Ma première page Bootstrap</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Colonne 1 : Printemps</h3>
      <p>Un jour ensoleillé, je cherche des fleurs sur la rive du lac Si, la vue est nouvelle sans limite.</p>
      <p>On peut facilement reconnaître le visage de l'Est, toujours printanier avec des milliers de couleurs.</p>
    </div>
    <div class="col-sm-4">
      <h3>Colonne 2 : Quintet de l'été</h3>
      <p>Les couleurs rouges et pourpres sont devenue de la poussière, et le chant du coucou annonce l'été.</p>
      <p>Les mûriers et les mèches des deux côtés de la route ne s'arrêtent pas, on ne sait pas que l'on est un homme de paix.</p>
    </div>
    <div class="col-sm-4">
      <h3>Colonne 3 : Montagne</h3>
      <p>De loin, la pente rocheuse de la montagne est oblique, et il y a des maisons là où les nuages naissent.</p>
      <p>Se tenir arrêté sous les feuilles d'érable pour aimer le crépuscule, les feuilles pourpres sont plus rouges que les fleurs de février.</p>
    </div>
  </div>
</div>

Essayez-le vous-même

Version de Bootstrap

Bootstrap 5 (publié en 2021) est la dernière version de Bootstrap (publiée en 2013) ; il utilise de nouveaux composants, des feuilles de style plus rapides, et offre une capacité de réponse plus rapide.

Bootstrap 5 prend en charge les versions stables les plus récentes de tous les principaux navigateurs et plateformes. Cependant, il ne prend pas en charge Internet Explorer 11 et les versions antérieures.

La principale différence entre Bootstrap 5 et Bootstrap 3 & 4 réside dans le passage de Bootstrap 5 à Vanilla JavaScript plutôt qu'à jQuery.

Remarque :L'équipe continue de soutenir les corrections des erreurs critiques et les modifications des documents pour Bootstrap 3 et Bootstrap 4, il est donc complètement sécurisé de continuer à les utiliser. Cependant, aucune nouvelle fonctionnalité ne sera ajoutée.

Pourquoi utiliser Bootstrap ?

Les avantages de Bootstrap :

  • Facilité d'utilisation :N'importe qui ayant une base de connaissances en HTML et CSS peut commencer à utiliser Bootstrap immédiatement.
  • Caractéristiques responsives :Le CSS responsive de Bootstrap peut être ajusté pour les téléphones, les tablettes et les ordinateurs de bureau.
  • Méthode priorisant le mobile :Dans Bootstrap, les styles priorisant le mobile font partie intégrante de son cadre.
  • Compatibilité des navigateurs :Bootstrap 5 est compatible avec tous les navigateurs modernes (Chrome, Firefox, Edge, Safari et Opera).

Attention :Si vous devez prendre en charge IE11 et les versions antérieures, vous devez utiliser BS4 ou BS3.

Où obtenir Bootstrap 5 ?

Il y a deux méthodes pour utiliser Bootstrap 5 sur votre propre site.

Vous pouvez :

  • Inclut Bootstrap 5 provenant du CDN
  • Télécharger Bootstrap 5 à partir de getbootstrap.com

Bootstrap 5 CDN

Si vous ne souhaitez pas télécharger et héberger vous-même Bootstrap 5, vous pouvez l'importer à partir du CDN (réseau de distribution de contenu).

CodeW3C.com fournit un support CDN pour les CSS et JavaScript de Bootstrap :

MaxCDN:

<!-- CSS compilé et compressé le plus récent -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- JavaScript compilé le plus récent -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

L'un des avantages de l'utilisation de Bootstrap 5 CDN :

De nombreux utilisateurs ont déjà téléchargé Bootstrap 5 depuis jsDelivr lors de leur visite sur un autre site. Par conséquent, lorsqu'ils visitent votre site, il sera chargé à partir du cache, ce qui raccourcit le temps de chargement. De plus, la plupart des CDN assurent que dès qu'un utilisateur en fait la demande, il est servi par 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 tooltips, les pop-ups, etc.). Cependant, si vous ne utilisez que la partie CSS de Bootstrap, vous n'en avez pas besoin.

Télécharger Bootstrap 5

Si vous souhaitez télécharger et héberger vous-même Bootstrap 5, veuillez visiter https://getbootstrap.com/, puis suivez les instructions indiquées là.

Créez votre première page avec Bootstrap 5

1. Ajouter le type de document HTML5

Bootstrap 5 utilise des éléments HTML et des attributs CSS nécessitant le doctype HTML5.

Incluez toujours le doctype HTML5 à l'beginning de la page, ainsi que les attributs lang et le titre correct, ainsi que le jeu de caractères :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Exemple de Bootstrap 5</title>
    <meta charset="utf-8">
  </head>
</html>

2. Priorité mobile de Bootstrap 5

L'objectif de conception de Bootstrap 5 est de répondre aux appareils mobiles. Les styles à priorité mobile sont une partie intégrante du cadre.

Pour assurer un rendu correct et une zoomabilité tactile, veuillez <head> Ajoutez les éléments suivants à l'intérieur de l'élément <meta> Balise :

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width Définit la largeur de la page pour suivre le screen-width de l'appareil (qui peut varier d'un appareil à l'autre).

initial-scale=1 Définit le niveau de zoom initial lors du chargement de la page par le navigateur.

3. Conteneur

Bootstrap 5 encore nécessite un élément de conteneur pour envelopper le contenu du site.

Il y a deux classes de conteneurs disponibles :

  1. .container La classe fournit un conteneur de largeur fixe responsive
  2. .container-fluid La classe fournit un conteneur de largeur complète, couvrant toute la largeur de la fenêtre de visualisation

Deux pages de base Bootstrap 5

Exemple de conteneur

L'exemple suivant montre le code d'une page de base Bootstrap 5 (avec un conteneur de largeur fixe responsive) :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Exemple Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>Ma première page Bootstrap</h1>
  <p>Cette section est dans la classe .container.</p>
  <p>La classe .container fournit un conteneur de largeur fixe responsive.</p>
</div>
</body>
</html>

Essayez-le vous-même

Exemple de conteneur fluide

L'exemple suivant montre le code d'une page de base Bootstrap 5 (avec un conteneur de largeur complète):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Exemple Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Ma première page Bootstrap</h1>
  <p>Cette section est dans la classe .container-fluid.</p>
  <p>La classe .container-fluid fournit un conteneur de largeur complète, couvrant toute la largeur de la fenêtre de visualisation.</p>
</div>
</body>
</html>

Essayez-le vous-même