contact@bootstrap-top-design.com

A propos de Bootstrap: librairie innovatrice et banque de connaissance énorme

à propos de Bootstrap

Ce blog est soutenu par ses lecteurs. Lorsque vous achetez par le biais de liens affiliés sur notre site, nous percevons une commission. En savoir plus

Vous en saurez plus dans cet article à propos de Bootstrap, les innovations majeures qui lui ont permis d’être la figure de proue des librairies front-end, les fichiers contenus dans sa nouvelle version et leur rôle.

Et surtout, vous ferez connaissance d’une technique toute simple qui vous permettra d’accroître vos connaissances à l’aide du contenu des fichiers de Bootstrap.

Les 2 grandes innovations de Bootstrap au cours de son histoire:

Savez-vous que les  grands sites web intègrent Bootstrap dans leurs applications web et  que celle-ci est utilisée dans plus de 60% des sites web présents sur internet?

Oui, Bootstrap est actuellement la plus populaire des librairies front-end. Et elle a bâti cette notoriété grâce à sa simplicité et ses innovations.

Voici les grandes innovations apportées par Bootstrap dans l’écosystème du développement web :

  • Bootstrap a fait son entrée en 2011 en apportant des solutions aux problèmes qui ne trouvaient pas de réponses. Elle proposait une structure de code solide qui limitait les incohérences et permettait une aisance dans la maintenance à une époque où les bibliothèques existences étaient incapables de tels résultats.
  • En 2012 les petits terminaux prenaient de l’ampleur et commençaient à être utilisés majoritairement pour accéder à internet. Les développeurs de Bootstrap firent cette remarque et devancèrent les bibliothèques concurrentes en publiant le 19 août 2013 une version réécrite de la librairie.

Cette version proposait un puissant système de grille qui permettait d’adapter les applications web à tous les supports.

Bootstrap s’est montrée une fois encore innovant en optant pour le préprocesseur SAAS qui permet de  compiler plus rapidement des fichiers CSS au détriment de LESS. Pour offrir plus de flexibilité, elle a intégré le module  Flexbox dans sa toute dernière version.

Voici le détail des fichiers contenus dans Bootstrap et leur rôle spécifique:

Pour comprendre l’astuce révélée dans la dernière section il est important que vous sachiez le rôle des fichiers contenus dans la bibliothèque de Bootstrap.

Le site officiel de Bootstrap propose les fichiers compressés des différentes versions stables de  la librairie. A l’heure où j’écris ces lignes la dernière version est la 4.3.1, elle est sortie le 13 février 2019 pour corriger des vulnérabilités XSS rencontrées dans la version 4.3.0.

Contenu du fichier compressé de la version 4.3.1:

Le fichier comporte deux dossiers dans lesquels sont répartis des feuilles de styles et des scripts. Les feuilles de styles sont dans le dossier nommé CSS et les scripts dans le dossier JS.

Le dossier CSS comporte les fichiers : bootstrap, bootstrap-grid, bootstrap-reboot. Chacun de ces fichiers est disponible en version normale .css, en version minifiée .min et en version binaire .map.

  • bootstrap-reboot.css : Cette feuille de style redéfinit le comportement des balises HTML.
  • bootstrap-grid.css : elle propose le système de grille, la flexbox de Bootstrap et des marges externes et internes.
  • Bootstrap.css : elle est la feuille de style principale, elle réunit les codes source de bootstrap-reboot et bootstrap-grid, puis définit les styles des composants proposés par la librairie.

Le dossier JS quant à lui propose un script bootstrap et un script bootstrap.bundle. Ces scripts sont aussi disponibles dans les versions normales, minifiées et binaires.

  • bootstrap.js : elle implémente des APIs et définit des animations de certains composants.
  • bootstrap.bundle.js : Certains composants pour fonctionner correctement nécessite l’appel du fichier popper.js en plus de bootstrap.js. Du coup pour faciliter la tâche aux utilisateurs, Bootstrap propose le script bootstrap.bundle.js qui est la réunion  des deux scripts.

NB: Il est primordial de savoir le rôle de ces fichiers, car il vous permet de faire appel au fichier correspondant à votre besoin.

Par exemple sur votre page web si vous avez juste besoin d’utiliser les grilles de Bootstrap, il faut faire appel à la feuille de style bootstrap-grid.css et non à bootstrap.css.

Voici comment vous pouvez accroître vos connaissances en webdesign à l’aide des fichiers Bootstrap :

Avez-vous déjà réalisé des pages web que tout le monde trouvait merdiques à cause de son design?

Si oui vous n’avez été pas le seul, je suis moi-même aussi passé par cette étape. Mes premiers thèmes que je créai et que je proposais gratuitement aux différents blogs étaient rejetés. La honte n’est-ce pas !

Mais aujourd’hui, mes thèmes totalisent des milliers de téléchargements.

thème gratuit photofan v 1.0

L’image illustrative précédente présente le nombre de téléchargements de la première version de mon thème Photofan sur Beauthemes et Themewagon.

Thème gratuit photofan V2.0

Celle-ci est la capture de la version mise à jour du thème Photofan publié sur le blog Beauthemes.

thème immobilier gratuit

Il s’agit du thème Real Estate que j’ai conçu pour le secteur de l’immobilier.

PS : Je suis en train de les mettre à jour pour les publier ici . Quelques-uns sont déjà disponibles sur le site

L’astuce que je m’en vais vous révéler dans la suite m’a permis en partie de m’améliorer.

Mais avant, gardez cette vérité pour la suite…

Apprendre des meilleurs permet d’accroitre ses connaissances.

L’écriture et la maintenance de Bootstrap sont réalisées par des professionnels du webdesign qui maitrisent parfaitement les outils web technologiques, l’une des raisons pour lesquelles Bootstrap est toujours au top.

La technique consiste à fouiner dans les codes sources des fichiers Bootstrap, ses codes sources enseignent beaucoup plus que la majorité des livres écrits sur Bootstrap.

Voici le secret derrière cette technique, quand vous apprenez Bootstrap par le biais des tutoriels et des livres, vous découvrez les classes Bootstrap et comment les utiliser, ensuite quand vous passez à la pratique vous voyez les résultats : Là vous découvrez les conséquences de l’appel de ces classes.

Mais quand vous fouinez dans le code source, en plus de découvrir les conséquences de l’appel des classes, vous découvrez aussi la cause : les styles, les propriétés, les fonctions et la logique qui permettent d’aboutir  à ces résultats.

Voici un exemple d’une astuce simple que j’ai appris en fouillant le code source de la feuille de style de Bootstrap :

L’imbrication d’une pseudo-classe dans une autre pour avoir un résultat spécifique.

Supposons que je veux appliquer la couleur rouge à tous les éléments d’une liste sauf le premier.

Le code css qui permet d’obtenir un tel résultat est le suivant :

Code CSS :

ul li:not(:first-child){
	color: red;
}

Vous, le savez-vous ? Moi je l’ignorais, je ne l’ai jamais vu dans aucun tutoriel ni dans aucun livre écrit sur le CSS.

Il y a pas mal de ces petites astuces que vous découvrirez dans les codes sources des fichiers Bootstrap.

Et vous pourrez vous en inspirer pour vos prochaines conceptions.

Conclusion :

Bootstrap est une bibliothèque qui est régulièrement mise à jour et innove à chaque nouvelle version, ce qui est rassurant pour un projet qui veut l’intégrer. Vous pouvez vous inspirer de ses codes sources pour approfondir vos connaissances.

Si cet article vous a plu, alors faites-le découvrir à vos amis en le partagent sur les réseaux sociaux via les boutons de partage ci-dessous.

Si vous désirez être informé en premier à chaque sortie d’un nouvel article, abonnez-vous à notre newsletter en cliquant sur le lien suivant : je veux m’abonner à la newsletter.

Laisser un commentaire