Les blocs Bootstrap - AREOI Blocks

Pour simplifier vos construction de page, l'extension "AREOI - All Bootstrap Blocks" a été installée sur votre site. Cette extension vous permet, comme sur Bootstrap de construire votre contenu à travers le système de grille Bootstrap :

• container
  • row
    • column
      • content

La classe : container

L'option conteneur vous permet de choisir entre les différents types de conteneurs inclus dans Bootstrap. La classe de conteneur appropriée sera ajoutée au bloc en fonction de l'option choisie.

Les options disponibles sont :

• .container, qui définit une largeur maximale à chaque point d'arrêt réactif
• .container-fluid, qui est une largeur de 100 % à tous les points d'arrêt
• .container-{breakpoint}, qui est une largeur de 100 % jusqu'au point d'arrêt spécifié

Le tableau ci-dessous illustre comment chaque conteneur se max-widthcompare à l'original .container et .container-fluid à travers chaque point d'arrêt.

Voyez-les en action et comparez-les dans notre exemple Grid.

Référence

La documentation Bootstrap reprend les informations du site bootstrap21.org accessible en français ci-dessous :

Accéder à la documentation Bootstrap du site bootstrap21.org/fr

La classe : row

Les lignes sont des enveloppes pour les colonnes. Chaque colonne possède un remplissage horizontal (appelé gouttière) pour contrôler l'espace entre elles. Ce remplissage est ensuite neutralisé sur les lignes avec des marges négatives pour garantir que le contenu de vos colonnes est visuellement aligné sur le côté gauche. Les lignes prennent également en charge les classes de modificateurs pour appliquer uniformément le dimensionnement des colonnes et les classes de gouttière pour modifier l'espacement de votre contenu.

Les gouttières sont également réactives et personnalisables. Les classes de gouttières sont disponibles pour tous les points d'arrêt, avec toutes les mêmes tailles que nos espaces de marge et de remplissage. Modifiez les gouttières horizontales avec les classes .gx-, les gouttières verticales avec .gy- ou toutes les gouttières avec les classes .g-*. .g-0 est également disponible pour supprimer les gouttières.

Référence

La documentation Bootstrap reprend les informations du site bootstrap21.org accessible en français ci-dessous :

Accéder à la documentation Bootstrap du site bootstrap21.org/fr

La classe : column

Les colonnes sont incroyablement flexibles. Il y a 12 colonnes de modèle disponibles par ligne, ce qui vous permet de créer différentes combinaisons d'éléments qui s'étendent sur n'importe quel nombre de colonnes. Les classes de colonnes indiquent le nombre de colonnes de modèle à étendre (par exemple, col-4 s'étend sur quatre). Les largeurs sont définies en pourcentages afin que vous ayez toujours la même taille relative.

Référence

La documentation Bootstrap reprend les informations du site bootstrap21.org accessible en français ci-dessous :

Accéder à la documentation Bootstrap du site bootstrap21.org/fr