Il sistema a griglia di Bootstrap consente fino a 12 colonne nell'intera pagina.
Se non desideri utilizzare tutte le 12 colonne singolarmente, puoi raggrupparle insieme per creare colonne più ampie:
| arco 1 | arco 1 | arco 1 | arco 1 | arco 1 | arco 1 | arco 1 | arco 1 | arco 1 | arco 1 | arco 1 | arco 1 |
| intervallo 4 | intervallo 4 | intervallo 4 | |||||||||
| intervallo 4 | intervallo 8 | ||||||||||
| intervallo 6 | intervallo 6 | ||||||||||
| intervallo 12 | |||||||||||
Il sistema a griglia di Bootstrap è reattivo e le colonne verranno riordinate in base alle dimensioni dello schermo: su uno schermo grande potrebbe apparire migliore con i contenuti organizzati in tre colonne, ma su uno schermo piccolo sarebbe meglio se gli elementi di contenuto fossero impilati uno sopra l'altro. altri.
Suggerimento: ricorda che le colonne della griglia devono sommare fino a dodici righe. Inoltre, le colonne verranno impilate indipendentemente dal viewport.
Classi della grigliaIl sistema Grid Bootstrap ha quattro classi:
Le classi di cui sopra possono essere combinate per creare layout più dinamici e flessibili.
Suggerimento: ogni classe viene ridimensionata, quindi se desideri impostare la stessa larghezza per XS e SM, devi solo specificare XS.
Regole del sistema a grigliaAlcune regole della griglia Bootstrap:
Di seguito è riportata la struttura di base della griglia Bootstrap:
...
Pertanto, per creare un layout, è necessario creare un contenitore (). Quindi crea string(). Quindi aggiungi tutte le colonne di cui hai bisogno (tag con classi .col-*-* appropriate). Tieni presente che la somma dei numeri in .col-*-* deve sempre dare fino a 12 per ogni riga.
Opzioni della grigliaLa tabella seguente riassume il funzionamento del sistema Grid di Bootstrap su più dispositivi.
| prefisso di classe | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| adatto a | Telefoni | compresse | Piccoli laptop | Laptop e desktop |
| Comportamento della griglia | Orizzontale in ogni momento | Collassato all'inizio, orizzontale sopra i punti di interruzione | Collassato all'inizio, orizzontale sopra i punti di interruzione | |
| Larghezza del contenitore | Nessuno (automatico) | 750px | 970px | 1170px |
| N. di colonne | 12 | 12 | 12 | 12 |
| Larghezza della colonna | Auto | ~62px | ~81px | ~97px |
| Larghezza della grondaia | 30px (15px su ciascun lato di una colonna) | 30px (15px su ciascun lato di una colonna) | 30px (15px su ciascun lato di una colonna) | |
| Nestabile | SÌ | SÌ | SÌ | SÌ |
| compensazioni | SÌ | SÌ | SÌ | SÌ |
| ordinamento delle colonne | SÌ | SÌ | SÌ | SÌ |
I capitoli seguenti mostrano esempi di sistemi Grid per vari dispositivi.
01.06.2016
Ciao a tutti!
Continuiamo ad apprendere le basi di "bootstrap 3". È tempo di familiarizzare con "bootstrap 3" con un concetto come una griglia.
Con l'aiuto della griglia, sarai in grado di creare il tuo primo wireframe del sito adattivo (pagina web).
Quindi la griglia Bootstrap è composta da righe e colonne.
Prima di creare colonne, devi scrivere una riga. Per fare ciò basta scrivere il tag div con la classe "row".
...ci saranno colonne...
Quindi, prima viene scritta una riga e le colonne sono già costruite nella riga.
1. Crea una stringa:
...ci saranno colonne... ...ci saranno colonne...
2. Crea colonne (griglia):
La griglia Bootstrap è composta da 12 colonne di uguale larghezza.
Se necessario, le colonne possono essere combinate e posizionate nella posizione desiderata.
Per creare colonne, devi scrivere una classe all'interno di " riga"
"col-(*1)-(*2)".
Dove (*1) indichiamo per quali gruppi di dispositivi è necessario eseguire ( vedere la tabella 1
).
Dove (*2) indichiamo il numero (numero di colonne)
(vedere la tabella 2
).
(scheda. 1) Tabella di markup bootstrap per diversi gruppi di dispositivi
Ritorniamo a questo punto con un esempio.
Osservando la tabella possiamo creare colonne (costruire una griglia) per diversi gruppi di dispositivi (cellulari, tablet, PC, ecc.).
Per esempio:
sito blog
In questo modo specifichiamo per quali dispositivi vogliamo creare altoparlanti.
Ora cerchiamo di capire cos'è (*2). Poiché l'ho già menzionato sopra, questo è un numero che indica il numero di colonne
(vedere la tabella 2
).
(scheda. 2) Layout della griglia Bootstrap3
Nella tabella puoi vedere che la griglia Bootstrap è composta da 12 colonne di uguale larghezza.
Per specificare 12 colonne identiche per tutti i dispositivi, invece di ( * 2 ), è necessario specificare un numero adatto. Ma ricorda che il totale dovrebbe essere 12.
Vediamo un esempio:
tabella di markup Bootstrap del sito blog
Per farti capire cosa ho detto riguardo al fatto che l'importo totale dovrebbe essere pari a 12, faremo un calcolo aritmetico.
Guarda le righe n. 2 e n. 3.
○ col-lg-12 e col-lg-12 . (dimensione dello schermo ≥1200px).
Risultato:
○ col-md-8 e col-md-4 . (dimensione dello schermo ≥992px).
Ci saranno due colonne sullo schermo, poiché 8 + 4 = 12 (esattamente la stessa quantità di cui è composta la griglia).
Il lato sinistro combinerà 8 colonne e il lato destro 4.
Risultato:
○ col-sm-6 e col-sm-6 (dimensione dello schermo ≥768px).
Ci saranno due colonne sullo schermo, poiché 6 + 6 = 12 (esattamente la stessa quantità di cui è composta la griglia).
Il lato sinistro combinerà 6 colonne e il lato destro 6.
Risultato:
○ col-xs-12 e col-xs-12 (dimensioni dello schermo .col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, . col-xs-12 ( border:1px solido #ccc; altezza:60px; ) Blocco 1 Blocco 2 Blocco 3 Blocco 4 Contenuto del menu
Potrai vedere il risultato, e allo stesso tempo verificare dal tuo telefono, tablet o PC come si aprirà il layout creato.
Ciao, cari lettori del sito blog. Nella prima parte dell'articolo, abbiamo conosciuto le capacità di questo framework, imparato cos'è il responsive design e perché è così importante nella nostra era di crescita dilagante della popolarità di vari gadget mobili. Lì abbiamo anche considerato in dettaglio le problematiche relative alla connessione di Bootstrap a una pagina Html (connessione di file di stile, script e libreria jQuery).
L'articolo di oggi riguarda il sistema di griglia utilizzato in Bootstrap 3. Imparerai quali dimensioni della griglia possono essere utilizzate, come si comporteranno su dispositivi con dimensioni dello schermo diverse e come creare righe e celle in base a una o più griglie. Tutto ciò verrà spiegato con esempi che, spero, miglioreranno la percezione.
Come funziona il sistema a griglia in Bootstrap 3Bootstrap 3 viene fornito con un sistema a griglia a 12 colonne progettato principalmente per dispositivi mobili. Quelli. è progettato pensando innanzitutto ai piccoli display e, in secondo luogo, agli schermi ampi. La nuova versione di questo framework ha quattro dimensioni di griglia. Tutte queste informazioni possono essere approfondite nel dettaglio sul sito ufficiale GetBootstrap.com accedendo alla scheda "CSS" dal menu in alto e selezionando la voce "Sistema griglia" in quello di destra.
Lì riceverai una spiegazione completa di come funziona il sistema, query multimediali correlate e così via. La riga di elementi Html (ad esempio annunci di articoli della pagina principale) che si vuole posizionare nella griglia dovrà essere circondata da un contenitore (ad esempio racchiuso tra tag Div) e dovrà essere assegnata la classe .row ad esso (in questo caso, il tag di apertura sarà simile a ) .
Bene, puoi distribuire gli elementi all'interno della riga su uno o più tipi di griglie contemporaneamente impostando l'attributo class con un valore, ad esempio .col-xs-number (in questo caso, viene utilizzata solo una griglia extra-piccola ).
Ad esempio, se desideri ottenere come risultato tre colonne di uguali dimensioni, devi dividere 12 (la dimensione della griglia in Bootstrap 3) per 3 (il numero di colonne richiesto). Ciò significa che per ogni elemento Html all'interno della riga (di nuovo, questi possono essere contenitori Div), dovrai registrare le stesse classi - . Se hai bisogno di colonne di larghezza diversa, devi solo soddisfare la condizione che la somma dei numeri dopo col-xs- in tutte e tre le classi deve essere 12 (ad esempio, 2-4-6). Ma prima diamo un'occhiata a cosa è "xs" in questa voce e cosa significa?
Un po' più in basso nell'area "Opzioni griglia" troverai una spiegazione delle quattro dimensioni della moderna griglia Bootstrap menzionata sopra.
Le ultime tre griglie saranno orizzontali solo se la dimensione dello schermo è maggiore del punto in cui si verifica la compressione. Ad esempio, per una griglia grande su schermi inferiori a 1200 pixel, non sarà più orizzontale e diventerà verticale. Nella pagina del sito ufficiale GetBootstrap.com, che stiamo attualmente esaminando, ci sono esempi e spiegazioni a riguardo. Tuttavia, secondo me, tutto è un po’ confuso e complicato.
Esempio di sistema a griglia Bootstrap 3 per diverse larghezze dello schermoCercherò di spiegare tutto questo con un esempio già pronto. Dovrai solo copiare il file setka.html (per fare ciò seleziona la voce "Salva collegamento con nome..." dal menu contestuale). Se apri questo file direttamente nel browser (facendo clic sul collegamento indicato con il pulsante sinistro del mouse), non funzionerà nulla, perché il framework Bootstrap non si connetterà.
Inserisci il file setka.html scaricato nella cartella Bootstrap di cui abbiamo parlato in . Dovrebbe essere allo stesso livello del file index.html creato in precedenza.
Ora apri questo file setka.html in qualsiasi browser di tua scelta e sperimenta le dimensioni della finestra del browser per vedere Bootstrap 3 in azione e capire come funziona il sistema a griglia. Quale? Adesso ti spiego.
La risoluzione dello schermo del mio monitor è larga 1280 pixel, ovvero 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 diversi tipi di griglie:
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ù grande di 1200 pixel di larghezza) 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 leggermente le dimensioni della finestra del browser in modo da poter vedere la compressione.
Il testo sopra la riga superiore e i prefissi delle classi nelle sue celle sono cambiati (per questo sono state utilizzate le classi di visibilità, di cui parleremo più avanti). La griglia centrale viene ora utilizzata ed è ancora visualizzata orizzontalmente. Allo stesso tempo, la riga inferiore (che illustra l'uso solo di una griglia grossolana) si è piegata verticalmente, ad es. 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 influenze esterne 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 della griglia vengono visualizzati in orizzontale. La prima riga utilizza una combinazione di griglie, quindi ora è controllata dal sistema a griglia media (il sistema grande non ha più effetto).
Riduciamo ancora una volta la dimensione della finestra del browser in larghezza in modo che diventi. Ci sarà un altro incidente:
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 a griglia 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 vostre esigenze in termini di layout (inoltre , da “uno o due”, senza alcun problema).
Continuiamo a ridurre la larghezza della finestra del browser ai valori. Si verifica un altro incidente:
Di conseguenza, non solo le griglie grande e media corrono verticalmente attraverso la pagina, ma anche quella piccola si unisce ad esse. L'unica griglia orizzontale rimasta è una griglia molto piccola, che rimane tale (come abbiamo appena visto) in ogni circostanza. Anche se restringi la pagina a una larghezza ultra piccola, la griglia ultra piccola non si trasformerà in una griglia verticale (anche quando il contenuto non si adatta alle celle).
Questo esempio (file setka.html) è fatto esattamente. Di come è organizzato tutto lì, parleremo in dettaglio più tardi. 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 esempioCon l'aiuto vengono aggiunti in alto gli stili per la progettazione visiva dei 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 di larghezza superiore a 1200 px. md Utilizza una griglia media per schermi inferiori a 1200 ma superiori a 992 px. sm Utilizza una piccola griglia per schermi più piccoli di 992 ma più grandi di 768px. xs Utilizza una griglia extra piccola per schermi di dimensioni inferiori a 768 px, che rimane sempre orizzontale.
Esistono quattro contenitori a cui vengono assegnate classi diverse (leggi informazioni). Ti consentono di visualizzare contenuti specifici in base a query multimediali corrispondenti a diverse dimensioni della griglia. 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.
.col-lg-4 .col-md-1 .col-sm-5 .col-xs-5 .col-lg-4 .col-md-5 .col-sm-1 .col-xs-6 .col -lg-4 .col-md-6 .col-sm-6 .col-xs-1
Questa è la griglia principale, dove sono combinati tutti e quattro i sistemi di griglia (puoi vederlo dagli attributi della cella come class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , che elenca la classe prefisso tutte e quattro le griglie). La riga stessa, come accennato in precedenza, viene definita posizionando 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 colonna, ad esempio, per i prefissi di griglia ultra-piccoli di Bootstrap (col-xs), otterrai un totale di 12. Quindi lo stesso varrà per i numeri dopo i prefissi di tutti gli altri sistemi. È comprensibile, perché questo quadro, come menzionato sopra, ha una struttura a 12 colonne, cioè orizzontalmente tutto lo spazio a disposizione per l'impaginazione è suddiviso in dodici colonne di uguale larghezza (invisibili nel sito, sono come le celle dei quaderni di scuola).
Bene, con l'aiuto dei numeri dopo i prefissi delle classi, imposti semplicemente le proporzioni per ciascuna cella (colonne reali) del tuo layout. Quelli. le proporzioni possono essere, ad esempio:
In generale è possibile utilizzare uno o due, tre o tutti e quattro i sistemi di griglia in un layout (linea). Tutto dipende dalle tue preferenze di progettazione e da cosa stai cercando di ottenere dalla tua pagina web (come dovrebbe apparire su schermi di dimensioni diverse). Il sito ufficiale fornisce un esempio:
Creazione di righe (righe) e celle con classi Bootstrap
Creiamo ora, per una migliore comprensione, una pagina Html che ricordi in qualche modo una vera pagina web (con un'intestazione, contenuto testuale e grafico e un piè di pagina) e disponiamola utilizzando il sistema a griglia Bootstrap 3.
Più precisamente, creerò io stesso lo spazio vuoto e ti suggerirò solo di scaricare, per analogia con l'esempio precedente, il file sait.html (per questo seleziona la voce "Salva con nome ..." dal menu contestuale) , in modo da poter aggiungere successivamente le classi bootstrap necessarie. Dovrà inoltre essere inserito 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 al suo interno e che il contenuto è stato aggiunto per imitare l'aspetto di una pagina web media. Sì, avrai bisogno anche 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 (assicuratevi che contenga file di 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 la dimensione dello schermo diminuisce, il “design risponda” a questo, modificando il numero di colonne per creare facilità di visualizzazione su dispositivi con diverse larghezze dell'area visibile.
Nel codice Html sorgente del file sait.html, ho usato per mostrare i confini delle righe (linee) che intendo, per le quali personalizzeremo 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 di 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 ricorderete, sarà sufficiente racchiudere tutto il suo contenuto in un contenitore (molto spesso si tratta di tag Div, anche se potrebbero essercene altri) e scrivervi la classe class="row". Per la prima riga sarà simile a questo:
sito web 
Lo stesso deve essere fatto per tutte le altre righe (linee): inserisci il tag di apertura all'inizio della riga futura e il tag alla 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 contenuti a diverse larghezze dello schermoOra iniziamo a formare celle in quelle righe (righe) in cui ha senso farlo. Sarebbe abbastanza logico posizionare gli annunci degli articoli (dalla terza riga) in quattro colonne e, quando la larghezza dello schermo diminuisce, queste quattro colonne si convertano 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 gli 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 lavorare? Prendiamo la media per cominciare, come compromesso. In questo caso, nei contenitori di tutte e quattro le celle, dovrai aggiungere la classe "col-md-3" - . Ti mostro l'esempio del codice di una cella, per non ingombrare l'articolo:
Dopo aver salvato le modifiche apportate, vedrai che la nostra pagina web ha già acquisito un aspetto molto più utilizzabile:
È vero, quando la finestra del browser viene ridotta alla larghezza di un punto di interruzione più piccolo (nel caso della griglia media che utilizziamo, sarà di 992 pixel), tutti gli annunci verranno nuovamente allineati in una colonna, il che non va bene, perché l'usabilità in questo caso diminuisce (una risoluzione di quasi 1000 pixel consente di organizzare in modo più denso le informazioni). Per risolvere questa situazione, puoi aggiungere un'altra griglia dall'arsenale Bootstrap per le stesse celle con gli annunci. Come farlo? Diamo un'occhiata.
Usiamo i prefissi "col-xs-6" al nome della classe in ogni cella con l'annuncio (il risultato sarà una classe composita class="col-md-3 col-sm-6"). Apparirà così (usando una cella come esempio):
Testo dell'annuncio.
Come puoi vedere, qui abbiamo violato la regola recentemente annunciata secondo cui la somma dei numeri dopo i prefissi di una griglia in tutte le celle dovrebbe essere 12. Abbiamo ottenuto 24 (quattro volte sei). Ma lo abbiamo fatto apposta per ottenere il risultato desiderato: invece di quattro, otteniamo due colonne quando superiamo il punto di interruzione per il sistema di griglia Bootstrap medio (è 992 pixel). Quelli. le celle saranno posizionate su due file, due in ciascuna:
Perché Se scegliamo un sistema a griglia ultrapiccolo, con un'ulteriore diminuzione della larghezza della finestra del browser, la disposizione verticale dei blocchi con annunci uno sotto l'altro (posizionamento in una colonna) non avverrà, poiché questo sistema rimane sempre orizzontale.
Se vuoi che quattro colonne si trasformino in due colonne quando la larghezza dello schermo diminuisce, e poi in una colonna, allora dovresti usare un piccolo sistema a griglia invece di "col-xs-6" usando "col-sm-6" :
Quindi, quando la larghezza della finestra del browser viene ridotta al di sotto di 768 pixel, verrà visualizzato uno scrap in cui due colonne con annunci vengono convertite in una. Basta sperimentare e sentire la differenza.
Personalizzare l'intestazione di una pagina Web utilizzando Bootstrap 3Sperimentiamo e riproviamo, in cui ci sono essenzialmente due potenziali celle: il nome del sito con una descrizione e un logo. Anzi, li posizioneremo. Usiamo una griglia più grande questa volta con "col-lg-6" per creare due colonne uguali.
sito web
Tutto sulla creazione di siti Web, blog, forum, negozi online, sulla loro promozione nei motori di ricerca e sul guadagno sul sito
È vero, quando si utilizza una griglia di grandi dimensioni, lo scraping avviene con risoluzioni dello schermo piuttosto grandi (finestre del browser, nel nostro caso, perché lì simuliamo dispositivi con larghezze dello schermo diverse). Successivamente, le celle vengono piegate verticalmente. Per evitare ciò, aggiungeremo un'altra griglia Bootstrap 3 per la prima riga. Penso che andrà bene un piccolo sistema a griglia (prefisso di classe col-sm). Quindi il codice sarà simile a questo:
sito web
Tutto sulla creazione di siti Web, blog, forum, negozi online, sulla loro promozione nei motori di ricerca e sul guadagno sul sito
Tuttavia, non ho creato le stesse celle con il nome del sito e il logo per la griglia piccola, perché il logo è essenzialmente più stretto (nel senso stretto) del nome con la descrizione. Con una larghezza dello schermo inferiore non sarebbe logico assegnare loro celle uguali. Ecco perché ho creato la prima colonna con il nome e la descrizione del sito quando il sistema a piccola griglia Bootstrap è attivato, il doppio della dimensione della colonna del logo.
Di conseguenza, quando la finestra del browser viene ridotta, queste celle convergeranno fino al momento dell'interruzione del piccolo sistema di griglia Bootstrap, che avviene con una larghezza inferiore a 768 pixel, e quindi entrambe le celle si troveranno una sotto l'altra.
Potresti aver notato che il testo sulla pagina si blocca nel bordo sinistro dello schermo, causando . Puoi aggiungere per risolvere questa situazione nel tag body, che lo consentirà. E puoi risolvere tutto con gli strumenti standard di Bootstrap 3.
Per fare ciò, dovrai racchiudere l'intero contenuto della pagina web (tutto ciò che è racchiuso nei tag Body) in un contenitore Div con la classe con lo stesso nome - . Quelli. inserisci questo tag immediatamente dopo il tag Body di apertura e chiudilo prima di chiamare gli script che si trovano immediatamente prima del tag Body di chiusura. Successivamente, il testo non poggerà più sulla finestra del browser.
Puoi anche vedere che le immagini di anteprima si sovrappongono l'una all'altra man mano che la larghezza dello schermo diminuisce. Il fatto è che sono ancora “non responsivi”, ma li renderemo tali nei prossimi articoli di questa rubrica. Inoltre continueremo ad analizzare il lavoro con il sistema a griglia Bootstrap 3, impareremo come progettare pulsanti, tabelle, moduli Html, creare menu a discesa, navigazione e molto altro. Pertanto, non cambiare e resta sintonizzato per le nuove pubblicazioni.
Continua >>> (Puoi iscriverti alla newsletter per non perdertela)
Ed ecco la continuazione: (ma ti iscrivi comunque - ci saranno molte altre cose interessanti e utili).
In questo articolo faremo conoscenza con le classi del framework Bootstrap 3, progettate per creare uno "scheletro" (layout) adattivo del sito.
Bootstrap degli elementi della griglia "costruzione" 3La griglia Bootstrap è composta da elementi di "costruzione". I principali sono wrapper, righe, blocchi adattivi e classi di utilità reattive.
In sostanza, una griglia è solo un elenco di classi predefinite con cui è possibile impostare il comportamento necessario per i blocchi (elementi HTML) e costruire con il loro aiuto un determinato layout del sito adattivo.
InvolucriUn contenitore wrapper è un elemento di “costruzione” della griglia, da cui parte, a seconda della strategia di sviluppo, l'impaginazione dell'intera pagina o di parte di essa (ad esempio header, menu principale, area principale, footer).
Un contenitore in Bootstrap può essere reattivo fisso o reattivo fluido.
Il primo (contenitore fisso adattivo) è caratterizzato dal fatto che ha una larghezza costante all'interno di un intervallo di larghezza del viewport (area di visualizzazione).
La seguente tabella mostra la larghezza di un contenitore reattivo fisso con una determinata larghezza della finestra del browser:
= 768px e = 992px e ...  Quando si progetta il layout di un sito, in genere non viene utilizzato l'annidamento di un contenitore wrapper Bootstrap in un altro. Quindi, il primo elemento di "costruzione" della griglia Bootstrap è un contenitore wrapper. Determina la larghezza del layout sulle varie finestre e lo centra (solo contenitore adattivo fisso) rispetto ai bordi sinistro e destro dell'area client della scheda o della finestra del browser. L'elemento di costruzione successivo è una riga (un blocco div con una classe riga). Una riga è un blocco speciale che viene utilizzato solo per avvolgere altri elementi costruttivi (blocchi adattivi). Il suo scopo principale è neutralizzare il riempimento positivo (15px a sinistra e a destra) di un contenitore wrapper o di un blocco reattivo.  Un esempio della formazione dei trattini: Contenitore (+15px) -> riga (-15px) -> colonna (+15px) -> contenitore del contenuto (+15px) -> riga (-15px) -> colonna (+15px) -> riga (-15px) -> col (+15px) -> contenuto *col è un blocco reattivo L'esempio mostra che, indipendentemente dal blocco reattivo in cui si trova il contenuto, avrà sempre il margine corretto (ovvero 15 px a sinistra e a destra). Il successivo elemento di "costruzione" della griglia Bootstrap è un blocco reattivo (div con classe col-?-?).  I riquadri reattivi sono elementi della griglia Bootstrap che hanno uno o più col-?-? . Questi blocchi sono i principali mattoni "da costruzione", formano la struttura necessaria. La larghezza del blocco adattivo viene impostata insieme al tipo di dispositivo. Ciò significa che il blocco reattivo può avere larghezze diverse su dispositivi diversi. È per questo motivo che questo blocco viene chiamato adattivo. Come è impostata la larghezza del blocco reattivo? L'impostazione della larghezza per una casella reattiva che dovrebbe avere su un particolare dispositivo è impostata per impostazione predefinita su un numero compreso tra 1 e 12 (il numero di colonne Bootstrap). Questo numero è indicato al posto del secondo carattere? in classe col-?-? . Questo numero (valore predefinito da 1 a 12) determina quale percentuale della larghezza dell'elemento principale dovrebbe avere il blocco reattivo. Ad esempio, il numero 1 imposta la larghezza del riquadro reattivo all'8,3% (1/12) della larghezza del riquadro principale. Il numero 12 è una larghezza pari al 100% (12/12) della larghezza del blocco genitore.  Oltre a specificare la larghezza del blocco adattivo, devi anche specificare il tipo di dispositivo (invece di 1 domanda). La classe del dispositivo determinerà a quale viewport verrà applicata questa larghezza. Bootstrap 3 distingue 4 classi principali. Sono xs (larghezza viewport >0), sm (larghezza viewport >= 768px), md (larghezza viewport >= 992px) e lg (larghezza viewport del browser >=1200px). Ad esempio, un blocco adattivo con la classe col-xs-12 col-sm-6 col-md-4 col-lg-3 avrà una larghezza del 100% (12/12) su xs e del 50% (6/12 ) su sm , su md - 33,3% (4/12), su lg - 25% (3/12). Inoltre, dovresti prestare attenzione al fatto che i blocchi adattivi non ne limitano la portata. Quelli. se specifichi xs nell'attributo class di un blocco adattivo, ma non specifichi sm , il suo effetto si estenderà all'ambito di questo intervallo. Ad esempio, un blocco adattivo con classe col-xs-6 col-lg-3 avrà una larghezza del 50% (6/12) sui dispositivi xs , sm e md e del 25% (3/12) su lg . Un blocco adattivo, come un contenitore, imposta margini positivi di 15px a sinistra e a destra per il contenuto che verrà inserito al suo interno. In un corretto layout della griglia Bootstrap, un blocco reattivo dovrebbe sempre avere una riga come genitore. Ad esempio, dividiamo il blocco in 3 colonne uguali, che verranno visualizzate verticalmente su xs e orizzontalmente su sm e superiori: ... ... ... Ad esempio, calcoliamo la larghezza disponibile per il contenuto del primo e del secondo blocco: 1 blocco... 2 blocchi...
I blocchi reattivi vengono posizionati nell'elemento genitore uno dopo l'altro in righe. Una riga contiene blocchi adattivi con un numero totale di colonne non superiore a 12 (per impostazione predefinita). Quelli. i blocchi che non rientrano nella prima riga vengono posizionati nella riga successiva e così via. Come sono organizzati i blocchi adattivi? In Bootstrap 3, i blocchi reattivi sono mobili (float:left). Questo deve essere preso in considerazione quando si crea il layout della pagina web. Prima del blocco, che deve iniziare su una nuova riga, è necessario posizionare un elemento div vuoto con la classe clearfix . È inoltre necessario nasconderlo per i dispositivi su cui non è necessario eseguire questa azione. Il blocco viene nascosto utilizzando le classi corrispondenti fornite di seguito. Anche i blocchi mobili hanno una caratteristica. Ad esempio, se nell'esempio precedente l'altezza di 1 blocco sarà superiore a 2 blocchi. Quindi il blocco 3 non si troverà su una nuova linea, ma "si attaccherà" al lato destro del blocco 1.  Per evitare ciò è necessario aggiungere un blocco con la classe clearfix e renderlo visibile ai dispositivi necessari (ad esempio su md e lg): 1 blocco... 2 blocchi... 3 blocchi... Il principio di base della creazione di un layoutIl principio di base della creazione di un layout è annidare alcuni blocchi adattivi in altri. Allo stesso tempo, la loro larghezza è sempre un parametro relativo, impostato come percentuale (in base al numero di colonne) della larghezza del blocco genitore. Quelli. a qualsiasi livello di nidificazione, ad esempio, un blocco reattivo di 6 colonne è sempre il 50% (6/12*100%) della larghezza dell'elemento genitore. Ad esempio, dividiamo un blocco (principale) in 4 blocchi (2 nella prima riga e 2 nella seconda). Per semplicità, creeremo un layout non adattivo: 1 blocco... 2 blocchi... 3 blocchi... 4 blocchi... Creiamo un layout di 3 blocchi (3 x 2): 1 blocco... 2 blocchi... 3-1 blocchi... 3-2 blocchi... 3-3 blocchi... 3-4 blocchi... 3-5 blocchi... 3-6 blocchi. ..4 blocchi... È facile vedere che il layout del blocco adattivo nidificato viene eseguito allo stesso modo di quello principale. Ciò significa che non importa quale livello di annidamento abbia un blocco, il suo layout viene creato secondo le stesse regole. Classi per l'offset del blocco adattivoBootstrap ha classi reattive (col-?-offset-?) che puoi utilizzare per spostare un blocco di un certo numero di colonne a destra. Primo? deve essere sostituito con il tipo di dispositivo (xs, sm, md o lg). Secondo? per il numero di colonne. Ad esempio, impostiamo il blocco sui dispositivi md su 8 colonne di larghezza e posizioniamolo nella riga al centro (ovvero spostiamolo di 2 colonne a destra): 1 blocco... Oltre agli strumenti per l'offset adattivo dei blocchi, Bootstrap 3 dispone anche di classi speciali che possono essere utilizzate per modificare l'ordine degli elementi all'interno di una singola riga. Bootstrap 3 classi di utilità reattiveBootstrap 3 contiene classi adattive (utilità) che consentono di controllare la visibilità della visualizzazione degli elementi in base al tipo di dispositivo. Oltre a specificare il dispositivo (xs, sm, md, lg) su cui sarà visibile il blocco, è necessario specificare anche come dovrà essere visualizzato su tale dispositivo. Le opzioni sono inline , block e inline-block .
Invece di un segno? È necessario specificare block , inline o inline-block. Quelli. specificare come deve essere visualizzato l'elemento. Ad esempio, aggiungere la classe visibile-md-block a un elemento significherà che verrà visualizzato solo sui dispositivi che dispongono di un viewport md (larghezza viewport >=992px e .col-md-1, .col-md-2, .col- md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, . col-md -10, .col-md-11, .col-md-12 ( border:1px solid #ccc; margin-bottom:30px; Height:60px; ) Ciao mondo! .col-md-1 .col -md- 1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md -1 . col-md-1 .col-md-1 .col-md-2 .col-md-10 .col-md-3 .col-md-9 .col-md-4 .col-md-8 .col- md-5 .col-md-7 .col-md-6 .col-md-6 .col-md-4 .col-md-4 .col-md-4 .col-md-12 Se ancora non capisci nulla, proverò a spiegarlo in questo modo. Quindi, per il contenuto, la classe "col-md-" sarebbe simile a questa: "col-md-8" contenuto in un blocco contenuto in un blocco Bootstrap ha la capacità di scrivere diversi stili CSS o dividere le celle in modo diverso per gruppi di dispositivi. Ad esempio, desidero che l'intestazione del mio sito sui monitor di grandi dimensioni sia divisa in una cella, ma per i telefoni ho deciso di creare due celle e applicare loro uno stile CSS diverso. Hai avuto l'idea? Tabella di layout bootstrap per diversi gruppi di dispositivi
|
