. Se sono necessarie colonne di larghezza diversa, sarà semplicemente necessario osservare la condizione in cui i numeri dopo col-xs- in tutte e tre le classi devono sommarsi a 12 (ad esempio, 2-4-6). Ma prima, diamo un'occhiata a cosa significa "xs" in questa voce e cosa significa?

Poco più in basso nell'area "Opzioni griglia" troverai una spiegazione di quanto sopra quattro misure di maglia bootstrap moderno.

1. Prima viene una griglia molto piccola (nella colonna "Dispositivi extra piccoli") progettata per dispositivi mobili con una dimensione dello schermo inferiore a 768 pixel (leggi il link sotto). Sarà sempre orizzontale su qualsiasi dimensione dello schermo e di cosa si tratta, cercherò di spiegarlo di seguito. Si noti che il prefisso della classe per questo tipo di griglia sarà just col-xs, come nell'esempio precedente.
2. Se la dimensione dello schermo del dispositivo è compresa tra 768 e 992 pixel (ora si tratta più spesso di tablet), allora la griglia Bootstrap, progettata per dispositivi di piccole dimensioni, è adatta a loro. Si chiama piccolo e vengono utilizzati prefissi di classe per specificarlo. col-sm.
3. Per i dispositivi con una dimensione dello schermo superiore a 992 ma inferiore a 1200 (principalmente monitor desktop o laptop), esiste una griglia per dispositivi medi. Si chiama medium e ha un prefisso di classe col-md.
4. Ebbene, per i monitor con una larghezza superiore a 1200 pixel, esiste la griglia più grande con un prefisso di classe col-lg.

Le ultime tre griglie saranno orizzontali solo se la dimensione dello schermo è maggiore del punto in cui si verifica il collasso. Ad esempio, per una grande griglia su schermi inferiori a 1200 pixel, non sarà più orizzontale e diventerà verticale. Sulla pagina del sito ufficiale GetBootstrap.com, che stiamo attualmente esaminando, ci sono esempi e spiegazioni in merito. Tuttavia, secondo me, tutto è alquanto confuso e complicato.

Esempio di sistema a griglia Bootstrap 3 per diverse larghezze dello schermo

Cercherò di spiegare tutto questo esempio finito. Devi solo copiare il file setka.html(per fare ciò selezionare dal menu contestuale la voce "Salva tramite collegamento con nome..."). Se apri direttamente questo file nel browser (facendo clic sul collegamento indicato con il pulsante sinistro del mouse), non funzionerà nulla, perché il framework Bootstrap non si connetterà.

Posiziona il file setka.html scaricato nella cartella Bootstrap di cui abbiamo parlato in . Dovrebbe essere allo stesso livello del file index.html che abbiamo creato in precedenza.

Ora apri questo file setka.html in qualsiasi browser di tua scelta e sperimenta le dimensioni della finestra del tuo browser per vedere Bootstrap 3 in azione e capire come funziona il sistema a griglia. Quale? Spiegherò ora.

La risoluzione dello schermo del mio monitor è larga 1280 pixel, che è superiore al punto di interruzione di 1200 pixel impostato per la griglia grande. Cosa vediamo come risultato? Qualcosa come questa immagine:

Ecco cinque esempi di layout di siti Web basati su tipi diversi griglie:

1. La prima riga è descritta utilizzando tutti e quattro i sistemi di griglia disponibili su questo momento in Bootstrap. A seconda della risoluzione dello schermo del dispositivo su cui viene visualizzato il layout, verrà visualizzato il nome della griglia utilizzata in ciascuna delle celle (ora è scritto sopra la prima riga che viene utilizzata una griglia grande e nelle celle "cl-lg" - il prefisso della classe della griglia grande). Man mano che la larghezza dello schermo diminuisce, queste etichette cambieranno.
2. Il resto delle righe sottostanti utilizza un solo sistema di dimensioni della griglia: molto piccolo, piccolo, medio e grande (in quest'ordine).

In questo modo possiamo vedere e confrontare come queste griglie dell'arsenale Bootstrap 3 funzionano insieme e come funzionano separatamente (quando si utilizza un solo tipo). Perché Poiché il mio browser è stato espanso a schermo intero (più largo di 1200 pixel) quando ho acquisito lo screenshot precedente, questi cinque esempi di layout del sito sono tutti espansi orizzontalmente (le colonne si trovano una accanto all'altra lungo la larghezza dello schermo).

Ora restringiamo un po' le dimensioni della finestra del browser in modo da poter vedere il collasso.

Il testo sopra la riga superiore ei prefissi di classe nelle sue celle sono cambiati (per questo sono state utilizzate le classi di visibilità, di cui parleremo più avanti). La griglia centrale è ora utilizzata ed è ancora visualizzata orizzontalmente. Allo stesso tempo, la riga inferiore (che illustra l'uso di only maglia grossolana) piegato verticalmente, cioè i blocchi vicini ora non vengono visualizzati uno accanto all'altro in larghezza, ma uno sotto l'altro (in altezza).

Si scopre che una grande griglia in assenza di qualsiasi influenza esterna si comporta in questo modo: è piegata verticalmente su tutti i dispositivi la cui dimensione dello schermo è inferiore a 1200 pixel di larghezza. In questo caso, tutti gli altri utilizzati nell'esempio di griglia vengono visualizzati orizzontalmente. La prima riga utilizza una combinazione di griglie, quindi ora è controllata dal sistema a griglia media (il sistema a griglia grande non ha più effetto).

Riduciamo ancora una volta le dimensioni della finestra del browser in larghezza in modo che diventi. Ci sarà un altro crash:

Ora (in base alle dimensioni dello schermo) stiamo lavorando con una piccola griglia. Di conseguenza, non solo la griglia grande, ma anche quella media si è sviluppata verticalmente. Bene, nella prima riga, dove viene utilizzata una combinazione di griglie, tutto è ora controllato dal piccolo sistema di griglie di Bootstrap. Allo stesso tempo, nel file setka.html, cambia anche la distribuzione delle colonne in questa prima riga, il che non è affatto necessario, ma è del tutto possibile farlo per soddisfare alcune delle tue esigenze in termini di layout (inoltre , per “uno o due”, senza alcun problema).

Continuiamo a ridurre la larghezza della finestra del browser ai valori. Si verifica un altro crash:

Di conseguenza, non solo le griglie grande e media corrono verticalmente attraverso la pagina, ma anche quella piccola le ha unite. il solo una griglia molto piccola è rimasta orizzontale, che rimane tale (come abbiamo appena visto) in ogni circostanza. Anche se restringi la pagina a una larghezza ultra ridotta, la griglia ultra ridotta non si trasformerà in una griglia verticale (anche quando il contenuto non entra nelle celle).

Questo esempio (file setka.html) è fatto esattamente. Di come tutto è organizzato lì, parleremo in dettaglio più avanti. Ma per ora, voglio attirare la tua attenzione solo su alcune delle sfumature che puoi notare nel codice sorgente del file setka.html.

Spiegazioni al codice sorgente del nostro esempio

In alto con stili aggiunti per progettazione visiva layout (rientri, colori della griglia, ecc.) che non comportano un carico semantico speciale. Se scorri verso il basso il codice sorgente, noterai questo blocco:

lg Una griglia grossolana viene utilizzata per schermi più larghi di 1200 px.

md Utilizza una griglia media per schermi inferiori a 1200 ma superiori a 992 px.

sm Usa una piccola griglia per schermi più piccoli di 992 ma più grandi di 768px.

xs Utilizza una griglia molto piccola per dimensioni dello schermo inferiori a 768 px, che rimane sempre orizzontale.

Ci sono quattro contenitori per i quali sono assegnati classi differenti(leggi su). Consentono di visualizzare contenuti specifici a seconda delle media query corrispondenti. misure differenti griglie. Come funziona? Tutti e quattro i titoli vengono caricati nel browser (se guardi il codice sorgente), ma viene visualizzato solo un titolo a seconda della risoluzione dello schermo corrente o delle dimensioni della finestra del browser.

Questo griglia maestra, dove sono combinati tutti e quattro i sistemi di griglia (puoi vederlo dagli attributi di cella come class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , che elenca i prefissi di classe di tutti e quattro griglie). La riga stessa, come accennato in precedenza, è definita inserendo tutti i suoi elementi costitutivi in ​​un contenitore con class="row" (nel nostro esempio, un contenitore basato su div).

Tieni presente che la nostra griglia principale è composta da tre celle (colonne) e se sommi tutti i numeri assegnati a ciascuna delle colonne, ad esempio, per i prefissi di griglia ultra-piccoli di Bootstrap (col-xs), otterrai un totale di 12. Quindi lo stesso sarà vero per i numeri dopo i prefissi di tutti gli altri sistemi. È comprensibile, perché questo framework, come accennato in precedenza, ha una struttura a 12 colonne, ad es. orizzontalmente, tutto lo spazio disponibile per il layout è suddiviso in dodici colonne di uguale larghezza(non visibili sul sito - sono come celle nei quaderni scolastici).

Bene, con l'aiuto dei numeri dopo i prefissi di classe, imposti semplicemente le proporzioni per ciascuna delle celle (colonne reali) del tuo layout. Quelli. le proporzioni possono essere ad esempio:

Affatto, è possibile utilizzare uno, due, tre o tutti e quattro i sistemi di griglia in un layout (riga). Tutto dipende dalle tue preferenze di progettazione e da ciò che stai cercando di ottenere dalla tua pagina web (come dovrebbe apparire a diverse dimensioni dello schermo). Il sito ufficiale fornisce un esempio:

Creazione di righe (righe) e celle con classi bootstrap

Ora, per la migliore comprensione, creiamo pagina Html, che ricorda in qualche modo pagina web reale(con un'intestazione, contenuto di testo e immagine e un piè di pagina) e disponilo utilizzando il sistema a griglia Bootstrap 3.

Più precisamente, creerò io stesso il grezzo e ti suggerirò solo, per analogia con l'esempio precedente, di scaricare il file sito web.html(per fare ciò, seleziona la voce "Salva con nome ..." dal menu contestuale), in modo da poter aggiungere in seguito a questo "pesce" insieme le classi bootstrap necessarie. Dovrà anche essere posizionato nella cartella Bootstrap allo stesso livello del file index.html che abbiamo creato nel primo articolo (e del file setka.html con cui abbiamo lavorato appena sopra).

Se guardi il codice sorgente del file sait.html, vedrai che Bootstrap e jquery sono già inclusi in esso e il contenuto è stato aggiunto per imitare l'aspetto di una normale pagina web. Sì, avrai anche bisogno di una cartella con le immagini utilizzate in questa pagina. Puoi scaricarlo da qui - img.zip. Basta decomprimere l'archivio e posizionare la cartella img (assicurarsi che contenga file immagine e non un'altra cartella img) all'interno della cartella Bootstrap, allo stesso livello del file sait.html. La struttura sarà simile a questa:

Ora, (dalla cartella Bootstrap) nel browser, vedrai la pagina web che ho usato come esempio. È sorprendente che tutti i blocchi sulla pagina si trovino uno sotto l'altro e ciò interferisce notevolmente con la corretta percezione visiva delle informazioni. Sarebbe logico posizionarli in colonne e in modo che quando le dimensioni dello schermo diminuiscono, il "design risponda" a questo, modificando il numero di colonne per creare facilità di visualizzazione su dispositivi con diverse larghezze dell'area visibile.

IN Html originale Nel codice del file sait.html, mostravo i confini delle righe (linee) che intendo, per le quali configureremo la visualizzazione delle colonne utilizzando una sorta di sistema di griglia Bootstrap. Ci sono solo quattro righe (sono numerate nello screenshot sopra): un'intestazione (un'intestazione con il nome e il logo del sito), un titolo e una descrizione della pagina, una parte del contenuto (il contenuto principale costituito da annunci di quattro articoli) e un piè di pagina.

Ora dovremo aggiungere il markup Bootstrap al file sait.html, che. Per creare righe, come ricordi, sarà sufficiente racchiudere tutto il suo contenuto in un contenitore (il più delle volte si tratta di tag Div, anche se potrebbero essercene altri) e scriverci una classe classe="riga". Per la prima riga sarà simile a questo:

Lo stesso deve essere fatto per tutte le altre righe (linee): inserisci il tag di apertura

- alla sua fine. Non mostrerò l'intero codice del file sait.html con le modifiche apportate, perché è troppo voluminoso.

Utilizzo di griglie diverse per creare colonne con contenuto a diverse larghezze dello schermo

Ora facciamo formiamo le cellule in quelle righe (righe) dove ha senso farlo. Sarebbe abbastanza logico posizionare gli annunci di articoli (dalla terza riga) in quattro colonne e, quando la larghezza dello schermo diminuisce, convertire queste quattro colonne in due. Come farlo? Diamo un'occhiata.

Quindi, in Bootstrap 3 c'è una griglia di 12 colonne, di cui abbiamo parlato sopra. Poiché abbiamo deciso di creare quattro colonne con annunci, sarebbe logico renderle uguali in larghezza, il che significa che ciascuna delle colonne sarà larga tre celle (celle) del nostro sistema di griglia invisibile (indipendentemente dalla griglia che scegliamo - ultra -piccolo, piccolo, medio o grande).

Quale rete scegliere per il lavoro? Prendiamo la media per cominciare, come compromesso. In questo caso, dovrai aggiungere la classe "col-md-3" ai contenitori di tutte e quattro le celle -