Développer un site internet requiert des connaissances en HTML, CSS et JavaScript. Il faut avoir des compétences de programmation et d’intégration sur chacun de ces trois langages pour pouvoir maîtriser la création d’applications web. Il existe des collections d’outils contenant des codes HTML et CSS et des plugins JavaScript pour faciliter le développement et l’intégration d’une application. Nous allons aujourd’hui nous intéresser à Bootstrap, la collection la plus prisée et dont la dernière version Bootstrap 5 est sortie il y a de cela un an.
Qu’est-ce que Bootstrap ?
Bootstrap fait partie de ces « Front-End Framework » contenant une collection d’outils utiles à la création et au design de sites et d’applications web en front end. Il contient des codes HTML et CSS ainsi que des extensions JavaScript en option, permettant la création de formulaires, de boutons, d’outils de navigations et d’autres éléments interactifs à intégrer dans une application. Ce framework est pensé pour développer des designs interactifs adaptables à tout type d’écran, en particulier pour les smartphones.
Cette plateforme a été créée par deux développeurs qui gravitaient autour de l’écosystème Twitter, Mark Otto et Jacob Thornton, sous le premier nom de Twitter Blueprint en 2010. Elle a été ouverte au grand public lors de la première hackweek organisée par Twitter, et en août 2011, ces derniers placent Bootstrap sous licence open source.
Pourquoi utiliser Bootstrap ?
Bootstrap est facile à utiliser, n’importe qui ayant une connaissance basique des langages HTML et CSS peut le comprendre. De plus, ce framework correspond a une solution « responsive » qui s’ajuste aux téléphones, aux tablettes et aux ordinateurs. Enfin, la dernière version de Bootstrap est compatible avec tous les navigateurs modernes (Firefox, Chrome, Safari, Edge anciennement Internet Explorer et Opera).
Comment télécharger Bootstrap ?
Il existe plusieurs manières de télécharger bootstrap, vous pouvez vous rendre sur le site officiel et télécharger la dernière version en ligne. Vous pouvez également installer Bootstrap via npm, Composer ou Meteor, en exécutant par exemple l’une des lignes de commande suivantes dans une console :
Si vous ne voulez pas télécharger Bootstrap vous-même, vous pouvez l’inclure depuis un CDN (Content Delivery Network). Vous pouvez utiliser jsDelivr pour ceci de la manière suivante :
Comment utiliser Bootstrap ?
Nous allons maintenant voir comment créer un template basique d’une application ou d’une page web en utilisant Bootstrap. La première étape est de créer un fichier HTML basique sur lequel nous allons travailler, par exemple :
Remarque : essayez de toujours inclure la balisedans lepour permettre le zoom tactile et assurer un rendement adapté aux smartphones.
La prochaine étape est de transformer notre fichier HTML en un template Bootstrap. Ici, nous préférons la méthode utilisant les CDN car elle nous donne de meilleures performances en réduisant les temps de chargement, étant hébergée sur plusieurs serveurs à travers la planète.
Nous pouvons dorénavant créer nos premiers objets Bootstrap : des containers. Les containers sont les éléments de mise en page le plus basique de Bootstrap et sont nécessaires pour utiliser le système de grille. Ceux-ci sont essentiellement utilisés pour envelopper le contenu avec un certain rembourrage. Ils sont également utilisés pour aligner le contenu horizontalement au centre de la page dans le cas d’une mise en page à largeur fixe. Il y a trois types de containers :
- container, qui a une largeur maximale pour chaque breakpoint
- container-fluid qui a une largeur de 100% pour tous les breakpoints
- container-{breakpoint} qui a une largeur de 100% jusqu’au breakpoint renseigné
Voici un exemple de syntaxe pour l’utilisation des containers :
Vous savez dorénavant comment créer votre première page HTML en utilisant Bootstrap. Les possibilités sont nombreuses et vous pouvez trouver de nombreux templates sur le net, par exemple des creative commons sur bootstrapdash.
À vous de jouer !
Vous savez dorénavant comment créer votre première page HTML en utilisant Bootstrap. Les possibilités sont nombreuses et vous pouvez trouver de nombreux templates sur le net, par exemple des creative commons sur bootstrapdash.
A vous de jouer !
