InstantSite est conçu à l'aide du framework Bootstrap. Cela permet à votre site de s'adapter à différentes tailles d'écran et appareils. Il est important de comprendre les différences entre les lignes et les colonnes dans InstantSite et comment elles sont utilisées pour garantir que votre site s'affiche correctement dans un environnement de bureau et mobile.
Système de grille Bootstrap.
Le système de grille de Bootstrap vous permet d'ajouter jusqu'à 12 colonnes sur chaque ligne de la page. Si vous ne souhaitez pas utiliser les 12 colonnes individuellement, vous pouvez utiliser une collection de colonnes ensemble. Ci-dessous un exemple des groupes de colonnes utilisables :
| étendue 1 | étendue 1 | étendue 1 | étendue 1 | étendue 1 | étendue 1 | étendue 1 | étendue 1 | étendue 1 | étendue 1 | étendue 1 | étendue 1 |
| étendue 4 | étendue 4 | étendue 4 | |||||||||
| étendue 4 | étendue 8 | ||||||||||
| étendue 6 | étendue 6 | ||||||||||
| étendue 12 | |||||||||||
Lors de l'ajout d'un nouvel élément à InstantSite, il crée automatiquement un conteneur, une ligne et une colonne.
- Le conteneur est simplement la boîte qui contient votre ligne.
- La ligne est une grille bootstrap à 12 colonnes, comme décrit ci-dessus ;
- La colonne contient l'élément que vous avez ajouté à la page.
Une colonne peut s'étendre n'importe où entre 1 et 12 espaces autorisés dans la grille d'amorçage à 12 colonnes. L'élément peut ensuite être redimensionné dans cette colonne pour être en pleine largeur ou pour une partie des 12 colonnes disponibles.
Pourquoi les colonnes et les lignes sont importantes
Lors de la création de votre site Web, vous souhaitez que la mise en page de votre contenu ait un aspect professionnel sur n'importe quel appareil. Il ne sert à rien de rendre votre site Web magnifique sur un ordinateur s'il est à peine utilisable sur mobile.
Bootstrap permet à la conception d'un site Web de devenir réactive malgré l'appareil sur lequel il est visualisé. Pour ce faire, il utilise le système de grille d'amorçage à 12 colonnes décrit ci-dessus. Pour plus d'informations sur le fonctionnement des grilles Bootstrap pour rendre votre contenu réactif, visitez getbootstrap.com