C’est quoi Bootstrap ?

Logo de Bootstrap

Dans les langages web, on connait le HTML qui permet de faire des sites internet. Il va pratiquement tout le temps avec le CSS pour les thèmes graphiques, le PHP pour la génération de pages HTML en fonctions de diverses données, le SQL pour la manipulation des bases de données et le JavaScript pour l’exécution de code sur les navigateurs.

Il en existe bien d’autres des langages pour permettre la création d’un site internet, mais il ne faut pas oublier les divers outils qui tournent autour de ces langages et qui rendent la conception d’un projet web plus facile et rapide ! Ces outils on les appelle des frameworks.

Bootstrap, un framework CSS, fait partie de ces outils qui accélèrent grandement un projet web. Il étend les possibilités du langage CSS en ajoutant plein de fonctionnalités et de composants. Je dirais plutôt, on peut avoir le même résultat que du CSS en utilisant seulement Bootstrap. Même si c’est un framework CSS, il ajoute également un plus au HTML et au Javascript. Voyons qu’est-ce qu’apporte Bootstrap concrètement ! C’est parti !

Mais avant, un peu d’histoire ! Bootstrap a été créé vers 2011 par Twitter, au début cela devait être une solution chez eux pour régler quelques soucis entre les membres de l’équipe de développement. Il n’y avait aucun accord sur la manière de coder lors du développement de Twitter et tout le monde faisait un peu à sa manière, ce qui posait quelques problèmes. Un ingénieur a eu l’idée de créer ce framework pour que tout le monde puisse programmer de la même manière. Le framework a été tellement efficace que cela a explosé la productivité des développeurs ! Peu de temps après, le framework est passé en open-source sur Github et des milliers de personnes ont contribué au projet, faisant au passage l’un des projets les plus actifs et des plus populaires de l’histoire !

Bootstrap permet en gros de faire la présentation graphique d’un site, pour cela on utilise des classes spéciales que fournis ce framework. Bootstrap étant une grosse boite à outil CSS, on vient piocher chez lui les éléments et les composants dont on a besoin, pour cela il suffit de mettre une classe à nos éléments HTML pour qu’il puisse utiliser le framework. Une barre de navigation stylée ? Ajouter la classe .navbar à une balise nav ! Des boutons sympathiques ? Ajouter la classe .btn à une balise button !

Éléments de Bootstrap

Toujours avec le même système de classe, Bootstrap propose aussi la possibilité de positionné des éléments HTML sur une page sans toucher une seule fois du code CSS. De plus, en utilisant différents types de classe Boostrap, ce même positionnement peut-être différent en fonction de quel type d’écran est utilisé pour naviguer sur le site. On peut donc avoir un site web adapté aux smartphones et aux tablettes rien qu’avec des classes !

Les avantages d’utiliser Bootstrap ?

  • Facile et rapide pour la mise en place de présentation d’une page web
  • Il dispose d’un système de grille qui permet le positionnement des éléments HTML sur une page web.
  • La possibilité de rendre un site responsive de manière assez facile comparée aux méthodes purement CSS.
  • Une compatibilité entre tous les navigateurs. Bootstrap permet à ce que la présentation CSS soit similaire, quel que soit le navigateur utilisé.

Des inconvénients ? …

… par ce que oui il y en a quand même.

  • Il faut apprendre comment utiliser Bootstrap, ce n’est pas très difficile, mais il y a certaines notions à comprendre notamment sur le système de classe Bootstrap qui est la base de ce framework.
  • Les sites développés avec le framework Bootstrap se ressemblent tous 8-).
  • Sur l’optimisation d’un site web, même si le poids du framework est insignifiant, il faut charger complètement Bootstrap qu’on se sert que de 2% ou de 90% de ses fonctionnalités. Pour des gens à cheval sur les performances d’un site, ça peut être gênant.

Ce qu’il y a de génial c’est qu’il n’y a rien à installer ! Il suffit juste d’insérer quelques liens dans la structure HTML en utilisant des CDN et voilà ! Vous pouvez utiliser Bootstrap ! À condition de savoir comment l’utiliser bien sûr. 😉

A++ 🙂

Partager l’article :
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.