In questo articolo parleremo del sistema Bootstrap Grid.
Nella progettazione grafica, una griglia Bootstrap è una struttura (solitamente bidimensionale) composta da una serie di linee rette intersecanti (verticale, orizzontale) utilizzate per strutturare il contenuto. È ampiamente utilizzato per la progettazione del layout e la struttura dei contenuti nella progettazione della stampa. Nel web design, questo è molto metodo efficace creare in modo rapido ed efficiente un layout coerente utilizzando HTML e CSS.
In poche parole, le griglie nel web design organizzano e strutturano i contenuti, semplificano la scansione dei siti Web e riducono il carico cognitivo sugli utenti.
Come affermato dalla documentazione ufficiale di Bootstrap per il sistema di rete -
Bootstrap include un sistema mobile first fluido flessibile che di conseguenza scala fino a 12 colonne all'aumentare delle dimensioni del dispositivo o del viewport. Include classi predefinite per opzioni semplici layout, oltre a potenti mixin per creare più layout semantici.
Spieghiamo quanto sopra. Bootstrap 3 è prima il cellulare nel senso che il codice per Bootstrap ora inizia prendendo di mira schermi più piccoli come dispositivi mobili, tablet e quindi "estende" componenti e griglie a schermi più grandi come laptop e desktop.
I sistemi Web vengono utilizzati per creare layout di pagina su una serie di righe e colonne che ospitano i tuoi contenuti. Ecco come funziona la griglia Bootstrap -
Una query multimediale è un termine davvero stravagante per una "regola CSS condizionale". Applica solo alcuni CSS in base a determinate condizioni. Se queste condizioni sono soddisfatte, lo stile viene applicato.
Le query multimediali in Bootstrap ti consentono di spostare, mostrare e nascondere i contenuti in base alle dimensioni della visualizzazione dello schermo. Le seguenti media query vengono utilizzate nei file LESS per creare punti di interruzione chiave nella griglia Bootstrap.
/* Dispositivi extra piccoli (telefoni, meno di 768px) */ /* Nessuna query multimediale poiché questa è l'impostazione predefinita in Bootstrap */ /* Dispositivi piccoli (tablet, 768px e superiori) */ @media (larghezza minima: @screen -sm-min) ( ... ) /* Dispositivi medi (desktop, 992px e superiori) */ @media (larghezza min: @screen-md-min) ( ... ) /* Dispositivi grandi (desktop di grandi dimensioni, 1200px e oltre) */ @media (larghezza minima: @screen-lg-min) ( ... )
A volte si espandono a una larghezza massima per limitare i CSS a un insieme più ristretto di dispositivi.
@media (larghezza massima: @screen-xs-max) ( ... ) @media (larghezza minima: @screen-sm-min) e (larghezza massima: @screen-sm-max) ( ... ) @media (larghezza minima: @screen-md-min) e (larghezza massima: @screen-md-max) ( ... ) @media (larghezza minima: @screen-lg-min) ( .. .)
Le richieste multimediali sono composte da due parti: le specifiche del dispositivo e quindi la regola delle dimensioni. Nel caso di cui sopra, è impostata la seguente regola:
Considera questa linea -
@media (larghezza minima: @screen-sm-min) e (larghezza massima: @screen-sm-max) ( ... )
Per tutti i dispositivi, indipendentemente dal tipo con una larghezza minima: @screen-sm-min , se la larghezza dello schermo diventa inferiore a @screen-sm-max , fai qualcosa.
La tabella seguente riassume gli aspetti di come funziona il sistema a griglia di Bootstrap su più dispositivi −
| Piccoli dispositivi di emergenza Telefoni (meno di 768px) | Piccoli dispositivi Tablet (maggiore o uguale a 768px) | Dispositivi medi Desktop (maggiore o uguale a 992px) | Dispositivi di grandi dimensioni Desktop (maggiore o uguale a 1200px) | |
|---|---|---|---|---|
| Comportamento della maglia | Sempre orizzontalmente | Compresso all'inizio, orizzontale sopra i punti di interruzione | Compresso all'inizio, orizzontale sopra i punti di interruzione | |
| Larghezza massima del contenitore | No (automatico) | 750px | 970px | 1170px |
| prefisso di classe | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Numero di colonne | 12 | 12 | 12 | 12 |
| Larghezza massima della colonna | Auto | 60px | 78px | 95px |
| Larghezza della grondaia | 30px (15px su ciascun lato della colonna) | 30px (15px su ciascun lato della colonna) | 30px (15px su ciascun lato della colonna) | |
| Investito | sì | sì | sì | sì |
| Compensazioni | sì | sì | sì | sì |
| Colonna Ordine | sì | sì | sì | sì |
Di seguito è riportata la struttura di base della griglia Bootstrap:
Considera alcuni semplici esempi di griglia -
Con quattro livelli di griglie disponibili, dovresti riscontrare problemi in cui, in determinati punti di interruzione, le colonne non sono del tutto chiare poiché una è più alta delle altre. Per risolvere questo problema, utilizzare una combinazione della classe .clearfix e delle classi di utilità rispondenti come mostrato nell'esempio seguente:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min
Ridimensiona il viewport o provalo su un telefono per ottenere il risultato desiderato in questo esempio.
Gli offset sono una funzione utile per layout più specializzati. Possono essere usati per trascinare le colonne per una distanza maggiore (ad esempio). Le classi .col-xs-* non supportano gli offset, ma sono facili da replicare utilizzando una cella vuota.
Per utilizzare gli offset su schermi di grandi dimensioni, utilizzare le classi .col-md-offset-*. Queste classi aumentano il margine sinistro di una colonna di * colonne, dove * varia da 1 a 11 .
Nell'esempio seguente, abbiamo div class = "col-md-6" . Centriamo questo usando la classe .col-md-offset-3.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Questo produrrà il seguente risultato -
Per annidare il contenuto nella griglia predefinita, aggiungi un nuovo .row e un set di colonne .col-md-* all'interno di una colonna .col-md-* esistente. Le righe nidificate devono contenere un set di colonne che si sommano fino a 12.
Nell'esempio seguente, il layout ha due colonne e la seconda è divisa in quattro rettangoli su due righe.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consectetur art party Tonx culpa semiotics. Pinterest assumenda minimo organico quis.
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min.
Questo produrrà il seguente risultato -
Un'altra caratteristica interessante del sistema a griglia di Bootstrap è che puoi facilmente scrivere le colonne in un ordine e mostrarle in un altro. Puoi facilmente riordinare le colonne integrate della griglia con le classi .col-md-push-* e .col-md-pull-*, dove * varia da 1 a 11 .
Nell'esempio seguente, abbiamo due layout di colonna, con la colonna di sinistra che è la più stretta e funge da barra laterale. Riordineremo queste colonne usando le classi .col-md-push-* e .col-md-pull-*.
Prima di ordinare
Dopo l'ordine
Questo produrrà il seguente risultato -
Il sistema a griglia di Twitter Bootstrap 3 è un modo semplice e veloce per creare il layout del tuo sito web.
Le griglie Bootstrap vengono utilizzate nello sviluppo di layout di pagine Web e per creare layout a blocchi in cui è necessario fornire posizione corretta elementi. La progettazione di una griglia inizia con un contenitore che ha una larghezza fissa o mobile.
Contenitore a larghezza fissa (
Contenitore a larghezza variabile (
Il passaggio successivo consiste nel posizionare le righe (div con la classe .row) all'interno del contenitore. Larghezza riga (
All'interno della riga sono posizionati i blocchi con la classe col-*-* , all'interno dei quali sono inseriti il contenuto o altre righe. La larghezza dei blocchi con classe col-*-* viene impostata in forma relativa specificando il numero di colonne Bootstrap. Poiché una riga in Bootstrap è di 12 colonne per impostazione predefinita, la larghezza minima di un blocco col-*-* è una colonna Bootstrap e la larghezza massima di un blocco col-*-* è 12 colonne Bootstrap.
Ad esempio, se vogliamo creare 3 blocchi con la stessa larghezza in una riga, dobbiamo impostare la larghezza di questi blocchi su 4 colonne Bootstrap (
Ad esempio: puoi calcolare la larghezza del blocco in pixel come segue:
[Larghezza blocco] = [Larghezza colonna Bootstrap]*[Numero di colonne da cui è composto il blocco],
dove: [Larghezza colonna Bootstrap] = [Larghezza riga (riga)] / 12.
[Larghezza colonna Bootstrap] = 970 / 12 = 81px.
[larghezza blocco] = 81 * 4 = 324px.
Per creare layout di pagine Web per vari dispositivi (smartphone, tablet, laptop e computer personale) è necessario utilizzare le classi di griglia predefinite di Twitter Bootstrap 3.
Ad esempio, puoi utilizzare la classe .col-xs-* per creare una griglia per dispositivi a schermo piccolo come gli smartphone. Esattamente la stessa classe. col-sm-* - per dispositivi con schermo piccolo come tablet, classe .col-md-* - per dispositivi con dimensioni dello schermo medie come personal computer e laptop, nonché classe .col-lg-* - per dispositivi con schermo grande .
La tabella seguente ne riassume alcuni caratteristiche chiave nuovo sistema Bootstrap 3 griglie.
| Caratteristiche del sistema Bootstrap 3 Grid | Larghezza dello schermo minuscola Smartphone (<768px) |
Larghezza dello schermo ridotta Compresse (≥768px e<992) |
Larghezza media dello schermo laptop (≥992px e<1200px) |
Grande larghezza dello schermo Computer (≥1200px) |
|---|---|---|---|---|
| Larghezza contenitore fisso disposizione (.contenitore) |
750px | 970px | 1170px | |
| Larghezza contenitore layout fluido (.container-fluid) | Uguale alla larghezza della finestra client del browser | |||
| prefisso di classe | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Larghezza massima della colonna Bootstrap per un contenitore a larghezza fissa (.container) | ~62px (750px / 12) | ~81px (970px / 12) | ~97px (1170px / 12) | |
| Larghezza massima della colonna Bootstrap per contenitore mobile (.container-fluid) | La larghezza dell'area di lavoro della finestra del browser / 12 | |||
| Padding per blocchi di contenuto costituiti da colonne Bootstrap | 15px dal lato sinistro e destro del blocco | |||
Nota:
Se applichi la classe .col-sm-* a un blocco, non influirà solo sul markup per i dispositivi con schermo piccolo (tablet), ma anche per i dispositivi con schermo medio e grande se non specifichi le classi .col-md- * e .col-lg-* . Allo stesso modo, la classe .col-md-* influirà sul markup non solo per i dispositivi con schermo medio, ma anche per i dispositivi con schermo grande se la classe .col-lg-* non è specificata.
Con il nuovo sistema a griglia di Twitter Bootstrap 3, puoi controllare facilmente la visualizzazione del layout del tuo sito Web su diversi dispositivi con larghezze dello schermo diverse.
Ad esempio, considera il processo di sviluppo del layout di un sito Web, composto da 3 blocchi per tutti i dispositivi. Il layout sviluppato su diversi dispositivi (smartphone, tablet, laptop, personal computer) avrà un aspetto diverso. Ad esempio, sugli smartphone, questi blocchi sono disposti verticalmente, mentre su un grande schermo di un personal computer, sono posizionati orizzontalmente. Cioè, il nostro layout cambierà automaticamente quando vengono raggiunti i limiti di larghezza della finestra del browser.
Il layout del sito per un dispositivo con un grande schermo (larghezza >=1200px) è composto da tre blocchi disposti orizzontalmente, che occupano l'intera larghezza del contenitore. La prima casella è la metà della larghezza del contenitore (col-lg-6), la seconda casella è un quarto della larghezza del contenitore (col-lg-3) e la terza casella è un quarto della larghezza del contenitore contenitore (col-lg-3).
Layout del sito per dispositivo a schermo medio (larghezza >=992px e<1200) состоит из трёх блоков, два из которых расположены в одной строке и один в другой. Первый блок имеет ширину равную 8 колонкам Bootstrap (col-md-8), второй блок занимает оставшуюся ширину, т.е. 12 - 8 = 4 колонки (col-md-4). Так как третий блок должен располагаться с новой строки, то необходимо перед ним поместить дополнительный пустой блок с классом.clearfix , который не будет обтекать предыдущие блоки. Также необходимо иметь в виду, что это надо сделать только для экранов со средней шириной. Для этого необходимо к пустому блоку дополнительно добавить класс.visible-md-block . Ширина 3 блока равна ширине контейнера (col-md-12).
Configurare il layout per altri dispositivi allo stesso modo. Layout del sito per un dispositivo con schermo piccolo (larghezza >=768px e<992px) состоит из 3 блоков, первый блок занимает всю ширину контейнера, остальные 2 блока расположены под ним и занимают каждый ширину, равную 6 колонкам Bootstrap.
<div class="contenitore"> <div class="riga"> <div class="col-lg-6 col-md-8" style= "altezza:300px; sfondo:verde;"> Blocco n. 1div > <div class="col-lg-3 col-md-4" style= "altezza:100px; sfondo:arancione;"> Blocco n. 2div > <div class ="clearfix visible-md-block" >Layout del sito Web per un dispositivo con uno schermo minuscolo (larghezza<768px) состоит из 3 блоков, которые расположены вертикально и занимают всю ширину контейнера.
<div class="contenitore"> <div class="riga"> <classe div = "col-lg-6 col-md-8 col-sm-12 col-xs-12" stile= "altezza:300px; sfondo:verde;">Nota: per dispositivi con larghezza dello schermo molto ridotta (<768px) блоки по умолчанию всегда занимают всю ширину рабочей области экрана (col-xs-12) и располагаются один под другим как в нашем примере. Настраивать макет для таких устройств имеет смысл, если макет отличается от вышесказанного.
<div class="contenitore"> <div class="riga"> <div class="col-lg-6 col-md-8 col-sm-12" style= "altezza:300px; sfondo:verde;"> Blocco n. 1Twitter Bootstrap 3 contiene classi di utilità reattive che consentono di abilitare la visualizzazione di elementi solo su determinati dispositivi le cui dimensioni dello schermo rientrano nell'intervallo appropriato.
Twitter Bootstrap 3.2 ha aggiunto il supporto per la proprietà di visualizzazione CSS sulla classe .visible. Una nuova funzionalità consente di impostare la visibilità di elementi come inline , block e inline-block su diverse schermate. Ad esempio, la classe .visible-md-block abilita la visibilità di un elemento se è un elemento di blocco e la larghezza corrente dell'area client della finestra del browser corrisponde all'intervallo md (larghezza >=992px e<1200px).
| Descrizione | |
|---|---|
| .visible-xs-* | Rende visibile l'elemento solo su dispositivi con schermo molto piccolo che hanno una larghezza dello schermo inferiore a 768px. Su altri dispositivi, questi elementi non sono visibili. |
| .visibile-sm-* | Rende l'elemento visibile solo sui dispositivi con una larghezza dello schermo maggiore o uguale a 768px (ovvero ≥768px) e inferiore a 992px. Su altri dispositivi, questi elementi non sono visibili. |
| .visibile-md-* | Rende visibile l'elemento solo su dispositivi che hanno una larghezza dello schermo maggiore o uguale a 992px (cioè ≥992px) e inferiore a 1200px. Su altri dispositivi, questi elementi non sono visibili. |
| .visible-lg-* | Rende visibile l'elemento solo sui dispositivi che hanno una larghezza dello schermo maggiore o uguale a 1200px (cioè ≥1200px). Su altri dispositivi, questi elementi non sono visibili. |
Nota: puoi anche condividere queste classi per rendere visibili gli elementi su più dispositivi. Ad esempio, puoi applicare le classi .visible-xs-* e .visible-md-* a qualsiasi blocco per renderlo visibile su dispositivi con schermo sia molto piccolo che medio.
Allo stesso modo, puoi utilizzare le classi di utilità seguenti per nascondere gli elementi dalla visualizzazione su determinati dispositivi.
Suggerimento: puoi anche condividere queste classi in modo che i blocchi non siano visibili su più dispositivi. Ad esempio, puoi applicare le classi .hidden-xs e .hidden-md a un blocco su una pagina Web per rendere il blocco invisibile su dispositivi con schermo da molto piccolo a medio.
<p class="visible-xs-block"> Questo paragrafo sarà visibile solo su smartphone.p > <classe p = "blocco-sm-visibile" > Questo paragrafo sarà visibile solo sui tablet.p > <p class="blocco-md-visibile"> Questo paragrafo sarà visibile solo su dispositivi con schermo di medie dimensioni.p > <p class="blocco-lg-visibile"> Questo paragrafo sarà visibile solo su dispositivi con schermo grande.p >Simile alle normali classi responsive di Twitter Bootstrap 3, le seguenti classi di utilità possono essere utilizzate per mostrare o nascondere blocchi specifici durante la stampa di pagine Web.
Cosa imparerai in questa lezione? In questo tutorial, sarai in grado di creare il tuo primo sito wireframe (modello) utilizzando la griglia Bootstrap.
La griglia Bootstrap è composta da Altoparlanti e linee. Per facilitare la comprensione della creazione della griglia, divideremo condizionatamente il lavoro in due fasi.
Fase 1 - creazione di linee.
La creazione di una griglia deve iniziare con la creazione delle righe. Per creare una riga, devi scrivere un tag div con la classe "row" . "riga" dall'inglese. significa stringa. Può esserci un numero illimitato di righe, ma quando si crea ogni nuova riga, al tag div deve essere assegnata la classe “riga”.
Fase 2: lavorare con le colonne.
La griglia Bootstrap è composta da 12 colonne, tutte le colonne hanno la stessa larghezza.
Le colonne possono essere unite in più pezzi e posizionate nella posizione desiderata.
Per unire (combinare) le colonne, devi specificare la classe "col-md- * » , dove * è un numero corrispondente al numero di colonne che colleghiamo.
Importante! Quando si collegano le colonne, il loro numero totale deve essere sempre uguale a 12.
1a riga: tutte le 12 colonne che compongono la griglia;
2a riga: supponiamo di volere una colonna larga due colonne standard. Abbiamo unito due colonne, ma il numero totale di colonne è ancora 12.
7a riga: in questo caso, dovevamo dividere la griglia in tre colonne uguali, per questo abbiamo unito 4 colonne tre volte, che è 12 in totale.
Quindi, indipendentemente da come dividi le colonne, la somma totale delle colonne aggiunte dovrebbe essere 12.
E ora tradurrò il layout della griglia di Bootstrap in codice:
Se ancora non capisci nulla, cercherò di spiegarlo in questo modo.
Hai bisogno di un sito web a 2 colonne. Barra del sito a sinistra, contenuto a destra.
Sai già che la griglia in Bootstrap è composta da 12 colonne.
Stiamo cercando di unire 4 colonne in una.
1 colonna + 1 colonna + 1 colonna + 1 colonna = 4 colonne
Quindi, per la barra del sito, la classe "col-md-" sarà simile a questa: "col-md-4".
12 (colonne) - 4 (colonne che abbiamo unito) = 8 (colonne a sinistra).
Quindi, per il contenuto, la classe "col-md-" sarebbe simile a questa: "col-md-8"
Ecco come appare codice comune:
Bootstrap ha la capacità di scrivere diversi stili CSS o dividere le celle in modo diverso per gruppi di dispositivi.
Ad esempio, voglio che l'intestazione del mio sito su 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 l'idea?
Guarda per quali classi puoi usare vari gruppi dispositivi e quali caratteristiche ha ogni classe.
Tabella di layout Bootstrap per diversi gruppi di dispositivi
| Dispositivo molto piccolo telefoni (<768px) |
Piccoli dispositivi Compresse (≥768px) |
Dispositivi medi Desktop (≥992px) |
Dispositivi di grandi dimensioni Desktop (≥1200px) |
|
| Larghezza contenitore | No (automatico) | 750px | 970px | 1170px |
| Classe di prefisso | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Altoparlanti | 12 | |||
| Larghezza della colonna | Auto | 60px | 78px | 95px |
Vediamo come apparirà nel codice:
Infine:
- per i dispositivi di grandi dimensioni (≥1200px) sullo schermo saranno presenti due righe a larghezza intera (si applica la classe "col-lg-12"):
Con dispositivi medi (≥992px) ci saranno due colonne sullo schermo (si applicano la classe "col-md-8" e la classe "col-md-4"):
Sui dispositivi piccoli (≥768px) ci saranno due colonne sullo schermo con la stessa larghezza (si applica la classe "col-sm-6"):
Per dispositivi molto piccoli<768px) будут на экране две колонки на всю ширину (действует класс «col-xs-12» ):
Penso che tu abbia capito proprio qui!
Passiamo alla pratica.
Diciamo che ho questo schizzo del sito:
Per creare questo layout, devi solo utilizzare la conoscenza della lezione di oggi. Ecco come ho risolto questo problema:
Puoi vedere il risultato. Se lo desideri, puoi modificare le dimensioni dello schermo o aprire la pagina dei risultati tramite gruppi diversi dispositivi.
Ciao, cari lettori del sito del blog. Nella prima parte dell'articolo su abbiamo familiarizzato con le capacità di questo framework, abbiamo appreso cos'è il responsive design e perché è così importante nella nostra era di crescita sfrenata nella popolarità di vari gadget mobili. Lì abbiamo anche considerato in dettaglio i problemi di 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 questo sarà spiegato con esempi che, spero, miglioreranno la percezione.
Bootstrap 3 viene fornito in bundle con sistema a griglia a dodici colonne, progettato principalmente per dispositivi mobili. Quelli. è progettato con un occhio prima di tutto su piccoli display, in secondo luogo - su schermi larghi. A nuova versione Questo framework ha quattro dimensioni della griglia. Tutte queste informazioni possono essere studiate nel dettaglio sul sito ufficiale GetBootstrap.com andando nella scheda "CSS" dal menu in alto e selezionando la voce "Sistema griglia" in quello di destra.
Lì otterrai una spiegazione completa di come funziona il sistema, le relative query multimediali e così via. Quella serie di elementi HTML (ad esempio annunci di articoli su pagina iniziale) che vuoi posizionare nella griglia, dovrai circondarlo con un contenitore (ad esempio racchiuderlo in tag Div) e scrivere una classe .row per 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 vuoi ottenere come risultato tre colonne di dimensioni uguali, devi dividere 12 (la dimensione della griglia in Bootstrap 3) per 3 (il numero richiesto di colonne). Ciò significa che per ogni elemento Html all'interno della riga (di nuovo, questi possono essere contenitori Div), dovrai registrare le stesse classi -
Un po' più in basso nell'area "Opzioni griglia" troverai una spiegazione di quanto sopra quattro dimensioni di maglia stivali moderni.
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. Sulla pagina del sito ufficiale GetBootstrap.com, che stiamo attualmente recensendo, ci sono esempi e spiegazioni in merito. Tuttavia, secondo me, tutto è un po' confuso e complicato.
Proverò a spiegare tutto questo esempio finito. Devi solo copiare il file setka.html(per farlo, seleziona la voce "Salva per collegamento con nome..." dal menu contestuale). 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? Ti spiego ora.
La risoluzione dello schermo del mio monitor è 1280 pixel di larghezza, che è più del punto di interruzione di 1200 pixel impostato per la griglia grande. Cosa vediamo di conseguenza? Qualcosa come questa immagine:
Ecco cinque esempi di layout di siti Web basati su tipi diversi griglie:
In questo modo possiamo vedere e confrontare come queste griglie dell'arsenale Bootstrap 3 lavorano 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 per tutta la larghezza dello schermo).
Ora restringiamo un po' 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 classi di visibilità, di cui parleremo più avanti). La griglia centrale è ora utilizzata e viene ancora visualizzata orizzontalmente. Allo stesso tempo, la riga inferiore (che illustra l'uso di only maglia grossa) piegato verticalmente, cioè i blocchi vicini ora vengono visualizzati non 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: si impila 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 di griglia centrale ( grande sistema non ha più effetto).
Riduciamo ancora una volta la dimensione 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. Ebbene, 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 , da “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 scorrono verticalmente sulla pagina, ma anche quella piccola si è unita ad esse. 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-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ù avanti. Ma per ora, voglio attirare la tua attenzione solo su alcune delle sfumature che puoi notare nel codice sorgente del file setka.html.
Gli stili per la progettazione visiva dei layout (rientri, colori della griglia, ecc.) Vengono aggiunti in alto con l'aiuto, che non portano un carico semantico speciale. Se scorri verso il basso il codice sorgente, noterai questo blocco:
Ci sono quattro container per i quali sono assegnate classi diverse (leggi di più). 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 si guarda il codice sorgente), ma viene visualizzato solo un titolo a seconda della risoluzione dello schermo corrente o delle dimensioni della finestra del browser.
esso griglia principale, dove sono combinati tutti e quattro i sistemi di griglia (puoi vederlo da 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, viene 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 della griglia ultra-piccola 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, ovvero orizzontalmente, tutto lo spazio disponibile per il layout è suddiviso in dodici colonne di uguale larghezza(non visibile sul sito - sono come le celle nei quaderni di scuola).
Bene, con l'aiuto dei numeri dopo i prefissi delle classi, imposti semplicemente le proporzioni per ciascuna delle celle (colonne reali) del tuo layout. Quelli. le proporzioni possono essere, ad esempio:
In genere, è possibile utilizzare uno, due, tre o tutti e quattro i sistemi a griglia in un layout (linea). Tutto dipende dalle tue preferenze di design e da cosa stai cercando di ottenere dalla tua pagina web (come dovrebbe apparire su schermi di diverse dimensioni). Il sito ufficiale fornisce un esempio:
Ora, per una migliore comprensione, creiamo una pagina HTML che ricordi in qualche modo pagina web reale(con un'intestazione, contenuto di testo e immagine e un piè di pagina) e disporlo utilizzando il sistema di griglia Bootstrap 3.
Più precisamente creerò io stesso il blank 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 che in seguito tu possa aggiungere insieme le classi bootstrap necessarie a questo "pesce". 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 simulare aspetto esteriore pagina web media. Sì, avrai bisogno anche di una cartella con le immagini utilizzate in questa pagina. Puoi scaricarlo da qui - img.zip. Decomprimi semplicemente l'archivio e posiziona la cartella img (assicurati 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 della 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.
Nel codice Html sorgente del file sait.html, mostravo i limiti delle righe (linee) che intendo, per le quali personalizzeremo la visualizzazione delle colonne utilizzando una sorta di sistemi 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 consiste in 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, basterà racchiudere tutto il suo contenuto in un contenitore (il più delle volte si tratta di tag Div, anche se potrebbero essercene altri) e scrivervi una classe classe="riga". Per la prima riga apparirà così:
Lo stesso deve essere fatto per tutte le altre righe (linee) - inserisci il tag di apertura
Ora facciamo formiamo 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? Vediamo.
Quindi, in Bootstrap 3 c'è una griglia a 12 colonne, di cui abbiamo parlato sopra. Dal momento che 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 un compromesso. In questo caso, dovrai aggiungere la classe "col-md-3" ai contenitori di tutte e quattro le celle -
Dopo aver salvato le modifiche apportate, vedrai che la nostra pagina web ha già acquisito un aspetto molto più fruibile:
È vero, quando la finestra del browser viene ridotta a una larghezza di un punto di interruzione più piccolo (nel caso della griglia media che utilizziamo, questo sarà 992 pixel), tutti gli annunci si allineeranno nuovamente in una colonna, il che non va bene, perché l'usabilità in questo caso diminuisce (una risoluzione di quasi 1000 pixel consente di disporre le informazioni in modo più denso). Per rimediare a questa situazione, puoi aggiungi un'altra griglia dall'arsenale di Bootstrap per le stesse celle di annuncio. Come farlo? Vediamo.
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 i numeri dopo i prefissi di una griglia in tutte le celle dovrebbero sommarsi a 12. Abbiamo ottenuto 24 (quattro per sei). Ma l'abbiamo fatto apposta per ottenere il risultato desiderato: invece di quattro, otteniamo due colonne quando si supera il punto di interruzione per il sistema di griglia Bootstrap medio (è 992 pixel). Quelli. le celle saranno posizionate su due righe, due in ciascuna:
Perché Se scegliamo un sistema a griglia ultra piccolo, 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 si verificherà, perché 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, vedrai uno scrap, in cui due colonne con annunci vengono convertite in una. Basta sperimentare e sentire la differenza.
Proviamo e riproviamo, in cui ci sono essenzialmente due potenziali celle: il nome del sito con una descrizione e un logo. In realtà, li posizioniamo. Usiamo una griglia più grande questa volta con "col-lg-6" per ottenere due colonne uguali.
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 scrapping si verifica a risoluzioni dello schermo piuttosto grandi (le finestre del browser, nel nostro caso, perché simuliamo dispositivi con larghezze dello schermo diverse lì). Successivamente, le celle vengono piegate verticalmente. Per evitare ciò, noi aggiungiamone un altro Griglia Bootstrap 3 per la prima riga. Penso che un piccolo sistema a griglia (prefisso di classe col-sm) andrà bene. Quindi il codice sarà simile a questo:
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 celle con il nome del sito e il logo uguali 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 allocare loro celle uguali. Ecco perché ho creato la prima colonna con il nome e la descrizione del sito quando il sistema Bootstrap small grid è attivato il doppio della colonna del logo.
Di conseguenza, quando la finestra del browser viene ridotta, queste celle convergeranno fino al momento dell'interruzione per il piccolo sistema di griglia Bootstrap, che si verifica a una larghezza inferiore a 768 pixel, quindi entrambe le celle si troveranno l'una sotto l'altra.
Potresti aver notato che il testo sulla pagina si blocca sul bordo sinistro dello schermo, causando . Puoi aggiungere per risolvere questa situazione nel tag del corpo, che lo consentirà. E tutto può essere risolto mezzi standard Bootstrap 3.
Per fare ciò, dovrai avvolgere l'intero contenuto della pagina web (tutto ciò che è racchiuso nei tag Body) in un contenitore Div con la classe omonima - Puoi anche vedere che le immagini di anteprima si sovrappongono quando la larghezza dello schermo diminuisce. Il fatto è che sono ancora “insensibili”, ma lo faremo nei prossimi articoli di questa sezione. E inoltre continueremo ad analizzare il lavoro con il sistema a griglia Bootstrap 3, imparare a progettare pulsanti, tabelle, moduli Html, creare menu a discesa, navigazione e molto altro. Pertanto, non cambiare e resta sintonizzato per nuove pubblicazioni. Continua >>> (Puoi iscriverti alla newsletter per non perderla) Ed ecco la continuazione: (ma ti iscrivi comunque - ci saranno molte altre cose interessanti e utili).
. Quelli. inserisci questo tag subito dopo il tag Body di apertura e chiudilo prima di chiamare gli script che si trovano immediatamente prima del tag Body di chiusura. Dopodiché, il testo non riposerà più sulla finestra del browser.
