C’est quoi bootstrap ?

C

Si vous demandez à quelqu’un, “c’est quoi bootstrap ?”, la réponse risque de ressembler à :


Si vous êtes un tout nouveau developpeur et que vous avez retenu : “C’est une librairie, et c’est vraiment cool“, c’est déjà que vous avez bien suivi.

Ici, on va prendre un peu le temps de comprendre c’est quoi bootstrap :

Pour cet article, il est utile de savoir déjà c’est quoi HTML et CSS. Si vous ne connaisssez pas, n’hésitez pas à lire cet article.

La base de Bootstrap

Quand on suit mon cours en présentiel sur HTML/CSS, je montre, par exemple, comment mettre une bordure noire, sur les 4 cotés d’un élément, d’epaisseur 1px.

HTML
CSS
style.css

“mon-element1” et “mon-element2” sont ce qu’on appelle des classes.
Elles permettent de s’assurer que le style, écrit entre accolades dans le CSS, s’applique bien à l’élément HTML sélectionné.

Et on voit que pour mettre une bordure noire à deux éléments, on écrit deux fois “border: 1px solid black”

Et ce n’est pas un souci, on réécrit cette ligne de code autant de fois qu’il faut, pour chaque élément auquel on veut donner une bordure noire.

Mais je suis déjà tombé sur quelques étudiants malins, qui, au lieu de réécrire la ligne plein de fois, l’ont écrite comme suit :

HTML
CSS
style.css

Ils ont simplement créé une classe “bordure-noire”, et à chaque fois qu’ils voulaient donner une bordure noire à un élément, ils donnaient immédiatement la classe “bordure-noire” à cet élément dans le HTML.

Et c’est très malin !

La naissance de bootstrap

Il y a plusieurs années, un groupe de développeurs a commencé à faire la même chose. Ils travaillaient à plusieurs sur un petit projet et quand ils faisaient le design d’un élément, ils le mettaient systématiquement dans une classe.

Ainsi, à chaque fois qu’il fallait faire un bouton, il suffisait d’appeller la classe “btn”, qui donnai déjà la bonne bordure, la bonne couleur et les bonnes dimensions au bouton.

Cela leur permettait, même s’ils travaillaient sur des pages différentes, d’avoir le même style de bouton partout.

A la fin de leur petit projet, intitulé “twitter”, l’équipe de développeurs avait généré un gros fichier css avec énormément de classes toutes prêtes

Ils se sont dit :

” Pourquoi ne pas le partager à d’autres développeurs ?
Comme les classes sont déjà codées, et que le design est plutôt simple, tout le monde pourra le reprendre pour coder plus rapidement son propre site

Dialogue inventé de toute pièce

Bootstrap s’est alors amélioré petit à petit, en même temps qu’il devenait de plus en plus populaire. Nous en sommes maintenant à la version 4 de bootstrap.

En résumé, Bootstrap est une librairie de classes.
En gros, un gros fichier CSS de près de 10 000 lignes avec plein de classes écrites par une équipe de développeurs.

En se servant des classes de bootstrap, on utilise du CSS déjà pré-écrit par d’autres supers développeurs, et on peut juste utiliser ces classes directement dans notre HTML.

Dans le prochain article, je rentre plus en détails dans le fonctionnement de bootstrap, et je parle surtout de ses avantages, et de ses inconvénient.

L’article sortira donc la semaine prochaine !
En attendant, envoie-moi un message pour me dire comment je pourrais m’améliorer, ou quels autres sujets je pourrais aborder.

A bientôt !