Ultimo aggiornamento: 31.10.2015
In usando Bootstrapè molto comodo posizionare l'interfaccia come una tabella o una griglia usando righe e colonne. Quindi, se osserviamo nel browser la visualizzazione standard di Index.cshtml, che viene fornita per impostazione predefinita, vedremo un posizionamento simile: gli elementi sotto l'intestazione sono disposti in una sorta di tre colonne e formano una riga:
Se apriamo il codice di visualizzazione, possiamo vedere l'uso delle classi bootstrap:
Iniziare
.............
Ottieni più librerie
.............
web hosting
.............
La classe row specifica la disposizione dei singoli blocchi come una singola riga. Una riga in Bootstrap può avere fino a 12 colonne. Può esserci un numero qualsiasi di righe, ma in questo caso abbiamo una riga.
La classe col-md-4 viene utilizzata per creare una colonna a riga singola. col , come suggerisce il nome, sta per una colonna.
Poi viene md - l'identificatore del dispositivo. Come abbiamo visto nell'argomento precedente, il bootstrap divide condizionalmente tutti i dispositivi in quattro gruppi a seconda della larghezza dello schermo. md in particolare è correlato ai dispositivi medi (ovvero quelli larghi 992 pixel e oltre). E il numero 4 indica quante unità convenzionali nella linea occuperà questo blocco. Pertanto, si scopre che la classe col-md-4 significa che questo blocco occuperà 4 unità convenzionali su 12 per riga, ovvero un terzo della larghezza dello schermo di un dispositivo con una larghezza dello schermo di 992 pixel o più.
E poiché abbiamo quattro gruppi, ogni gruppo ha le sue classi. Ad esempio, per dispositivi molto piccoli con uno schermo inferiore a 768 pixel (es. telefoni cellulari), una classe simile potrebbe essere col-xs-4 .
Tutti i tipi di classi:
col-xs-* : per dispositivi con una larghezza dello schermo inferiore a 768px
col-sm-* : per dispositivi con una larghezza dello schermo di 768 pixel o più
col-md-* : per dispositivi con una larghezza dello schermo di 992 pixel o più
col-lg-* : per dispositivi con una larghezza dello schermo di 1200 pixel o più
Anche se ancora acceso dispositivi mobili ah, un blocco con classe col-md-4 sembrerà abbastanza carino, ma possiamo impostare due classi contemporaneamente per perfezionare ulteriormente la visualizzazione su vari dispositivi, ad esempio:
E mentre nella visualizzazione predefinita Index.cshtml, tutte e tre le caselle hanno una larghezza relativa di 4 unità, per un totale di 12 unità, possiamo impostare qualsiasi altra larghezza, posizionandole come meglio credi. Per esempio:
Rientro
Le classi speciali col-md(sm|lg)-offset-* consentono di impostare l'offset relativo al blocco sinistro o all'inizio della riga in unità convenzionali. Ad esempio, abbiamo questa riga:
Blocco sinistro
................
blocco destro
................
La classe col-md-offset-4 sposterà il blocco destro di 4 unità arbitrarie a destra:
Alcuni esempi sull'utilizzo dell'offset:
Ordine delle colonne
Con l'aiuto delle classi col-md(sm|lg)-push-* e col-md(sm|lg)-pull-*, possiamo ridefinire l'ordine dei blocchi in una riga. Ad esempio, la classe col-md-push-4 spinge il blocco di quattro unità a destra della sua posizione attuale. Al contrario, la classe col-md-pull-4 sposta il blocco a sinistra della posizione corrente. Quindi, potremmo riscrivere l'esempio precedente con un offset come segue:
Blocco sinistro
................
blocco destro
................
E avremmo lo stesso effetto. Ma possiamo anche riordinare completamente l'ordine dei blocchi:
Blocco sinistro
................
blocco destro
................
Ora il blocco di destra si sposterà a sinistra di quattro unità e il blocco di sinistra si sposterà a destra di 8 unità:
Pertanto, utilizzando la classe di riga e le classi di colonna, possiamo impostare la disposizione generale degli elementi e l'adattabilità del bootstrap assicura che una tale griglia di elementi sembrerà abbastanza normale su qualsiasi dispositivo. Ora diamo un'occhiata ad alcuni dei componenti che Bootstrap ci offre.
La variabile !COL1 iMacros indica la selezione della prima colonna nella riga data e viene utilizzata durante la lettura dei dati. Cambia 1 in qualsiasi altro numero, a seconda della colonna che devi estrarre dal file. Anche se non sai quante colonne di colonne hai nel file, cioè i singoli dati si trovano su righe diverse, devi usare almeno!COL1.
Funziona in:
Invece di n, è possibile utilizzare qualsiasi numero intero, numero positivo maggiore di 0 e minore di! DATASOURCE_COLUMNS (numero di colonne nel file).
Impostare:
× Variabile interna
✓ Con il comando SET
"Variabile interna" significa che imposta il valore di questa variabile stessa durante l'esecuzione della macro. significa che l'utente può impostare questo valore con un comando durante la modifica del file .
Esempio:
Nell'esempio, il file example.csv contiene "Nome" nella prima colonna (recuperato utilizzando la variabile iMacros !COL1) e "Cognome" nella seconda colonna (!COL2). Sul sito, vogliamo inserire questi valori negli appositi campi.
IMPOSTARE! Esempio di SORGENTE DATI. csv IMPOSTARE! DATASOURCE_LINE ( ( ! LOOP ) ) URL GOTO=http: //www.some_input.com/enter_name.html TAG POS = 1 TIPO = INPUT : TESTO FORM = form1 ATTR = NOME : nome CONTENT = ( ( ! COL1 ) ) |
9 risposte
Aggiornato 2018...
Griglia Bootstrap 3 ha 4 livelli (o "punti di interruzione")...
- Molto piccolo (per smartphones.col-xs-*)
- Piccolo (per tablet.col-sm-*)
- Medio (per laptops.col-md-*)
- Grande (per laptop/desktops.col-lg-*).
Queste dimensioni della griglia consentono di controllare il comportamento della griglia su larghezze diverse. I diversi livelli sono guidati dalle richieste CSS.
Quindi, nella griglia a 12 colonne di Bootstrap...
col-sm-3 è largo 3 colonne su 12 (25%) su un tipico piccolo larghezza del dispositivo (> 768 pixel)
col-md-3 è largo 3 colonne su 12 (25%) alla larghezza tipica vettore(> 992 pixel)
Il livello più piccolo (xs , sm o md) determina anche la dimensione per la larghezza dello schermo maggiore. Quindi, per una colonna della stessa dimensione su tutti i livelli, imposta la larghezza sulla finestra più piccola...
implicito livelli maggiori . Perché col-sm-3 significa 3 unità su sm-and-up , a meno che non venga sovrascritto da un livello più grande che utilizza una dimensione diversa.
xs (predefinito) > sovrascritto da sm > sovrascritto da md > sovrascritto da lg
Combina le classi per utilizzare la larghezza delle colonne di modifica per dimensioni della griglia diverse. Questo crea un layout reattivo.
Le griglie sm , md e lg si "impileranno" verticalmente su schermi/finestre di dimensioni inferiori a 768px. Qui è dove viene posizionata la griglia xs. Le colonne che utilizzano col-xs-* non verranno impilate verticalmente e si ridurranno sugli schermi più piccoli.
Ridimensiona il tuo browser usando questa demo e vedrai gli effetti di zoom della griglia.
A Bootstrap 4 c'è una nuova dimensione -xl-, guarda questa demo. Anche -xs-infix è stato rimosso, quindi le colonne più piccole sono solo col-1 , col-2 .. col-12 , ecc.
col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
Inoltre, questo articolo spiega di più sulla griglia Bootstrap
Penso che l'aspetto confuso di questo sia che BootStrap 3 lo sia sistema mobile con un'elevata sensibilità e non può spiegare come influisca sulla gerarchia col-xx-n in quella parte della documentazione di Bootstrap. Questo ti fa chiedere cosa succede su dispositivi più piccoli se selezioni un valore per dispositivi più grandi e ti chiedi se è necessario specificare più valori. (Non lo fai)
Vorrei provare a chiarire questo affermando che... I tipi di grana più bassi (xs, sm) cercano di mantenere l'aspetto del layout su schermi più piccoli, mentre i tipi di grana più grandi (md, lg) verranno visualizzati correttamente solo su grandi schermi, ma avvolgerà le colonne su dispositivi più piccoli. I valori forniti negli esempi precedenti si riferiscono alla soglia alla quale l'unità di avvio degrada l'aspetto per corrispondere allo stato dello schermo disponibile.
In pratica, questo significa che se crei colonne col-xs-n, queste manterranno l'aspetto corretto anche su schermi molto piccoli, fino a quando la finestra non scende a una dimensione così restrittiva che la pagina non può essere visualizzata correttamente. significa che i dispositivi con una larghezza di 768px o inferiore dovrebbero mostrare la tabella come l'hai progettata, non in formato degradato (forma di colonna singola o compatta). Ovviamente dipende ancora dal contenuto delle colonne e da quale sia il punto. Se la pagina tenta di visualizzare più colonne di Big Data affiancate piccolo schermo, quindi le colonne risulteranno naturalmente orribili se non te ne rendi conto. Pertanto, a seconda dei dati nelle colonne, è possibile determinare il punto in cui il layout verrà utilizzato per visualizzare adeguatamente il contenuto.
Per esempio. Se la tua pagina contiene tre colonne col-sm-n, inseriranno le colonne in righe quando la larghezza della pagina scende al di sotto di 992px. Ciò significa che i dati sono ancora visibili, ma è necessario scorrimento verticale. Se non vuoi che il tuo layout si degradi, scegli xs (purché i tuoi dati possano essere adeguatamente visualizzati su un dispositivo con più Bassa risoluzione in tre colonne)
Se una posizione orizzontale i dati sono importanti, dovresti provare a scegliere di più valori bassi granularità per mantenere il carattere visivo. Se la posizione è meno importante, ma la pagina deve essere visibile su tutti i dispositivi, è necessario utilizzare un valore più alto.
Se scegli col-lg-n le colonne verranno visualizzate correttamente finché la larghezza dello schermo non scende al di sotto della soglia xs di 1200px.
Col-XY significa dimensioni dello schermo X e superiori, allunga questo elemento per riempire le colonne Y.
Bootstrap fornisce una griglia di 12 colonne su .row , quindi Y=3 significa larghezza=25%.
xs, sm, md, lg - dimensioni rispettivamente per smartphone, tablet, laptop, desktop.
Specificare diverse larghezze in punti su schermi di dimensioni diverse consente di far sembrare le cose più grandi su schermi più piccoli.
esempio
Valore: 50% di larghezza su desktop, 100% di larghezza su dispositivi mobili, tablet e laptop.
Ciao, cari lettori del sito del blog. Nella prima parte dell'articolo su abbiamo conosciuto le capacità di questo framework, abbiamo imparato cosa design reattivo e perché è così importante nella nostra era di crescita dilagante 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.
Come funziona il sistema a griglia in Bootstrap 3
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 in dettaglio sul sito ufficiale GetBootstrap.com andando nella scheda "CSS" da menu principale e selezionando la voce "Sistema griglia" sulla destra.
Lì riceverai spiegazione completa principi di funzionamento del sistema, relative media query, ecc. Quella serie di elementi HTML (ad esempio annunci di articoli su pagina iniziale) che si desidera posizionare sulla griglia dovrà essere circondato da un contenitore (es Tag Div) e scrivi il class.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). Quindi per tutti 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.
- Per prima cosa arriva una griglia molto piccola (nella colonna "Dispositivi extra piccoli") progettata per dispositivi mobili con una dimensione dello schermo inferiore a 768 pixel di larghezza (leggi il link sotto). Sarà sempre orizzontale a qualsiasi dimensione dello schermo e di cosa si tratta, cercherò di spiegare di seguito. Nota che il prefisso di classe per questo tipo di griglia sarà giusto col-xs, come nell'esempio sopra.
- Se la dimensione dello schermo del dispositivo è compresa tra 768 e 992 pixel (ora si tratta più spesso di tablet), la griglia Bootstrap, progettata per dispositivi di piccole dimensioni, è adatta a loro. Si chiama small e per specificarlo vengono utilizzati i prefissi di classe. col-sm.
- Per i dispositivi con una dimensione dello schermo maggiore di 992 ma inferiore a 1200 (principalmente monitor desktop o laptop), esiste una griglia per i dispositivi medi. Si chiama medium e ha un prefisso di classe col-md.
- Bene, 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 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.
Esempio di sistema a griglia Bootstrap 3 per diverse larghezze dello schermo
Proverò a spiegare tutto questo esempio finito. Devi solo copiare il file setka.html(per questo e seleziona da menù contestuale opzione "Salva collegamento come..."). 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:
- 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, lì 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) . Quando la larghezza dello schermo diminuisce, queste etichette cambieranno.
- 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 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: viene 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 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 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.
Spiegazioni al codice sorgente del nostro esempio
In alto con stili aggiunti per disegno visivo layout (rientri, colori della griglia, ecc.) che non portano un carico semantico speciale. Se scorri fonte in basso, noterai questo blocco:
lg Una griglia grossolana viene utilizzata per schermi più grandi di 1200px di larghezza.
md Utilizza una griglia media per schermi inferiori a 1200 ma superiori a 992px.
sm Usa una piccola griglia per schermi più piccoli di 992 ma più grandi di 768px.
xs Utilizza una griglia extra-piccola per dimensioni dello schermo inferiori a 768px, che rimane sempre orizzontale.
Ci sono quattro contenitori per i quali sono assegnati classi diverse(leggi su). Ti consentono di visualizzare contenuti specifici a seconda delle query multimediali corrispondenti. misure differenti griglie. 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:
Creazione di righe (righe) e celle con classi Bootstrap
Ora per la migliore comprensione creare Pagina HTML, in qualche modo ricorda 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 questo, seleziona la voce "Salva con nome ..." dal menu contestuale), in modo che in seguito possiamo aggiungere insieme a questo "pesce" classi obbligatorie bootstrap. 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.
Originale codice html Ho usato il file sait.html per mostrare i limiti delle righe (linee) che intendo, per le quali configureremo 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ì:
sito web
Lo stesso deve essere fatto per tutte le altre righe (linee) - inserisci il tag di apertura
Utilizzo di griglie diverse per creare colonne con contenuto con larghezze dello schermo diverse
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 maglia dall'arsenale di Bootstrap per le stesse caselle di annunci. 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):
Google AdWords - creazione di gruppi
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é Dato che abbiamo scelto un sistema a griglia ultra-piccolo, quindi con un'ulteriore diminuzione della larghezza della finestra del browser disposizione verticale i blocchi con annunci uno sotto l'altro (posizionamento in una colonna) non avverranno, 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":
Yandex Direct: le basi per creare una campagna
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.
Personalizzazione dell'intestazione di una pagina Web utilizzando Bootstrap 3
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.
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 grande, la rottamazione si verifica su un piuttosto risoluzioni elevate schermo (finestre del browser, nel nostro caso, perché lì stiamo simulando dispositivi con larghezze dello schermo diverse). Successivamente, le celle vengono piegate verticalmente. Per evitare ciò, noi aggiungi un'altra 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:
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 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. Pertanto, ho creato la prima colonna con il nome e la descrizione del sito quando il sistema a piccola griglia Bootstrap è stato attivato due volte più colonna con 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 continuano a “non rispondere”, ma lo faremo nei prossimi articoli di questa rubrica. E inoltre continueremo ad analizzare il lavoro con il sistema a griglia Bootstrap 3, impareremo come progettare pulsanti, tabelle, Moduli HTML, crea menu a discesa, navigazione e 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 ancora - ci saranno molte altre cose interessanti e utili). - [kɔl] n. m. 1080; lat. collum → cou I ♦ 1 ♦ Vx Cou. Mod. loc. Se hausser, se pousser du col: se faire valoir, prendre de grands airs. Elle s en croit. Il y a sa mère aussi, qui se pousse du col" (Sartre). 2 ♦ Partie étroite, rétrécie (d… … Encyclopédie Universelle col- portata col po; col po stat; col pot o mio; coltre; colore; col u bri na; col u bri nae; col lu lo; col um ba ceo; col um bar um; colonna; colonna di legno; colum bella la; colum bel li dae; colonna bifer ous; col u me la; col u mel lar;… …sillabe inglesi col- COL. S. m. La partie du corps qui joint la teste aux espaules, la pronuncia ordinaire dans la pluspart des phrases, c est Cou. lungo cou. gran co. grosco. le col corte. le cou, o le col tors. mal de cou, o mal au cou. mouchoir de col, tu... Dictionnaire de l'Académie française col- COL, coluri, s.n. (anat.) Parte mai îngustă, mai strâmtă a unui organ sau a unui os. – Dinfr. col. Trimis de Ioan Soleriu, 28/06/2004. Sursa: DEX 98 COL s. (anat.) coluterina = cervice; col vezical = cervice. Trimis de siveco, 08/05/2004. Sursa:… … Dicționar Roman Col- può riferirsi a: Contenuti 1 Cose 2 Luoghi 3 Lingue 4 Abbreviazioni 5 Gruppi ... Wikipedia col- COL. S. m. Voyez Cou, quant à la partie du corps qui joint la tête aux épaules.Col. S. m. Terme dont on sert dans différentes frasi par analogie à cette partie du corps humain dont on vient de parler. [b]f♛/b] Su appelle Le col de la vessie … Dictionnaire de l "Académie Française 1798 Col Dəllək- Comune…Wikipedia col-- → con col elemento, du lat. cum. V. co e com. ⇒COL(I) , COLO(N) , (COL , COLI , COLO , COLON), elemento préf. Premier elemento di composizione. corrispondente au sost. côlon et entrant dans la formazione de termes appartenant au domaine médical. A. Sur… … Enciclopedia universale col.-col. col. abbreviazione di colonna * * * col. UK US sostantivo [C] (plurale cols.) ABBREVIAZIONE SCRITTA per colonna: una riga verticale di parole o numeri: »Vedi Evening Advertiser, pagina 2, col. 1. "La tabella mostra l'occupazione dei laureati insieme ai... ... termini finanziari e commerciali col.-col. 〈Buchw.; Abc. für lat.〉 columna (Spalte) * * * col. = colonna (Spalte). * * * Col., Abkürzung für den Bundesstaat Colorado, USA. * * * col. = columna (Spalte) … Universal-Lexikon col- sustantivo femenino 1. Brassica oleracea. Pianta crucífera comestible, de tallo grueso, hojas anchas, flores pequeñas, blancas o amarillas que se cultiva en los huertos: Prepara las coles con patatas muy bien. Locuciones 1. col de Bruselas… … Diccionario Salamanca de la Lengua EspañolaLibri
