InstantSite è progettato utilizzando il framework Bootstrap. Ciò consente al tuo sito di essere reattivo a diverse dimensioni dello schermo e dispositivi. È importante comprendere le differenze tra righe e colonne in InstantSite e come queste vengono utilizzate per garantire che il tuo sito appaia corretto in un ambiente desktop e mobile.
Sistema Bootstrap Grid.
Il sistema a griglia di Bootstrap ti consente di aggiungere fino a 12 colonne su ogni riga della pagina. Se non desideri utilizzare tutte e 12 le colonne singolarmente, puoi utilizzare una raccolta di colonne insieme. Di seguito è riportato un esempio dei gruppi di colonne che possono essere utilizzati:
| intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 | intervallo 1 |
| span 4 | intervallo 4 | intervallo 4 | |||||||||
| intervallo 4 | intervallo 8 | ||||||||||
| intervallo 6 | intervallo 6 | ||||||||||
| intervallo 12 | |||||||||||
Quando si aggiunge un nuovo elemento a InstantSite, viene creato automaticamente un contenitore, una riga e una colonna.
- Il contenitore è semplicemente la scatola che contiene la tua riga.
- La riga è una griglia bootstrap a 12 colonne come descritto sopra;
- La colonna è ciò che contiene l'elemento che hai aggiunto alla pagina.
Una colonna può estendersi ovunque tra 1 e 12 spazi consentiti nella griglia di bootstrap a 12 colonne. L'elemento può quindi essere ridimensionato all'interno di questa colonna in modo che sia a larghezza intera o una parte delle 12 colonne disponibili.
Perché colonne e righe sono importanti
Quando crei il tuo sito web, vuoi che il layout dei tuoi contenuti appaia professionale su qualsiasi dispositivo. Non ha senso rendere il tuo sito web fantastico su un desktop se è a malapena utilizzabile su dispositivi mobili.
Bootstrap consente al design di un sito Web di diventare reattivo nonostante il dispositivo su cui viene visualizzato. Lo fa utilizzando il sistema di griglia bootstrap a 12 colonne descritto sopra. Per ulteriori informazioni su come funzionano le griglie Bootstrap per rendere reattivi i tuoi contenuti, visita getbootstrap.com