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.



Catégories
Les logiciels, tutoriels et ressources ouvertes

La nouvelle version de Bootstrap

Avoir un site web personnel est devenu primordial de nos jours pour une communication plus forte avec nos clients et pour pouvoir leurs présenter notre activité d’une manière plus efficace. Plusieurs moyens existent aujourd’hui pour créer votre site web et sans doute Bootstrap est une framework libre qui vous permettra de créer facilement votre site web sans être un développeur informatique expérimenté. Il est un moyen simple et efficace qui complète le HTML et CSS mais avec plus de fonctionnalités qui concernent les buttons, les formulaires et la création des carrousels, il vous permet aussi de créer des sites web responsives.

Les nouveautés de Bootstrap :

Bootstrap 4 est la nouvelle version de ce Framework, sortie en 2018 cette version à apporter plusieurs nouveautés : 

  • La version 4 est compatible avec tous les moteurs de recherche (chrome, Internet Explorer, Opera …) 
  • Le passage de l’extension Less à Sass qui est la dernière version de CSS. 
  • Plus de facilité et simplicité pour les nouveaux développeurs web qui débutent dans le domaine de la création des sites web.

Cependant, la version 4 de Bootstrap n’est pas compatible avec la version 3, il faut donc prendre en considération les différents changements si on a déjà utilisé la version 3. Bootstrap 4 est présent sous la licence libre MIT, et vous pouvez l’avoir gratuitement sur le site: Télécharger Bootstrap 4

Source: 

https://getbootstrap.com/

https://www.w3schools.com/bootstrap4/