Bootstrap 5 est la version la plus récente du framework Bootstrap qui permet à ses utilisateurs de créer des sites Web réactifs construits avec une technique de mobile axée sur le mobile. Bootstrap 5 a été lancé en 2021 et a de nombreuses caractéristiques de distinction telles qu'elle a des feuilles de style rapide et une réactivité améliorée. Dans ce tutoriel, nous allons montrer comment vous pouvez créer une page Web simple à l'aide de bootstrap 5.

Commençons.

Comment créer votre première page Web à l'aide de bootstrap 5

Inclure le bootstrap 5

La première étape consiste à ajouter évidemment Bootstrap 5 dans votre fichier HTML. Dans le but d'inclure Bootstrap 5, obtenez un CDN pour CSS, et JavaScript et ajoutez-le dans votre fichier comme nous l'avons montré ci-dessous.

En dehors du CDN, nous avons également ajouté un jeu de caractères UTF-8 avec une balise de méta réactive. Dans cette balise, la largeur est définie sur la largeur de l'appareil, ce qui signifie que la largeur de la page Web changera en correspondance avec la largeur de l'appareil, tandis que l'échelle initiale est définie sur 1, ce qui signifie lorsque la page Web est chargée par le navigateur Pour la première fois, le niveau de zoom sera 1.

Faire une barre de navigation

Après avoir inclus Bootstrap 5 dans notre fichier, nous ferons maintenant une barre de navigation supérieure en utilisant diverses classes bootstrap 5.

Ci-dessous, nous allons expliquer les différentes classes utilisées pour créer une barre de navigation.

1. Le .barre navale est utilisé pour envelopper une barre de navigation avec .navbar-expand-sm pour l'effondrement réactif, en attendant le .bg-secondaire et .Navbar-Dark Les différents schémas de couleurs sont-ils fournis à la barre de navigation.
2. Le .récipient La classe enveloppe tous les éléments d'une barre de navigation avec une largeur fixe.
3. Le .blanc et .centre de texte Les classes correspondent à la couleur et à l'alignement de la rubrique principale du site Web.
4. Le .navbar-nav est utilisé pour créer une barre de navigation qui a une hauteur maximale et qui est légère et prend également en charge les listes déroulantes. Entre-temps, .ML-AUTO Définit la marge gauche des éléments de la liste à Auto.
5. Le .Naval-Item, et .liaison de navigation sont utilisés pour créer divers éléments de liste dans la barre de navigation.
6. Le .actif La classe rend un lien actif.

Sortir

Une barre de navigation a été créée avec succès.

Ajout de contenu

Maintenant que nous avons réussi à créer une barre de navigation, nous ajouterons du contenu sur le site Web. Dans le code ci-dessous, nous ajoutons simplement du texte à la section «About Us».

À propos de nous

Salut. Bienvenue dans ma première page Web. Ceci est une page Web réactive que j'ai créée à l'aide de bootstrap 5. Bootstrap est la version la plus récente du framework Bootstrap qui permet à ses utilisateurs de créer des sites Web réactifs avec une technique de mobile. Cette approche indique que la conception Web est d'abord développée pour les téléphones mobiles, puis pour d'autres appareils.

Bootstrap 5 a été lancé en 2021 et possède de nombreuses fonctionnalités incroyables telles qu'elle a des feuilles de style rapide et une réactivité améliorée.

Diverses classes utilisées pour ajouter du contenu sur la page Web sont expliquées ici.

1. Le .ligne La classe crée une ligne dans laquelle nous allons placer notre texte, en attendant, .Align-Items-Left La classe aligne le contenu à gauche.
2. Le .col La classe génère une colonne, tandis que le .couleur de texte La classe fournit une couleur par défaut du texte.

Note: Afin d'ajouter du contenu, nous avons essentiellement construit un système de grille ci-dessus. Un système de grille dans Bootstrap 5 utilise divers conteneurs, rangées et colonnes pour ajuster et aligner le contenu.

Sortir

Un contenu a été ajouté à la page Web.

Ajout d'une galerie d'images

Pour rendre notre site Web encore intéressant, nous ajoutons maintenant des images en construisant un autre système de grille.

Ici, nous avons expliqué les classes utilisées ci-dessus.

1. Le .col-md-4 La classe crée quatre colonnes de largeur égale et spécifie que la largeur de l'appareil est moyenne ou supérieure à 768px, en attendant, la largeur du conteneur est de 720px.
2. Le .MT-3 La classe fournit un haut de marge à la mise en page de la grille.
3. Le .col-lg-3 La classe crée 3 colonnes de largeur égale et indique que la largeur de l'appareil est grande avec une taille d'écran supérieure ou égale à 992px.
4. Enfin, les images sont rendues réactives .img-fluiClasse D.

Sortir

Une galerie d'images réactive a été ajoutée avec succès.

Ajout d'un bouton

Enfin, nous allons ajouter un bouton sur notre site Web.

Contactez-nous

Les classes utilisées pour créer le bouton sont discutées ci-dessous.

1. Le .mt-2 Définit la marge en haut du bouton.
2. Dans le but de personnaliser notre bouton, nous utilisons le .btn classe, en attendant, le .btn-secondaire La classe spécifie la couleur du bouton et le .plus grand La classe indique la taille du bouton.

Sortir
C'est à quoi ressemble la page Web complète.

Une page Web simple a été créée avec succès à l'aide de bootstrap 5.

Note: Pour évaluer la réactivité de la page Web à l'échelle du navigateur Web de haut en bas.

Conclusion

Dans le but de créer votre première page Web à l'aide de Bootstrap 5, vous devez avoir une compréhension de base de divers classes intégrées Bootstrap 5. Une nécessité de base de ce cadre est un conteneur qui enveloppe les éléments à l'intérieur. Les classes de conteneurs peuvent être utilisées avec d'autres classes pour créer diverses entités qu'une page Web a comme une barre de navigation, une grille d'image, des boutons, etc. Dans cet article, nous avons démontré à l'aide d'un exemple approprié comment vous pouvez créer votre première page Web à l'aide de bootstrap 5.