Quali sono le differenza tra col-lg e col-md in bootstrap3

Question

Quali sono le differenza tra col-lg, col-md, col-xs e col-sm sistema di griglia nella bootstrap 3.

In un modello di bootstrap hanno utilizzato <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6"></div> solo per una griglia di colonne. Sono un principiante in Bootstrap.

Answer 1

Quando si utilizza Bootstrap, queste sono le classi aggiunte per una griglia di colonne e corrispondono a dispositivi piccoli, piccoli, medi e grandi.

.col-XS = * Extra dispositivi di piccole dimensioni (ad esempio Cellulari) (< 768px)

.col-sm = dispositivi di piccole dimensioni (ad esempio compresse) (≥768px)

. = dispositivi di media col-mD (ad esempio computer portatili, desktop o piccoli) (≥992px)

.col-lg = dispositivi di grandi dimensioni (ad esempio Desktop) (≥1200px) *

In questo modo attraverso le query multimediali è possibile consentire di avere solo le classi corrette interpretate dal browser. Se si naviga su quel sito Web da un tablet, ad esempio, si vedrà che le proprietà css che sono effettivamente applicate nel browser sono solo quelle per la classe .col-sm.

UPDATE

Inoltre è importante ricordare che tali classi sono utilizzate su una griglia di 12 colonne in totale che è la configurazione del sistema di griglia utilizzato da Bootstrap.

Pertanto, quando si utilizza .col-sm-4 su un elemento, significa che l'elemento prenderà 4 colonne su 12 della larghezza totale. Che logicamente significa che se si utilizza .col-sm-4, allora solo 3 elementi per riga possono essere inseriti nella pagina sul tablet.

Per esempio, diciamo che vogliamo mostrare alcune schede di progetto per un portafoglio:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card"> 
    <div class="card-wrapper"> 
     <img src="img.jpg"> 
     <div class="overlay-text"> 
      <h5>Project 1</h5> 
      <div class="labels"> 
       <label>Tech Stack</label> 
       <h6>HTML5, CSS, JS</h6> 
      </div>  
     </div>   
    </div> 
</div> 

Utilizzando class="col-xs-12 col-sm-6 col-md-4 col-lg-3" tutti allo stesso tempo viene utilizzato per attivare diverse proprietà CSS su un elemento quando si visualizza la pagina in un dispositivo particolare.

In altri termini, se l'utente apre il sito su un desktop, col-lg-3 significa che verrà visualizzato un totale di 4 carte, quando col-md-4 means un totale di 3 carte, col-sm-6 un totale di 2 carte e poi col-xs-12 significa sul cellulare solo 1 carta con il 100% della larghezza della pagina.

Answer 2

Hanno aggiunto tutte quelle classi per una griglia di colonna in quel modello poiché quelle classi corrispondono a dispositivi di dimensioni extra piccole, piccole, medie e grandi.

.col-xs = *Extra small devices (ie Phones) (<768px) 

.col-sm = Small devices (ie Tablets) (≥768px) 

.col-md = Medium devices (ie laptops, or small desktops) (≥992px) 

.col-lg = Large devices (ie Desktops) (≥1200px)* 

Answer 3

Tutti questi tag, xs, sm, md e lg sono la parte del Bootstrap sistema di griglia.Il sistema di griglia di Bootstrap consente fino a 12 colonne sulla pagina. Il sistema di griglia di Bootstrap è reattivo e le colonne si riorganizzano a seconda delle dimensioni dello schermo: su un grande schermo potrebbe sembrare migliore con il contenuto organizzato in tre colonne, ma su uno schermo piccolo sarebbe meglio se gli elementi di contenuto fossero impilati uno sopra l'altro.

Suggerimento: ricordare che le colonne della griglia devono aggiungere fino a dodici per una riga. Inoltre, le colonne si impilano indipendentemente dal viewport.

Regole

Sistema griglia

Alcune Bootstrap regole di sistema griglia:

• Righe devono essere posizionati all'interno di un .container (larghezza fissa) o .container-fluid (full-larghezza) per il corretto allineamento e imbottitura
• Utilizzare le righe per creare gruppi orizzontali di colonne
• Il contenuto deve essere inserito colonne hin, e solo le colonne possono essere figli immediati di righe
• classi predefinite come .row e .col-sm-4 sono disponibili per realizzare rapidamente Layout griglia
• colonne creano grondaie (lacune fra contenuto colonna) tramite imbottitura. Tale riempimento è sfalsato in righe per la prima e l'ultima colonna tramite margine negativo su .rows
• Le colonne di griglia vengono create specificando il numero di 12 colonne disponibili che si desidera espandere. Per esempio, tre colonne uguali userebbero tre .col-sm-4

Consiglio di andare attraverso this link e ulteriori pagine collegate per una migliore comprensione.