Catégories
Merci de m'enlever des points

Calendrier de l’avent jour 22: Comment utiliser Bootstrap 4?

Avec de nouveaux composants et un style plus réactif, Boostrap 4 propose plus de réactivité. L’outil est très rapide et efficace pour créer un site réactif et responsive. La plateforme accessible en Open Source propose des variables Ssass mais aussi un mixin, un système de grill réactif et de nombreux composants prédéfinis pour permettre la création rapide de sites. Ainsi, il est possible de créer un site avec de peu de lignes de codes ajoutés. Voici ses différentes fonctionnalités pour mieux l’utiliser :

Fonctionnalités de Boostrap 4

Outre la structure « front-end » qui a été complètement remaniée, la nouvelle version de Bootstrap propose un nouveau module de réinitialisation appelé Reboot. Celui-ci permet de déplacer tous les éléments génériques et styles de réinitialisation.

Deuxième fonctionnalité, JsDeliver intervient lorsque vous avez uniquement besoin d’inclure le CSS ou le JS de Boostrap compilé. Il est aussi possible d’inclure Popper.Js avec cette fonctionnalité.

Et, pour la première fois, Bootstrap possède sa propre bibliothèque d’icônes et de fichiers open source. Ceux-ci sont conçus pour améliorer le fonctionnement de la plateforme mais aussi pour mieux fonctionner avec Boostrap. Ce sont des SVG qui évoluent rapidement et facilement. Ils peuvent être implantés de plusieurs façons pour avoir un CSS plus stylé.

Le logiciel Open Source dispose également de nombreux plugins JavaScript. Compatible avec toutes les versions de navigateurs stables, mais aussi sur de nombreuses plateformes, Bootstrap 4 n’est cependant pas accessible sur Internet Explorer 9 et les versions antérieures.

Installation de Boostrap 4

Pour installer Bootstrap 4, il faut d’abord récupérer les fichiers Bootstrap. Pour ce faire, il faut cliquer sur le bouton téléchargements sur le site de la bibliothèque. Une fois sur la page de téléchargements, il y a deux options :

  • Download pour récupérer les fichiers nécessaires au fonctionnement de la plateforme.

  • Download Source pour récupérer tous les fichiers sources et la documentation.

En téléchargeant avec le fichier Download Source, vous avez accès à un fichier zippé qui contient des fichiers et dossiers importants. Dans les dossiers Dist, vous avez les fichiers utiles à l’utilisation de la plateforme :

  • bootstrap.css : contenant les classes de base

  • bootstrap.js : contenant les codes JavaScript des composants Boostrap

  • boostrap.bundle.js : qui contient des codes JavaScript des composants Boostrap

Pour que Boostrap 4 fonctionne, il est nécessaire que les pages HTML soient au format HTML5. Ensuite, il faut intégrer le fichier boostrap.min.css dans l’en-tête de la page web pour avoir accès à toutes les classes.



Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

20 − 17 =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.