Présentation de Bootstrap

Dans cette première leçon, nous allons commencer par définir ce qu’est Bootstrap.

Nous soulignerons ensuite les avantages ainsi que les limites de ce framework afin que vous ayez immédiatement une idée des cas où il va être intéressant de l’utiliser et ceux où il faudra privilégier d’autres solution.

Nous verrons enfin les nouveautés apportées par la version 4 de Bootstrap qui est la version avec laquelle nous allons travailler et en profiterons pour mettre en place notre environnement de travail.

 

Qu’est-ce que Bootstrap ?

Bootstrap est un framework CSS. Un framework correspond à un ensemble de librairies regroupées dans un but précis et possédant des règles internes que doivent suivre les utilisateurs.

En d’autres termes, et pour le dire très simplement, Bootstrap est un ensemble de fichiers CSS et JavaScript fonctionnant ensemble et qu’on va pouvoir utiliser pour créer des design complexes de manière relativement simple.

Le framework Bootstrap est donc un ensemble de fichiers CSS et JavaScript qui contiennent des règles prédéfinies et qui définissent des composants. Ces ensembles de règles sont enfermés dans des classes et nous n’aurons donc qu’à utiliser les classes qui nous intéressent afin d’appliquer un ensemble de styles à tel ou tel élément HTML.

De plus, Bootstrap utilise également des fichiers JavaScript et notamment des librairies JavaScript externes comme jQuery ou Popper pour définir des composants entiers comme des barres de navigation, des fenêtres modales, etc. qu’on va pouvoir également directement implémenter.

 

Pourquoi utiliser Bootstrap ?

Bootstrap possède trois grands avantages notables par rapport aux autres solutions à notre portée qui se limitent concrètement à écrire tout son code soi-même ou à avoir recours à un autre framework ou librairie CSS.

Ces avantages sont :

  1. Un gain de temps de développement qui peut être conséquent ;
  2. Une certaine robustesse dans l’architecture globale du code ;
  3. Un framework appartenant à une grande société (Twitter).

Détaillons. L’idée première d’un framework est généralement de faire gagner du temps aux utilisateurs en leur proposant un ensemble d’éléments préconçus. Bootstrap ne déroge pas à cette règle. Une fois le framework maitrisé, vous allez pouvoir réaliser des design complexes et robustes en un rien de temps en utilisant les classes Bootstrap adaptées.

En plus de cela, utiliser (convenablement) Bootstrap vous assure d’avoir une certaine cohérence et une certaine robustesse dans l’ensemble de votre design.

Effectivement, s’il est plutôt simple de mettre en forme une page HTML en utilisant du CSS à première vue, il y a de nombreux paramètres à prendre en compte lorsque l’on code « à la main » :

  • Mes règles CSS sont-elles bien compatibles entre elles ?
  • Vais-je pouvoir appliquer ce CSS à différentes pages de mon site sans problème ?
  • Mes règles CSS sont-elles compatibles avec les différentes versions plus ou moins récentes des navigateurs utilisés par mes visiteurs ?
  • Le style de mes pages s’adapte-t-il bien selon le terminal utilisé par mes visiteurs (mobile, tablette, etc.).

Ces problèmes de compatibilité entre navigateurs, ou entre les différentes versions des différents navigateurs ou encore la prise en charge du responsive font qu’il est finalement loin d’être simple de créer un code CSS totalement valide, compatible et optimisé et que cela prend énormément de temps (notamment pour la prise en compte du responsive).

Bootstrap va nous simplifier tout cela puisque les créateurs de ce framework ont déjà fait le travail à notre place en nous livrant un ensemble de règles et d’outils qui (lorsqu’ils sont bien utilisés) vont nous permettre de créer des pages 100% responsive et compatibles avec la grande majorité des versions des différents navigateurs.

Enfin, en utilisant Bootstrap plutôt qu’un autre framework vous avez un certain gage de sécurité par rapport à l’évolution du framework dans le temps puisque Bootstrap appartient à Twitter qui est une entreprise tech relativement solide à priori.

 

Quelles sont les limites de Bootstrap ?

Les limites de Bootstrap sont liées par essence à ses avantages : Bootstrap est un framework très robuste mais cela implique également que c’est un framework relativement lourd à charger.

Par ailleurs, s’il est vrai qu’une personne maîtrisant parfaitement Bootstrap va pouvoir réaliser des design complexes très rapidement, il faut prévoir un certain coût d’apprentissage pour un néophyte pour pouvoir utiliser toute la puissance de Bootstrap et pour l’utiliser convenablement.

En outre, tout framework est basé sur un ensemble de règles que les utilisateurs doivent respecter, ce qui limite nos possibilités de design en dehors de ce qui est prédéfini dans Bootstrap. Certes, Bootstrap est relativement facilement modulable pour effectuer certains arrangements mais il est toujours très compliqué et risquer de complètement tordre un framework.

Finalement, les nouveautés CSS et notamment les modèles du flexbox et particulièrement des grilles qui est très puissant et qui commence à être bien défini rendent l’usage du CSS pur très attrayant aujourd’hui.

En conclusion il va donc pouvoir être intéressant d’utiliser Bootstrap dans les situations suivantes :

  • Lorsqu’on matrise bien Bootstrap et qu’on doit travailler vite ;
  • Lorsqu’on a des exigences en termes de design relativement classiques ;
  • Lorsqu’on veut s’assurer d’une certaine robustesse de son code globalement et dans le temps à moindre coût.

Bootstrap est donc notamment une solution de choix lorsqu’il s’agit de livrer des sites Internet à des clients qui ne disposent pas d’un gros budget / qui n’ont pas d’exigences extravagantes / qui n’ont pas d’équipe de développeurs dédiés pour assurer la maintenance de leur site.

 

Quelles sont les nouveautés apportées par Bootstrap 4 ?

A l’heure de l’écriture de ce tutoriel, la dernière version stable de Bootstrap est la version 4.3. La dernière version majeure de Bootstrap est la version 4 qui tranche radicalement dans son architecture par rapport à la version 3.

La version 4 de Bootstrap apporte de nombreuses nouveautés par rapport à la version 3 avec l’inclusion de nouveaux composants et la suppression d’autres précédemment utilisés par le Bootstrap 3.

La différence majeure entre Bootstrap 3 et Bootstrap 4 est que cette nouvelle version a été construite pour une navigation mobile avant une navigation sur bureau. Ainsi, les règles CSS par défaut ont été désignées pour des écrans de téléphone tandis que les règles pour les autres types d’écrans sont rajoutées en tant que règles secondaires.

Bootstrap 4 est notamment basé sur le modèle des boites flexibles ou flexbox. C’est donc ce modèle qui sera utilisé pour positionner les différents éléments là où Bootstrap 3 utilisait la propriété CSS float.

L’utilisation du flexbox permet de créer des design beaucoup plus puissants et fluides et offre une bien meilleure prise en charge de l’aspect adaptable ou « responsive » du contenu HTML en fonction des différents écrans des visiteurs.

 

Comment utiliser Bootstrap ?

Bootstrap est un framework, c’est-à-dire un ensemble de fichiers. Pour utiliser Bootstrap, nous allons donc simplement devoir utiliser ces fichiers. On va pouvoir faire cela de deux façons. On peut :

  1. Télécharger les fichiers Bootstrap (CSS et JavaScript) sur le site https://getbootstrap.com/ puis les lier à nos fichiers HTML comme n’importe quel autre fichier CSS et JavaScript ;
  2. Utiliser un CDN (Content Delivery Network ou réseau de distribution de contenu) et inclure le lien vers les fichiers dans nos fichiers HTML.

Dans ce cours, j’utiliserai le CDN recommandé par Bootstrap. Vous pouvez trouver les différents liens vers les fichiers nécessaires au fonctionnement optimal de Bootstrap à intégrer dans vos fichiers HTML ici : https://getbootstrap.com/docs/4.3/getting-started/introduction/.

Laisser un commentaire

© Pierre Giraud - Toute reproduction interdite - Mentions légales