Le colonne sono uno degli elementi strutturali chiave all'interno di Blocs applicazione, insieme a righe ed Bloc contenitori costituiscono la base su cui è costruito il layout del tuo sito. Le colonne hanno varie opzioni che ti consentono di personalizzarne i file Taglia, offset, minimo ed allineamento del contenuto. Tutte le opzioni possono essere regolate per punto di interruzione, il che significa che puoi personalizzare i layout delle colonne in base alle dimensioni dello schermo su cui vengono visualizzate, per un'esperienza utente mobile ottimale.
Una riga padre di colonne non può esistono senza contenere almeno una colonna, questo significa che è impossibile eliminare l'ultima colonna all'interno di una riga. Quando l'ultima colonna all'interno di una riga viene eliminata, ne viene automaticamente aggiunta un'altra vuota.
Selezione di una colonna
Poiché il contenuto annidato all'interno di una colonna può occupare l'intero spazio di una colonna, può essere complicato selezionarlo direttamente tramite l'area di disegno. Il modo più semplice per selezionare una colonna è utilizzare l'albero dei livelli.
Larghezza della colonna
Le colonne hanno varie impostazioni di larghezza che possono essere applicate utilizzando i controlli dell'area di disegno o tramite i controlli dell'ispettore della barra laterale. Il modo più semplice per ridimensionare una colonna è selezionarla nell'area di disegno e trascinare semplicemente la maniglia di ridimensionamento situata nel file lato destro dell'indicatore di selezione della colonna.
Taglia unica
La griglia di layout all'interno Blocs è suddiviso in colonne 12 che sono di dimensioni uguali per riempire il disponibile contenitore del sito principale spazio. Una colonna può avere una dimensione fissa da 1 a 12, quando una colonna ha una dimensione fissa, occuperà solo spazio sufficiente per riempire la percentuale corretta di spazio consentita quando questo spazio è diviso in 12 colonne. Ad esempio, se una colonna ha una larghezza di 6, occuperà la metà di 12, il che significa che occuperà 50% dello spazio sullo schermo.
Dimensione ereditata
Se una colonna ha la dimensione impostata su eredita ∞ su tutti i breakpoint, non sarà più fisso e imposterà invece automaticamente la sua dimensione in base al numero di colonne all'interno della riga padre, per creare una copertura uniforme dello spazio disponibile. Ad esempio, se hai colonne 2 impostato ereditare, ogni colonna occuperà 50% dello spazio disponibile.
Quando si utilizza l'opzione inherit size, è importante ricordare che la colonna non deve avere altri valori di larghezza impostati su punti di interruzione inferiori, altrimenti la larghezza della colonna erediterà il valore di larghezza del punto di interruzione inferiore più vicino.
Offset della colonna
L'offset della colonna consente di impostare lo spazio di offset che si trova a sinistra della colonna, può essere utilizzato per centrare le colonne orizzontalmente o per creare spazio tra le colonne. Il modo più semplice per impostare l'offset di una colonna è selezionarlo nell'area di disegno e trascinare la maniglia di offset situata nel file sinistra dell'indicatore di selezione della colonna.
Quando modifichi l'offset di una colonna, spingerà o tirerà anche le colonne alla sua destra e in alcuni casi (se non c'è abbastanza spazio orizzontale disponibile) le sposterà su una nuova riga.
Ordine delle colonne
I controlli dell'ordine delle colonne possono creare un po 'di confusione quando vengono utilizzati per la prima volta. Questo perché potrebbe sembrare che le impostazioni non abbiano effetto, se non sono configurate correttamente. I controlli dell'ordine delle colonne consentono di impostare l'ordine di una colonna all'interno della riga padre, per impostazione predefinita le colonne sono ordinate da sinistra a destra nell'ordine in cui esistono fisicamente (all'interno dell'albero DOM).
Comprensione dell'ordine delle colonne
Quando una colonna ha il valore dell'ordine personalizzato, verrà sempre visualizzato dopo tutte le colonne non si avere un ordine personalizzato applicato. Quindi se lo hai colonne 2 e imposta la prima colonna su ordine 1 si muoverà dietro la seconda colonna invece di rimanere nella stessa prima posizione. Questo perché, sebbene la colonna sia impostata per essere posizionata per prima, le altre colonne all'interno della riga padre non hanno un'impostazione di ordine personalizzato, quindi vengono visualizzate prima di quelle con valori personalizzati. Se poi applichi un ordine personalizzato a quella che era la seconda colonna, ma ora è la prima e imposti la sua posizione dell'ordine su 1, vedrai che ora si sposta alla fine delle colonne e si trova dietro la colonna con l'ordine personalizzato di 2.
Puoi saperne di più sull'ordinamento delle colonne e su come funziona in Bootstrap 4 qui.
Allineamento delle colonne
I controlli di allineamento delle colonne consentono di allineare rapidamente e facilmente una colonna al file top, mezzo or fondo della riga padre. Questi controlli ti consentono anche di forzare tutti gli elementi all'interno di una colonna ad allungarsi fino all'altezza completa della colonna genitore, questo può essere utile quando vuoi la scheda Brics essere di dimensioni uniformi in altezza.
Allineamento del contenuto
I controlli di allineamento del contenuto delle colonne consentono di allineare rapidamente e facilmente il contenuto di una colonna al file a sinistra, centro or destra.
I controlli della colonna segmentata che si trovano all'interno dell'ispettore della barra laterale possono essere regolati rapidamente semplicemente posizionando il mouse sulla sezione delle cifre che si trova tra le frecce sinistra e destra e scorrendo verso sinistra o destra sul tuo magic mouse (x1 dito) o trackpad (x2 dita).
WordPress loop
Quando un progetto ha il suo Opzione CMS impostato su WordPress un set aggiuntivo di controlli sarà disponibile nell'ispettore della barra laterale che abilita l'impostazione dei loop di contenuti di WordPress.
Tipologia
Questa opzione viene utilizzata per impostare la variabile di tipo per il ciclo:
Post
Questa colonna diventerà il modello per l'elemento del ciclo dei post, tutti gli elementi all'interno dei feed di dati dei post di WordPress verranno popolati di conseguenza.
Pagine
Questa colonna diventerà il modello per l'elemento del ciclo di pagine, tutti gli elementi all'interno con i feed di dati della pagina di WordPress verranno popolati di conseguenza.
Contenuti
Questa colonna diventerà il modello per l'elemento del loop di contenuto (gli elementi del loop di contenuto si trovano in genere nei modelli di archivio, autore, categoria, tag e pagina dei risultati di ricerca), tutti gli elementi all'interno dei feed di dati dei post di WordPress verranno popolati di conseguenza.
Tutti
Questa colonna diventerà il modello per il post standard, la pagina e tutti gli elementi del ciclo del tipo di post personalizzato, tutti gli elementi all'interno dei feed di dati dei post di WordPress verranno popolati di conseguenza. Questo produrrà tutti i tipi di post e il tipo di pagina standard.
Tutti i tipi di post
Questa colonna diventerà il modello per il post standard e tutti gli elementi del ciclo del tipo di post personalizzato, tutti gli elementi all'interno con i feed di dati dei post di WordPress verranno popolati di conseguenza. Questo produrrà tutti i tipi di post supportati dal tema.
Tutti i tipi di post personalizzati
Questa colonna diventerà il modello per tutti gli elementi del ciclo del tipo di post personalizzato, tutti gli elementi all'interno con i feed di dati dei post di WordPress verranno popolati di conseguenza. Questo genererà tutti i tipi di post personalizzati supportati dal tema.
Tipi personalizzati post
Questa colonna diventerà il modello per l'elemento del ciclo del tipo di post personalizzato pertinente, tutti gli elementi all'interno con i feed di dati dei post di WordPress verranno popolati di conseguenza.
Ulteriori tipi di post personalizzati aggiunti tramite il Gestore dati personalizzato di WordPress verrà aggiunto alle opzioni del tipo.
Autore
Questa opzione viene utilizzata per impostare la variabile autore per il ciclo:
Tutti
Il ciclo restituirà i post di tutti gli autori.
Post autore
Il ciclo restituirà i post dell'autore del post corrente.
Utente corrente
Il ciclo restituirà solo i messaggi per l'utente attualmente connesso.
Post per pagina
Il numero inserito in questo campo verrà utilizzato come limite massimo di loop. Se inserisci 6, i risultati del ciclo di post verranno impaginati in gruppi di 6 elementi per pagina.
ID di categoria
Il ciclo verrà filtrato per includere i post con questi ID di categoria (separare più valori con virgole).
Tag di categoria
Il ciclo verrà filtrato per includere i post con questi tag di categoria (separare più valori con virgole).
Escludi ID articolo
Il ciclo verrà filtrato per escludere i post con questi ID (separare più valori con virgole).