IntroductionBootstrap est le cadriciel d'interface (UI framework) le plus populaire au monde. Il permet de simplifier et d'accélérer la réalisation de sites web responsives.
Qu’est-ce qu’un cadriciel ?
Un cadriciel est un ensemble cohérent de composantes logicielles. Celui-ci permet d’abstraire le niveau le plus technique du codage et d’ainsi multiplier la productivité des développeurs Web.
Il existe en fait deux types de cadriciel : les cadriciels back-end et les cadriciels d’interface.
Ce projet doit son origine à 𝕏, anciennement Twitter qui, dans le but de simplifier la réalisation et l'évolution de ses différents sites, a décidé de créer une base commune de mise en page entre celles-ci. Mark Otto, un des deux architectes de ce cadriciel, dit qu’il a transformé Bootstrap en projet à code ouvert pour « help awesome people make awesome shit ». Le résultat fut donc partagé gratuitement avec le reste de la communauté web et rencontra immédiatement un immense succès!
Si vous faites des recherches sur le web, vous trouverez plusieurs informations à propos de Bootstrap. Cependant,faites attention de bien valider la version dont l'article traite. Au moment d'écrire ces lignes, la version 5 est la plus récente et est celle qui sera enseignée en classe. La version 5.3 pour être plus exact.
Comme pour tout cadriciel (framework), afin d'avoir accès à ses fonctionnalités, il est nécessaire de l'inclure dans son projet. Dans le cas de Bootstrap il s'agit d'un cadriciel axé sur la mise en page, il est donc impératif d'importer sa feuille de style afin de bénéficier de ses fonctionnalités de base. Cependant, certains modules bonifiés requièrent aussi du JavaScript. L'importation de fichiers JS est donc optionnelle, mais suggérée afin de permettre à ces modules de fonctionner adéquatement.
Pour importer Bootstrap, il est possible:
- De télécharger Bootstrap à partir du site web officiel ou encore via GitHub, afin d'avoir une copie locale des fichiers. Cette approche offre l'avantage d'avoir accès aux fichiers sources et donc de pouvoir modifier certains paramètres de base de Bootstrap si désiré.
-
D'utiliser un service de CDN (Content Delivery Network), permettant simplement de pointer vers deux URL, un pour le fichier .css et un pour le fichier .js (JavaScript).
Cette approche est probablement la plus simple et plus rapide et offre d'excellentes performances.
HTML5 doctype
Bootstrap exige l'utilisation du doctype HTML5. Sans lui, vous verrez un style incomplet et funky, mais l'inclure ne devrait pas causer de problèmes considérables.
Balises <meta> pour des pages web réactives
Bootstrap est développé mobile first, une stratégie dans laquelle nous optimisons d'abord le code pour les appareils mobiles, puis nous mettons à l'échelle les composants si nécessaire en utilisant les media queries CSS. Pour garantir un rendu correct et un zoom tactile pour tous les appareils, ajoutez la métabalise responsive viewport à votre
.Notez qu'afin de mieux gérer les dimensions en CSS, Bootstrap définit le box-sizing de base à border-box ce qui s'appliquera sur l'ensemble de votre projet.
Il inclut aussi un Reboot, une feuille de style permettant de standardiser l'aspect par défaut des balises, afin de s'assurer que le résultat obtenu soit le même sur tous les navigateurs. Par exemple, une balise <h1> pourrait avoir normalement une taille de 32px sur Chrome et de 30px sur Firefox. Afin de standardiser cette taille, le fichier reboot définirait une taille de base pour tous les navigateurs.