Pianifica le larghezze di colonna sulla griglia a 12 colonne.
Ogni riga aggiunta sta sulla griglia Bootstrap: dodici tracce uguali condivise dalle sue colonne. Un layout come 1/3 + 2/3 dà a una colonna quattro tracce e all’altra otto. Usa questa pagina per pianificare larghezze che tornano, e per dare a una riga un secondo layout per schermi più piccoli. Per aggiungere una riga, vedi Aggiungere una Row.
Il video dà a una riga di 4 colonne un secondo layout per tablet, poi restringe la finestra.
Come le frazioni diventano tracce
| Frazione | Tracce | Uso tipico |
|---|---|---|
| 1/1 | 12 | Una colonna a larghezza intera |
| 1/2 | 6 | Due colonne uguali |
| 1/3 | 4 | Tre colonne uguali, o una sidebar accanto a 2/3 |
| 2/3 | 8 | Contenuto principale accanto a una sidebar 1/3 |
| 1/4 | 3 | Quattro colonne uguali, o una sidebar accanto a 3/4 |
| 3/4 | 9 | Contenuto principale accanto a una sidebar 1/4 |
| 1/6 | 2 | Sei piccole colonne, come una riga di loghi |
| 5/12 e 7/12 | 5 e 7 | Due colonne di larghezza quasi uguale |
Le tracce di una riga sommano a 12. Quando sommano di più, le colonne in eccesso vanno a capo. Usa frazioni che danno tracce intere: metà, terzi, quarti, sesti e dodicesimi. Una frazione come 1/5 non ha una classe Bootstrap corrispondente.
Una riga dentro una colonna divide quella colonna nelle sue dodici tracce. Vedi Annidamento.
Dai a una riga un altro layout sui tablet
Il layout scelto per una riga nuova vale da Medium devices (≥ 768px) in su. Sotto quella larghezza, le colonne si impilano. Questi passaggi mantengono quattro colonne sui desktop e ne mostrano due per riga sui tablet.
- Passa sopra la riga con il mouse e fai clic sull’icona griglia nella sua barra di controllo. La finestra dei layout si apre sul pannello Medium devices (≥ 768px).
- Scegli il riquadro con quattro colonne uguali.
- Fai clic su Add screen size. Si apre un secondo pannello con una copia del layout.
- Nell’elenco delle dimensioni di schermo del nuovo pannello, scegli Small devices (≥ 576px).
- Fai clic su Custom Layout, digita
1/2 + 1/2 + 1/2 + 1/2e fai clic su Save. - Fai clic su Save sulla barra.
Quattro metà mantengono tutte e quattro le colonne e ne mettono due per riga. Un riquadro con due colonne ridurrebbe invece la riga a due colonne.
Cosa vedrai
Su uno schermo largo la riga mostra quattro colonne fianco a fianco. Restringi la finestra del browser sotto i 768 pixel e vanno a capo due per due. Sotto i 576 pixel, ogni colonna prende tutta la larghezza.
Dimensioni di schermo
Ogni pannello nella finestra dei layout imposta le colonne per una dimensione di schermo. Il layout vale anche per schermi più grandi, fino alla prossima dimensione con un proprio pannello.
| Pannello | Vale da |
|---|---|
| Extra small (< 576px) | Dai telefoni più piccoli in su |
| Small devices (≥ 576px) | 576 pixel |
| Medium devices (≥ 768px) | 768 pixel; il primo pannello di una riga nuova |
| Large devices (≥ 992px) | 992 pixel |
| Extra large (≥ 1200px) | 1200 pixel |
| Extra extra large (≥ 1400px) | 1400 pixel |
Remove screen size elimina un pannello e il suo layout. Custom Layout accetta qualsiasi elenco di frazioni, come 1/4 + 1/2 + 1/4. Quando il layout di un pannello non è uno dei riquadri, la finestra marca Custom Layout e indica il layout su di esso, come Custom Layout (1/2 + 1/2 + 1/2 + 1/2). Fai clic per modificare quel layout nel riquadro di layout personalizzato.
Bootstrap sul tuo sito
La griglia richiede Bootstrap 5 nella pagina. Un amministratore del sito sceglie da dove viene in DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings), in Bootstrap. Sideload Bootstrap files offre Bootstrap 5, che il builder carica da sé, o None (theme provides Bootstrap).
Se non vedi il layout
- Le colonne si impilano su ogni dimensione di schermo. Nessun Bootstrap è caricato: l’impostazione è None (theme provides Bootstrap) e il tema non lo carica. Scegli Bootstrap 5 in Sideload Bootstrap files in
/admin/dxpr_studio/dxpr_builder/settings. - Il layout desktop ha perso colonne. Hai scelto un riquadro con meno colonne per un’altra dimensione di schermo, e il builder ha ridotto i layout a larghezza uguale per corrispondere. Annulla la modifica, come mostra Annulla e ripeti, e usa Custom Layout con una frazione per colonna.
- L’ultima colonna scende a una nuova riga. Le frazioni sommano a più di una riga di 12 tracce. Falle sommare a 1, come
1/4 + 3/4. - Una colonna personalizzata non ha larghezza chiara. La sua frazione, come 1/5, non ha classe Bootstrap. Usa metà, terzi, quarti, sesti o dodicesimi.
Prossimi passi
- Aggiungere una Row: aggiungi righe e scegli un preset di colonne.
- Design responsive: mostra o nascondi elementi su telefoni, tablet o desktop.
- Annidamento: metti righe dentro colonne per layout più fini.