Attention ! Par défaut la librairie Display Virtual Grid Bootstrap est activée au démarrage de cette page. Ce qui explique pourquoi la présentation du contenu peut paraître étrange. Cliquez sur le bouton vert « GRID ON » situé en haut à gauche pour désactiver temporairement la librairie et prendre connaissance des instructions pour installer et utiliser Display Virtual Grid Bootstrap, l’outil d’aide à la compréhension et à la maîtrise du concept de « grille » Bootstrap.

Qu’est-ce que Display Virtual Grid Bootstrap ?

Display Virtual Grid Bootstrap est une librairie CSS dont l’objectif est de vous aider dans la compréhension du concept de grille sur 12 colonnes utilisées par une autre librairie CSS célèbre : Bootstrap

Cet outil permet tout simplement de rendre visible l’invisible. Ainsi, la librairie vous permet d’afficher en temps réel les 12 colonnes virtuelles de la grille Bootstrap pour vous faciliter la tâche dans la conception de vos interfaces Web, mais également à mieux appréhender le concept de responsive web design qui est le coeur de Bootstrap

Représentation de la grille virtuelle :

Illustration de la grille virtuelle à 12 colonnes de Boostrap

Afin de voir ce que fait concrètement la librairie Display Virtual Grid Bootstrap et en quoi elle peut vous aider, un exemple de visualisation de la « grille » est disponible un peu plus bas. Pensez à re-cliquer sur le bouton situé en haut à gauche si vous avez désactivé temporairement la librairie pour lire ce texte.

Utiliser cet outil d’aide pour faire apparaître visuellement la grille sur 12 colonnes de Bootstrap durant la conception du code HTML, de préférence avant de mettre du contenu dedans (images, textes, etc.). Cependant il est tout à fait possible de l’utiliser avec du contenu déjà intégré.

Dans ce cas, ayez conscience que cela aura inévitablement un impact temporaire sur le rendu (sans pour autant tout casser) et ce, tant que la librairie reste activée. Ceci est tout à fait normal, puisque la CSS de Display Virtual Grid Bootstrap agit directement sur les classes suivantes de Bootstrap :
.container, .container-*, .container-fluid, .row, .col, .col-* et .col-*-*.

Comment installer Display Virtual Grid Bootstrap

1) Téléchargez le fichier compressé, puis dézippez-le. Vous trouverez trois dossiers. Un nommé _exemple, un second nommé CSS et le troisième nommé JS.

2) Dans le dossier CSS, récupérer le fichier « display-virtual-grid-bootstrap.css » et placez-le dans le dossier CSS de votre projet. Il existe une version minifiée du fichier si vous préférez.

3) De la même manière, récupérez le fichier « display-virtual-grid-bootstrap.js » et placez-le dans le dossier JS de votre projet. Il existe également une version minifiée du fichier si vous préférez.

4) Les 3 lignes de code suivantes sont à intégrer dans la balise <head> de la page HTML souhaitez, toujours après l’appel de la CSS de Bootstrap, mais avant votre propre style CSS :


    <!-- CSS et JS display-virtual-grid-bootstrap -->
    <link rel="stylesheet" href="your-url/display-virtual-grid-bootstrap.css">
    <script defer src="your-url/display-virtual-grid-bootstrap.js"></script>

Note : Remplacez « your-url » par le chemin d’accès propre à l’arborescence de votre projet.

Comment utiliser Display Virtual Grid Bootstrap

Une fois la librairie intégrée, un bouton vert avec l’inscription « GRID ON » est créé automatiquement en haut à gauche de la page concernée. Par défaut le système de visualisation de la grille virtuelle de Bootstrap est activé. Si vous souhaitez le désactiver temporairement, il suffit de cliquer sur le bouton en question. Faire de même pour réactiver la visualisation de la grille dès que vous en avez besoin.

Note : Un cookie sera créé par Display Virtual Grid Bootstrap. Il permet de conserver l’état activé ou non activé de la visualisation de la grille, même après un raffraichissement de la page. Ce cookie expire au bout de 24h. Il n’enregistre aucune information provenant de votre ordinateur. Il ne sert qu’au bon fonctionnement de la librairie. Ce cookie a pour nom « displayGrid » et peut prendre deux valeurs : 0 ou 1. Et c’est tout ! Vous pouvez d’ailleurs vérifier cela dans la console de votre navigateur.

Attention : La création du cookie ne fonctionne que si vous passez par un serveur (local ou en ligne). Par exemple Lamp, Mamp, Wamp, Xampp ou Live Server (de VSCode) sont parfaitement adaptés. Les serveurs de tous les prestataires d’hébergement sont compatibles avec la librairie Display Virtual Grid Bootstrap.

Il est impératif de respecter les deux structures de base de Bootstrap pour que la librairie Display Virtual Grid Bootstrap fonctionne correctement :


    section[header|footer|article|div|autre]
        div.container
            div.row
                div[article|autre].col|.col-*|.col-*-*]
                    div[article|autre][.card|.maclass|.autre]


    section[header|footer|article|div|autre]
        div.container-fluid
            div.row
                div[article|autre].col|.col-*|.col-*-*]
                    div[article|autre][.card|.maclass|.autre]

Display Virtual Grid Bootstrap est compatible avec les versions Bootstrap 4.x et 5.x

Surprimer Display Virtual Grid Bootstrap

Pensez à supprimer les 3 lignes de codes intégrées dans la balise <head> et à retirer les fichiers « display-virtual-grid-bootstrap.css » et « display-virtual-grid-bootstrap.js » dans les dossiers CSS et JS de votre projet une fois que vous n’avez plus besoin de la librairie Display Virtual Grid Bootstrap.

En espérant que cet outil d’aide vous sera utile.

Amusez-vous bien !

PS : Si vous trouvez cette bibliothèque utile, alors parlez-en autour de vous pour la faire connaître. Le bouche à orielle est un formidable vecteur de transmission.

Exemple

Ceci est un exemple de ce qu’ajoute la librairie Display Virtual Grid Bootstrap pour permettre de visualiser la grille sur 12 colonnes et les objets HTML qui y sont répartis. Cliquez sur le bouton rouge « GRID OFF » situé en haut à gauche pour désactiver temporairement l’outil d’aide.

Content