Qual è la differenza tra col-lg- *, col-md- * e col-sm- * in Bootstrap?

Qual è la differenza tra col-lg-*, col-md-*e col-sm-*twitter Bootstrap?

Aggiornato 2019 ...

La griglia Bootstrap 3 è disponibile in 4 livelli (o "punti di interruzione") ...

• Extra piccolo (per smartphone .col-xs-*)
• Piccolo (per compresse .col-sm-*)
• Medio (per laptop .col-md-*)
• Grande (per laptop / desktop .col-lg-*).

Queste dimensioni della griglia consentono di controllare il comportamento della griglia su diverse larghezze. I diversi livelli sono controllati da query multimediali CSS .

Quindi nella griglia a 12 colonne di Bootstrap ...

col-sm-3ha una larghezza di 3 su 12 colonne (25%) su una larghezza tipica di un dispositivo piccolo (> 768 pixel)

col-md-3ha una larghezza di 3 su 12 colonne (25%) su una larghezza media tipica del dispositivo (> 992 pixel)

Il livello più piccolo ( xs, smo md) definisce anche la dimensione per larghezze dello schermo più grandi . Quindi, per la stessa colonna di dimensioni su tutti i livelli, basta impostare la larghezza per la finestra più piccola ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> equivale a,

<div class="col-sm-3">..</div>

Livelli più grandi sono impliciti. Perché col-sm-3significa 3 units on sm-and-up, a meno che non venga sovrascritto specificamente da un livello più grande che utilizza dimensioni diverse.

xs(impostazione predefinita)> sovrascritto da sm> sovrascritto da md> sovrascritto dalg

Combina le classi per utilizzare la larghezza delle colonne di modifica su diverse dimensioni della griglia . Questo crea un layout reattivo.

<div class="col-md-3 col-sm-6">..</div>

I sm, mde lggriglie saranno tutti "stack" verticalmente su schermi / finestre meno di 768 pixel. È qui che si xsinserisce la griglia. Le colonne che usano le col-xs-*classi non si impilano verticalmente e continuano a ridimensionarsi sugli schermi più piccoli.

Ridimensiona il tuo browser usando questa demo e vedrai gli effetti di ridimensionamento della griglia.

Bootstrap 4

In Bootstrap 4 c'è una nuova -xl-dimensione, vedi questa demo . Anche l' -xs-infisso è stato rimosso , quindi le colonne più piccole sono semplicemente col-1, col-2.. col-12, ecc.

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Bootstrap 4 Grid Demo

Inoltre, Bootstrap 4 include nuove colonne di layout automatico . Questi hanno anche punti di interruzione sensibili ( col, col-sm, col-md, ecc ..), ma non hanno% larghezze definite. Pertanto, le colonne di layout automatico riempiono la stessa larghezza lungo la riga.

Questo articolo spiega di più sulla griglia Bootstrap

I documenti bootstrap lo spiegano, ma mi ci è voluto ancora un po 'per ottenerlo. Ha più senso quando me lo spiego in due modi:

Se pensi alle colonne che iniziano in orizzontale, puoi scegliere quando impilarle .

Ad esempio, se inizi con le colonne: ABC

Decidi tu quando dovrebbero essere così:

UN

B

C

Se si sceglie col-lg, le colonne verranno impilate quando la larghezza è <1200px.

Se scegli col-md, le colonne verranno impilate quando la larghezza è <992px.

Se si sceglie col-sm, le colonne verranno impilate quando la larghezza è <768px.

Se scegli col-xs, le colonne non verranno mai impilate.

D'altra parte, se pensi che le colonne inizino in pila, puoi scegliere in quale punto diventano orizzontali :

Se scegli col-sm, le colonne diventeranno orizzontali quando la larghezza è> = 768px.

Se scegli col-md, le colonne diventeranno orizzontali quando la larghezza è> = 992px.

Se scegli col-lg, le colonne diventeranno orizzontali quando la larghezza è> = 1200px.

Dalla documentazione Bootstrap di Twitter :

• piccola griglia (≥ 768px) = .col-sm-*,
• griglia media (≥ 992px) = .col-md-*,
• griglia grande (≥ 1200px) = .col-lg-*.

Penso che l'aspetto confuso di questo sia il fatto che BootStrap 3 è un primo sistema responsive mobile e non riesce a spiegare come ciò influisca sulla gerarchia col-xx-n in quella parte della documentazione Bootstrap. Questo ti fa chiedere cosa succede su dispositivi più piccoli se scegli un valore per dispositivi più grandi e ti fa chiederti se è necessario specificare più valori. (Non lo fai)

Vorrei tentare di chiarire questo affermando che ... I tipi di grana inferiore (xs, sm) tentano di mantenere l'aspetto del layout su schermi più piccoli e i tipi più grandi (md, lg) verranno visualizzati correttamente solo su schermi più grandi ma avvolgeranno le colonne su dispositivi più piccoli. I valori citati negli esempi precedenti si riferiscono alla soglia in cui bootstrap degrada l'aspetto per adattarsi alla proprietà dello schermo disponibile.

Ciò significa in pratica che se si creano colonne col-xs-n, esse mantengono l'aspetto corretto anche su schermi molto piccoli, fino a quando la finestra non scende a una dimensione talmente restrittiva che la pagina non può essere visualizzata correttamente. Ciò dovrebbe significare che i dispositivi che hanno una larghezza di 768 px o inferiore devono mostrare la tabella durante la progettazione anziché in forma di colonna ridotta o singola. Ovviamente questo dipende ancora dal contenuto delle colonne e questo è il punto. Se la pagina tenta di visualizzare più colonne di dati di grandi dimensioni, fianco a fianco su un piccolo schermo, le colonne si avvolgeranno naturalmente in modo orribile se non lo consideri. Pertanto, a seconda dei dati all'interno delle colonne, è possibile decidere il punto in cui il layout viene sacrificato per visualizzare adeguatamente il contenuto.

Ad esempio, se la tua pagina contiene tre colonne col-sm-n, bootstrap avvolge le colonne in righe quando la larghezza della pagina scende al di sotto di 992px. Ciò significa che i dati sono ancora visibili ma richiedono lo scorrimento verticale per visualizzarli. Se non vuoi che il tuo layout degrada, scegli xs (a condizione che i tuoi dati possano essere adeguatamente visualizzati su un dispositivo a bassa risoluzione in tre colonne)

Se la posizione orizzontale dei dati è importante, dovresti provare a scegliere valori di granularità inferiori per conservare la natura visiva. Se la posizione è meno importante ma la pagina deve essere visibile su tutti i dispositivi, è necessario utilizzare un valore più elevato.

Se scegli col-lg-n, le colonne verranno visualizzate correttamente fino a quando la larghezza dello schermo non scende al di sotto della soglia xs di 1200px.

Dimensioni dispositivo e prefisso classe:

• Dispositivi extra piccoli Telefoni (<768px) - .col-xs-
• Tablet per piccoli dispositivi (≥768px) - .col-sm-
• Dispositivi medi Desktop (≥992px) - .col-md-
• Desktop di dispositivi di grandi dimensioni (≥1200 px) - .col-lg-

Opzioni di griglia:

Riferimento: Grid System

TL; DR

.col-X-Ysignifica che dalla dimensione dello schermo X in su , allunga questo elemento per riempire le colonne Y. .

Bootstrap fornisce una griglia di 12 colonne per .row, quindi Y = 3 significa larghezza = 25%.

xs, sm, md, lg sono le dimensioni per smartphone, tablet, laptop, desktop rispettivamente.

Il punto di specificare larghezze diverse su schermi di dimensioni diverse è quello di consentire di ingrandire le cose su schermi più piccoli.

Esempio

<div class="col-lg-6 col-xs-12">

Significato: 50% di larghezza su desktop, 100% di larghezza su cellulare, tablet e laptop.

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

Un caso particolare: prima di imparare il sistema a griglia bootstrap, assicurati che lo zoom del browser sia impostato al 100% (cento per cento). Ad esempio: se la risoluzione dello schermo è (1600px x 900px) e lo zoom del browser è del 175%, gli elementi "bootstrap-ped" verranno impilati.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Chrome zoom 100%

Browser 100 percento - elementi posizionati in orizzontale

Chrome zoom 175%

Browser 175 percento - elementi impilati

Non compliciamo Bootstrap!

Notare come il col-sm occupa la larghezza del 100% (in altri termini si rompe in una nuova riga) sotto 576pxma col non lo fa. Puoi notare la larghezza attuale in alto al centro in gif.

Ecco che arriva il codice:

<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
        <div class="col-sm">col-sm</div>
    </div>
</div>

Bootstrap per impostazione predefinita allinea tutte le colonne (col) in una singola riga con uguale larghezza. In questo caso trecol occuperanno il 100% / 3 di larghezza ciascuno, qualunque sia la dimensione dello schermo. Lo puoi notare in gif.

E se volessimo eseguire il rendering di una sola colonna per riga, ovvero dare il 100% di larghezza a ciascuna colonna, ma solo per schermi più piccoli ? Ora arrivano le col-xxlezioni!

L'ho usato col-smperché volevo spezzare le colonne in righe separate sotto 576px. Queste 4 col-xxclassi sono fornite da Bootstrap per diversi dispositivi di visualizzazione come cellulari, tablet, laptop, monitor di grandi dimensioni ecc.

Quindi, col-smromperebbe sotto 576px, col-mdromperebbe sotto 768px, col-lgromperebbe sotto 992px e col-xlromperebbe sotto 1200px

Si noti che non esiste alcuna col-xsclasse in bootstrap 4.

Questo in sostanza riassume. Puoi tornare al lavoro.

Ma c'è dell'altro. Ora arriva la col-*e col-xx-*per personalizzare la larghezza.

Ricorda nell'esempio sopra che ho menzionato che colo col-xxprende la stessa larghezza di fila. Quindi, se vogliamo dare più larghezza a uno specifico col, possiamo farlo.

La riga Bootstrap è divisa in 12 parti, quindi nell'esempio sopra c'erano 3 col quindi ognuna prende 12/3 = 4 parti. Puoi considerare queste parti come un modo per misurare la larghezza.

Potremmo anche scriverlo in formato col-*cioè in col-4questo modo:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

E non avrebbe fatto alcuna differenza perché per impostazione predefinita bootstrap dà uguale larghezza a col (4 + 4 + 4 = 12).

E se volessimo dare 7 parti alla prima col, 3 parti alla seconda cole riposare 2 parti (12-7-3 = 2) alla terza col(7 + 3 + 2, quindi il totale è 12), possiamo semplicemente fare questo:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

e puoi personalizzare anche la larghezza delle col-xx-*classi.

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

Come appare nell'azione?

Cosa succede se la somma di colè maggiore di 12? Quindi colsi sposterà / regolerà alla riga inferiore. Sì, può esserci un numero qualsiasi di colonne per una riga!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

E se volessimo 3 colonne di fila per schermi di grandi dimensioni ma suddividiamo queste colonne in 2 file per schermi di piccole dimensioni?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

Puoi giocare qui: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Penso che questa immagine sia abbastanza buona per capire meglio il concetto!

per una maggiore comprensione dei dettagli, vai al link seguente:

https://getbootstrap.com/docs/3.4/css/

bene è usato per dire a bootstrap quante colonne devono essere posizionate in una riga a seconda delle dimensioni dello schermo-

col-xs-2

mostrerebbe solo 2 colonne di fila in uno schermo extra piccolo (xs), allo stesso modo in cui sm definisce uno schermo piccolo, md (medio), lg (grande), ma secondo la prima regola più piccola del bootstrap, se menzioni

xs-col-2 md-col-4

quindi vengono visualizzate 2 colonne in ogni riga per le dimensioni dello schermo da xs fino a sm (incluso) e cambia quando si ottiene la dimensione successiva, ad esempio per md fino a lg (incluso) per una migliore comprensione delle dimensioni dello schermo, provare a eseguirle in varie modalità dello schermo in modalità sviluppatore di Chrome (ctr + maiusc + i) e provare vari pixel o dispositivi