Planifier les largeurs de colonnes sur la grille à 12 colonnes.
Chaque ligne ajoutée repose sur la grille Bootstrap : douze pistes égales partagées par ses colonnes. Une mise en page comme 1/3 + 2/3 donne quatre pistes à une colonne et huit à l’autre. Servez-vous de cette page pour planifier des largeurs qui s’additionnent, et pour donner à une ligne une seconde mise en page pour les écrans plus petits. Pour ajouter une ligne, voir Ajouter une ligne.
La vidéo donne à une ligne de 4 colonnes une seconde mise en page pour tablettes, puis rétrécit la fenêtre.
Comment les fractions deviennent des pistes
| Fraction | Pistes | Usage typique |
|---|---|---|
| 1/1 | 12 | Une colonne pleine largeur |
| 1/2 | 6 | Deux colonnes égales |
| 1/3 | 4 | Trois colonnes égales, ou une barre latérale à côté de 2/3 |
| 2/3 | 8 | Contenu principal à côté d’une barre latérale 1/3 |
| 1/4 | 3 | Quatre colonnes égales, ou une barre latérale à côté de 3/4 |
| 3/4 | 9 | Contenu principal à côté d’une barre latérale 1/4 |
| 1/6 | 2 | Six petites colonnes, comme une rangée de logos |
| 5/12 and 7/12 | 5 and 7 | Deux colonnes de largeur presque égale |
Les pistes d’une ligne s’additionnent à 12. Quand elles dépassent, les colonnes en trop passent à la ligne. Utilisez des fractions qui donnent des pistes entières : moitiés, tiers, quarts, sixièmes et douzièmes. Une fraction comme 1/5 n’a aucune classe Bootstrap correspondante.
Une ligne dans une colonne divise cette colonne en ses propres douze pistes. Voir Imbrication.
Donner une autre mise en page à une ligne sur tablettes
La mise en page choisie pour une nouvelle ligne s’applique depuis Medium devices (≥ 768px) vers le haut. Sous cette largeur, les colonnes s’empilent. Ces étapes gardent quatre colonnes sur ordinateurs et en montrent deux par ligne sur tablettes.
- Survolez la ligne et cliquez l’icône de grille dans sa barre de contrôle. Le dialogue de mise en page s’ouvre sur le panneau Medium devices (≥ 768px).
- Choisissez la tuile à quatre colonnes égales.
- Cliquez sur Add screen size. Un second panneau s’ouvre avec une copie de la mise en page.
- Dans la liste des tailles d’écran du nouveau panneau, choisissez Small devices (≥ 576px).
- Cliquez sur Custom Layout, saisissez
1/2 + 1/2 + 1/2 + 1/2et cliquez sur Save. - Cliquez sur Save sur la barre d’outils.
Quatre moitiés gardent les quatre colonnes et en mettent deux par ligne. Une tuile à deux colonnes réduirait plutôt la ligne à deux colonnes.
Ce que vous voyez
Sur un écran large, la ligne montre quatre colonnes côte à côte. Rétrécissez la fenêtre du navigateur sous 768 pixels et elles passent à deux par ligne. Sous 576 pixels, chaque colonne prend toute la largeur.
Tailles d’écran
Chaque panneau du dialogue de mise en page définit les colonnes pour une taille d’écran. La mise en page vaut aussi pour les écrans plus grands, jusqu’à la prochaine taille avec son propre panneau.
| Panneau | S’applique depuis |
|---|---|
| Extra small (< 576px) | Les plus petits téléphones et au-delà |
| Small devices (≥ 576px) | 576 pixels |
| Medium devices (≥ 768px) | 768 pixels ; le premier panneau d’une nouvelle ligne |
| Large devices (≥ 992px) | 992 pixels |
| Extra large (≥ 1200px) | 1200 pixels |
| Extra extra large (≥ 1400px) | 1400 pixels |
Remove screen size supprime un panneau et sa mise en page. Custom Layout accepte toute liste de fractions, comme 1/4 + 1/2 + 1/4. Quand la mise en page d’un panneau n’est aucune des tuiles, le dialogue marque Custom Layout et nomme la mise en page dessus, comme Custom Layout (1/2 + 1/2 + 1/2 + 1/2). Cliquez dessus pour modifier cette mise en page dans la zone de mise en page personnalisée.
Bootstrap sur votre site
La grille a besoin de Bootstrap 5 sur la page. Un administrateur de site choisit d’où il vient dans DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings), sous Bootstrap. Sideload Bootstrap files propose Bootstrap 5, que le builder charge lui-même, ou None (theme provides Bootstrap).
Si vous ne voyez pas la mise en page
- Les colonnes s’empilent sur chaque taille d’écran. Aucun Bootstrap n’est chargé : le réglage vaut None (theme provides Bootstrap) et le thème ne le charge pas. Choisissez Bootstrap 5 sous Sideload Bootstrap files sous
/admin/dxpr_studio/dxpr_builder/settings. - La mise en page de bureau a perdu des colonnes. Vous avez choisi une tuile avec moins de colonnes pour une autre taille d’écran, et le builder a réduit les mises en page de largeurs égales en conséquence. Annulez le changement, comme le montre Annuler et rétablir, et utilisez Custom Layout avec une fraction par colonne.
- La dernière colonne tombe à la ligne. Les fractions dépassent une ligne de 12 pistes. Faites-les totaliser 1, comme
1/4 + 3/4. - Une colonne personnalisée n’a pas de largeur claire. Sa fraction, comme 1/5, n’a aucune classe Bootstrap. Utilisez moitiés, tiers, quarts, sixièmes ou douzièmes.
Et ensuite ?
- Ajouter une ligne : ajouter des lignes et choisir un préréglage de colonnes.
- Design responsive : montrer ou masquer des éléments sur téléphones, tablettes ou ordinateurs.
- Imbrication : placer des lignes dans des colonnes pour des mises en page plus fines.