TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Modèle de démarrage Bootstrap 5

141

Bootstrap 5 a été publié en tant que version publique finale. Cela signifie essentiellement que vous devez préparer la migration à partir de la version précédente et utiliser la nouvelle version pour créer de nouveaux sites Web. Que vous migriez ou que vous commenciez un nouveau site, vous devez d’abord apprendre le strict minimum ou le modèle de démarrage. Dans ce didacticiel, nous expliquerons comment créer un modèle de démarrage de base Bootstrap 5 pour démarrer vos projets avec des exemples simples.

Utilisation du modèle de démarrage Bootstrap 5

  1. Téléchargement des fichiers sources Bootstrap
  2. Hébergement des fichiers Bootstrap 5 sur votre serveur
  3. Utilisation du modèle de démarrage Bootstrap 5 avec des liens CDN
  4. Personnalisation des composants de Bootstrap 5
  5. Aller plus loin dans le modèle de démarrage
  6. Utilisation du fichier de script fourni dans la version 5
  7. Y compris les icônes Bootstrap
  8. Utiliser des générateurs de sites statiques

1 Téléchargement des fichiers sources de Bootstrap 5

En tant qu’utilisateur final, il existe deux façons d’utiliser les fichiers CSS et JavaScript Bootstrap. La première consiste à télécharger les fichiers précompilés et à les inclure dans vos projets et la seconde consiste à utiliser les liens CDN.

Vous pouvez en savoir plus sur l’obtention de fichiers Bootstrap dans l’ article Démarrer avec Bootstrap.

2 Utilisation de fichiers d’amorçage sur votre propre serveur

Vous pouvez télécharger les fichiers CSS et JavaScript précompilés à partir du référentiel GitHub. Le fichier zip doit contenir des dossiers CSS et JS. Voici les fichiers disponibles dans les dossiers CSS :

Modèle de démarrage Bootstrap 5

Bootstrap 5 fichiers

Il existe plusieurs versions CSS disponibles dans le fichier source téléchargé :

  • Fichiers CSS par défaut et minimisés que vous pouvez utiliser avec n’importe quel projet
  • Fichier utilitaires
  • Version grille uniquement
  • Redémarrer uniquement la version

Sur un serveur de production, vous pouvez utiliser la version minifiée "bootstrap.min.css" pour tous vos besoins. Les fichiers de mappage source aident à mapper entre la source et les versions minifiées précompilées. Vous n’avez pas besoin d’utiliser reboot, grid et map pour une utilisation régulière sur les sites.

Remarque : Lorsque vous utilisez uniquement le fichier « bootstrap.min.css » sur votre site, certains navigateurs comme Safari afficheront une erreur ou un avertissement dans la console de développement indiquant que le fichier de carte source est manquant. Afin de corriger l’erreur, ouvrez le fichier CSS Bootstrap et supprimez la dernière ligne "/ # sourceMappingURL=bootstrap.min.css.map /".

Semblable aux fichiers CSS, le dossier JS aura "bootstrap.js" et "bootstrap.bundle.js". Le fichier "bootstrap.js" n’inclut pas le script Popper mais la version bundle inclut le script Popper. Avec la version antérieure de Bootstrap 4, vous devez inclure jQuery séparément pour que les composants JavaScript fonctionnent correctement. Cependant, Bootstrap 5 n’a pas besoin de jQuery dans le cadre du framework et est conçu pour fonctionner sans jQuery.

Modèle de démarrage Bootstrap 5

Fichiers JS Bootstrap 5

Avec la compréhension ci-dessus, les fichiers source auront la structure suivante contenant beaucoup de fichiers CSS et JS.

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

Le modèle de démarrage de base devrait ressembler à ci-dessous lorsque vous hébergez les fichiers ci-dessus sur votre serveur :

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

N’oubliez pas que si vous n’utilisez pas le fichier JS fourni, vous devez inclure des fichiers de script JS et popper séparés. Si vous avez bien remarqué, il existe de nombreuses balises et scripts supplémentaires dans le modèle de démarrage.

  • Bootstrap utilise HTML5 DOCTYPE pour les modèles. Par conséquent, assurez-vous d’inclure <!DOCTYPE HTML> au début de votre modèle HTML afin d’éviter un comportement inattendu.
  • Vous devez utiliser la balise meta viewport pour garantir la réactivité du modèle en fonction du périphérique de rendu.
  • Si vous ajoutez jQuery, assurez-vous d’ajouter avant les scripts "popper.min.js" et "bootstrap.min.js".
  • Vous pouvez également télécharger le script Popper depuis le site Popper et le télécharger dans le dossier « assets/js/ » de votre site.
  • N’oubliez pas que le script Popper est essentiel pour que les plugins Bootstrap fonctionnent correctement. Popper est une bibliothèque JavaScript principalement utilisée pour positionner des éléments flottants comme le composant d’info-bulle dans Bootstrap.

Notez que nous avons utilisé "assets/css/bootstrap.min.css" et "assets/js/bootstrap.bundle.min.js" comme chemins de fichier. C’est une bonne habitude de conserver tous les fichiers CSS et JS dans un dossier séparé afin qu’il soit facile à gérer. Cela signifie essentiellement que vous devez créer les dossiers correspondants sur votre serveur et télécharger manuellement les fichiers Bootstrap CSS et JS. Conservez également les images dans un dossier « images » séparé et des fichiers HTML à la racine de votre site. Ainsi, la structure entière devrait ressembler à quelque chose comme ci-dessous sur votre serveur :

Modèle de démarrage Bootstrap 5

Structure de fichier de thème Bootstrap 5

Le « dossier thématique » dans l’exemple ci-dessus est le dossier racine de votre site qui doit être votre domaine ou sous-domaine ou sous-répertoire.

3 Utilisation du modèle de démarrage avec CDN

L’hébergement de tous les fichiers nécessaires sur votre serveur est la bonne méthode, mais cela aura un impact sur la vitesse de chargement et la capacité d’hébergement. Nous vous recommandons donc d’utiliser des liens CDN pour les fichiers CSS et JS au lieu de les héberger sur votre propre serveur. Cela garantira la livraison rapide de ces fichiers statiques et améliorera la vitesse de chargement des pages. Vous trouverez ci-dessous un modèle de démarrage Bootstrap 5 avec des liens CDN pour CSS et scripts. Vous pouvez simplement ajouter du contenu dans la section corps pour commencer à créer votre site ou votre thème. Auparavant, la version Bootstrap 4 provenait du réseau Bootstrap CDN et la dernière version 5 provenait de jsDelivr.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

4 Personnalisation des fichiers sources d’amorçage

L’utilisation des fichiers modèles complets n’est pas obligatoire dans tous les cas. Par exemple, lorsque vous souhaitez utiliser uniquement des boutons Bootstrap, vous ne pouvez utiliser que les styles appropriés pour les boutons. Bootstrap propose un personnalisateur pour la version précédente 3.4 où vous pouvez choisir les composants requis et générer les fichiers précompilés.

Modèle de démarrage Bootstrap 5

Personnalisation des fichiers d’amorçage

Pour le moment, aucun personnalisateur détaillé n’est disponible pour la version Bootstrap 5. Cependant, vous pouvez vous référer au site de documentation officiel pour obtenir plus de détails sur la personnalisation de Bootstrap 5.

5 Aller plus loin dans le modèle de démarrage

Maintenant que vous avez votre modèle de démarrage final hébergé sur votre serveur ou en utilisant des liens CDN. L’étape suivante consiste à ajouter du contenu et à commencer à créer votre site. Vous trouverez ci-dessous un exemple simple dans lequel nous avons créé différents boutons contextuels à l’aide des classes de boutons Bootstrap par défaut.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> </body> </html>

La sortie devrait ressembler à ci-dessous sur le navigateur :

Modèle de démarrage Bootstrap 5

Idéalement, il n’est pas nécessaire d’utiliser des fichiers de script jQuery, popper et Bootstrap pour créer des boutons simples contrôlés via CSS. Nous avons montré l’exemple par souci d’exhaustivité du modèle de démarrage. De plus, lorsque vous ajoutez d’autres composants, le fichier de script fourni doit être inclus.

6 Utilisation de la version de script intégrée à Bootstrap

Comme expliqué ci-dessus, Bootstrap 5 a un fichier de script groupé combinant «bootstrap.min.js» et «popper.min.js ». Donc, si vous souhaitez utiliser la version fournie, modifiez le modèle de démarrage comme ci-dessous en utilisant le fichier "bootstrap.bundle.min.js".

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> </head> <body> Add Your Content Here <!-- Bootstrap 5 Scripts --> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

7 Inclure les icônes Bootstrap dans le modèle

La version 5 de Bootstrap est livrée avec plus de 1300 icônes SVG gratuites que vous pouvez facilement inclure dans vos sites Web. Cela aide à éliminer la dépendance des icônes externes comme les icônes Font Awesome. Il existe plusieurs façons d’inclure les icônes dans votre modèle de démarrage et la meilleure option consiste à utiliser CDN CSS comme ci-dessous. Nous avons montré un exemple d’icône dans la section corps avec un composant d’alerte. Vous pouvez obtenir la liste complète des classes CSS pour les icônes ici.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <div class="alert alert-info" role="alert"> <i class="bi-star"></i> This is an info alert and <a href="#" class="alert-link">here is a link with info color</a>. </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

8 Utilisation de générateurs de sites statiques

Il est facile de créer un site Web statique à l’ aide du modèle de démarrage Bootstrap, mais la modification de plusieurs fichiers statiques sur un site plus volumineux prendra beaucoup de temps. Une seule page Web contient différentes sections telles que l’en-tête, le contenu principal, le pied de page et la barre latérale. Toutes les sections autres que le contenu principal sont utilisées sur l’ensemble du site avec les mêmes informations. Les générateurs statiques utilisent le concept de partiels en ayant les modèles de base pour chacune des sections comme l’en-tête, le pied de page et la barre latérale. Enfin, tous ces modèles de base sont assemblés avec le contenu du corps principal sur chaque page séparément.

Chaque fois qu’un changement est requis sur l’en-tête, le pied de page et la barre latérale, vous pouvez modifier les modèles de base au lieu de modifier chaque page individuellement. Lorsque le site est prêt, vous pouvez générer les fichiers HTML, CSS et JavaScript pour les télécharger sur votre serveur. L’un des générateurs de sites statiques les plus populaires est Harp.js que vous pouvez installer sur votre ordinateur local pour poursuivre le développement du modèle de démarrage. N’oubliez pas que Harp.js a besoin de Node.js/NPM en tant que dépendance, vous devez donc avoir installé ces composants au préalable. Alternativement, vous pouvez utiliser des applications génératrices comme Mobirise pour utiliser le framework Bootstrap sans avoir besoin de comprendre le codage.


Apprendre Bootstrap 5 (Index )


Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails