Bootstrap5 Tutoriel

Bootstrap 教程

Bootstrap est la bibliothèque de composants front-end la plus populaire au monde, utilisée pour développer des projets WEB responsives et mobile-first.

Bootstrap5 est actuellement la dernière version de Bootstrap, une boîte à outils open source pour le développement HTML, CSS et JS. Il prend en charge les variables et mixins Sass, un système de grille responsive, de nombreux composants préconstruits et de puissants plugins JavaScript, vous aidant à concevoir et personnaliser rapidement des sites responsives et mobile-first.

À qui s'adresse ce tutoriel ?

Tant que vous avez des connaissances de base en HTML et CSS, vous pouvez lire ce tutoriel et développer votre propre site web. Après avoir terminé ce tutoriel, vous atteindrez un niveau intermédiaire d'utilisation de Bootstrap pour développer des projets web.

Connaissances nécessaires avant de lire ce tutoriel :

Avant de commencer à lire ce tutoriel, vous devez avoir des connaissances de base en HTML, CSS et JavaScript. Si vous n'êtes pas encore familier avec ces concepts, nous vous suggérons de lire d'abord ces tutoriels :

Pourquoi utiliser Bootstrap

  • Facile à prendre en main :Toute personne ayant une compréhension de base du HTML et du CSS peut utiliser Bootstrap très rapidement.

  • Design responsive :Bootstrap peut s'adapter selon différentes plateformes (téléphones mobiles, tablettes et ordinateurs de bureau).

  • Mobile-first :Dans Bootstrap, l'adaptation mobile est un élément essentiel du framework.

  • Compatibilité des navigateurs :Bootstrap5 est compatible avec tous les principaux navigateurs (Chrome, Firefox, Edge, Safari et Opera). Si vous devez prendre en charge IE11 et versions antérieures, veuillez utiliser Bootstrap4 ou Bootstrap3.

Exemples Bootstrap5

Voici un exemple simple de Bootstrap5 :

Exemples Bootstrap5

<div class="container-fluid p-5 bg-primary text-white text-center"> <h1>Ma première page Bootstrap</h1> <p>Ceci est une page responsive. Redimensionnez le navigateur pour voir l'effet !</p> </div> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>Première colonne</h3> <p>Exemple</p> <p>Ce que nous apprenons n'est pas seulement la technologie, mais aussi des rêves !!!</p> </div> <div class="col-sm-4"> <h3>Deuxième colonne</h3> <p>Exemple</p> <p>Ce que nous apprenons n'est pas seulement la technologie, mais aussi des rêves !!!</p> </div> <div class="col-sm-4"> <h3>Troisième colonne</h3> <p>Exemple</p> <p>Ce que nous apprenons n'est pas seulement la technologie, mais aussi des rêves !!!</p> </div> </div> </div>

Essayez-le vous-même »

Bootstrap5 vs Bootstrap 3 & 4

Bootstrap5 est la dernière version de Bootstrap, utilisant de nouveaux composants, des feuilles de style plus rapides et une réactivité plus rapide.

Bootstrap5 prend en charge toutes les dernières versions stables majeures des navigateurs, mais ne prend pas en charge Internet Explorer 11 et les versions inférieures.

La principale différence entre Bootstrap5 et Bootstrap 3 & 4 est que Bootstrap5 ne dépend plus de jQuery et utilise leJavaScriptnatif. Bien sûr, si nous voulons l'utiliser, nous pouvons aussi l'introduire.jQuery。

Bootstrap5 ne prend pas en charge les navigateurs inférieurs à IE11 ; Bootstrap4 a abandonné la prise en charge d'IE8 et d'iOS 6. Si vous avez besoin d'une compatibilité avec des navigateurs plus anciens, veuillez utiliserBootstrap3。

Remarque :L'équipe officielle maintient toujours Bootstrap 3 et Bootstrap 4, nous pouvons donc continuer à les utiliser ; cependant, aucune nouvelle fonctionnalité ne sera ajoutée à Bootstrap 3 & 4.

Autres extensions