Tutoriel Bootstrap 5


Table des matières

    Afficher la table des matières

Bootstrap 5 est la dernière version de Bootstrap, qui est le framework HTML, CSS et JavaScript le plus populaire pour créer des sites Web réactifs et axés sur les mobiles.

Bootstrap 5 est entièrement gratuit à télécharger et à utiliser !

Commencez à apprendre Bootstrap 5 maintenant !

Essayez-le vous-même Exemples

Ce didacticiel contient des centaines d'exemples Bootstrap 5.

Avec notre éditeur en ligne, vous pouvez éditer le code, et cliquer sur un bouton pour visualiser le résultat.

Exemple d'amorçage 5

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>

Cliquez sur le bouton "Essayez-le vous-même" pour voir comment cela fonctionne.

Bootstrap 5 contre Bootstrap 3 et 4

Bootstrap 5 est la dernière version de Bootstrap ; 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 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.