twitter-bootstrap
Sistema di griglia

introduzione

Osservazioni

Media Queries

Le query multimediali in Bootstrap ti consentono di spostare, mostrare e nascondere i contenuti in base alla dimensione della finestra. Le seguenti media query vengono utilizzate nei file LESS per creare i punti di interruzione delle chiavi nel sistema di griglia Bootstrap:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Occasionalmente questi vengono espansi per includere una larghezza massima per limitare i CSS a un insieme più ristretto di dispositivi:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Livelli griglia di bootstrap (punti di interruzione)

Oltre al concetto di unità di colonna , Bootstrap ha diversi punti di interruzione o dimensioni di griglia noti come livelli. La griglia Bootstrap 3 ha quattro (4) livelli per adattarsi alle diverse larghezze dello schermo (o della finestra). I livelli Bootstrap 3 sono xs , sm , md e lg . Le colonne della griglia di Bootstrap sono identificate da diverse col-{breakpoint}-{units} classi CSS.

Ogni livello della rete comprende una gamma progettata per adattarsi al meglio alle larghezze tipiche dello schermo del dispositivo, come quella dei desktop, dei laptop, dei tablet e degli smartphone.

Bootstrap utilizza query multimediali CSS per creare punti di interruzione reattivi che stabiliscono un limite per ciascuna dimensione della griglia. Queste dimensioni della griglia consentono di modificare il layout delle colonne per adattarsi al meglio a diverse larghezze e dispositivi dello schermo, l'essenza del design reattivo.

• col-xs-* - per le larghezze dello schermo più piccole come gli smartphone <768 px
• col-sm-* - per schermi di piccole dimensioni come smartphone e tablet> = 768 px
• col-md-* - per larghezze medie dello schermo come tablet e laptop> = 992 px
• col-lg-* - per larghezze dello schermo di grandi dimensioni come i desktop> = 1200 px

Riferimento: Grid System

Stessa larghezza della colonna per ogni dispositivo

Per creare una colonna che sia sempre il 50% della larghezza della vista (su tutti i dispositivi), puoi impostare col-*-6 per ogni livello.

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

Tuttavia, questo è markup extra non necessario, poiché col-xs-6 significa 6 unità su xs e su. Il livello più piccolo impostato (xs, sm o md) definisce anche la dimensione per le larghezze dello schermo più grandi. Per la colonna della stessa dimensione su tutti i livelli, basta impostare la larghezza per la vista più piccola.

Codice più breve:

<div class="col-xs-6">..</div>

Larghezza della colonna diversa per ciascun dispositivo (progettazione reattiva)

Le classi col-*-* possono essere combinate per controllare le larghezze delle colonne su diverse dimensioni della griglia.

Ad esempio, crea una colonna di larghezza del 50% a livello sm e una colonna di larghezza del 25% a livello md ...

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

Le griglie sm , md e lg verranno tutte "impilate" verticalmente con una larghezza di visualizzazione inferiore a 768 pixel. È qui che si inserisce la griglia xs . Le colonne che utilizzano le classi col-xs- * non si impilano verticalmente e continuano a ridimensionarsi sugli schermi più piccoli.

Bootstrap Rows & Columns

Il sistema di griglia di Bootstrap ha 12 unità note come colonne che possono essere utilizzate per impaginare il contenuto orizzontalmente attraverso il viewport.

Il motivo per una griglia di 12 unità (anziché 10, 16, ecc.) È che 12 si divide in modo uniforme in 6 (metà), 4 (quarti) e 3 (terzi). Ciò rende molto più semplice l'adattamento a una varietà di layout. Le colonne della griglia di Bootstrap sono identificate da diverse col-{breakpoint}-{units} classi CSS. Ulteriori informazioni sulla larghezza e sui punti di interruzione della vista (livelli AKA)

Ad esempio, col-md-3 rappresenta una colonna che occupa 3 delle 12 unità (o 25%) in una finestra di visualizzazione media ( md ). Per usare una larghezza di colonna nel tuo layout, usa semplicemente la colonna col-{breakpoint}-{units} appropriata nel tuo markup HTML.

<div class="col-{breakpoint}-{units}">

La larghezza della colonna è fluida (larghezza non fissa), quindi le colonne consumano una percentuale del loro contenitore.

Unità di colonna in Bootstrap 3

• col-*-1 : 1 di 12 (larghezza 8.33333333%)
• col-*-2 : 2 di 12 (16,66666667% di larghezza)
• col-*-3 : 3 di 12 (larghezza 25%)
• col-*-4 : 4 di 12 (33,3333333% di larghezza)
• col-*-5 : 5 di 12 (41,66666667% di larghezza)
• col-*-6 : 6 di 12 (larghezza 50%)
• col-*-7 : 7 di 12 (larghezza 58.33333333%)
• col-*-8 : 8 di 12 (66,66666667% di larghezza)
• col-*-9 : 9 di 12 (larghezza 75%)
• col-*-10 : 10 di 12 (83,33333333% di larghezza)
• col-*-11 : 11 di 12 (91,66666667% di larghezza)
• col-*-12 : 12 di 12 (larghezza 100%)

Demo - Le 12 unità di colonna di Bootstrap

La riga Bootstrap

La classe Bootstrap .row viene utilizzata per contenere le colonne. Le colonne devono essere sempre posizionate in righe e le righe devono essere sempre collocate all'interno di un contenitore ( container o container-fluid ). La riga utilizza margini negativi (-15px) per garantire una spaziatura corretta tra il contenuto della colonna e il bordo del browser. Le righe vengono utilizzate per raggruppare le colonne orizzontalmente.

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

Le colonne riempiranno il file .row orizzontalmente da sinistra a destra e si avvolgeranno in una nuova riga ogni 12 colonne. Pertanto, è possibile utilizzare .row s per creare interruzioni orizzontali oppure è possibile aggiungere più di 12 unità di colonna in un singolo elemento .row per disporre di colonne che si avvolgono (o impilano) verticalmente lungo il viewport.

Quando si utilizza il wrapping di colonne (più di 12 unità in un file .row ), è necessario utilizzare le risposte reattive (o le correzioni rapide) per assicurare anche il wrapping del contenuto di colonne irregolari. Questo è essenziale quando il contenuto delle colonne varia in altezza.

Altro su Bootstrap Grid Columns & Rows

Problemi di layout della griglia fluida Bootstrap 3?

Bootstrap 3 - riga nidificata posso aggiungere colonne a più di 12?

Riga di bootstrap e spiegazione del colle

Come funziona la griglia Bootstrap (media)

contenitori

Bootstrap richiede un elemento contenente per avvolgere il contenuto del sito e ospitare il nostro sistema di rete. Puoi scegliere uno dei due contenitori da utilizzare nei tuoi progetti.

Utilizzare la classe .container per un contenitore a larghezza fissa reattiva.

<div class="container">
  ...
</div>

Utilizzare .container-fluid classe del .container-fluid per un contenitore a larghezza intera, che copre l'intera larghezza della vista.

<div class="container-fluid">
  ...
</div>

Nota: i contenitori non sono nidificabili (non è possibile inserire un contenitore in un altro contenitore), a causa del padding e altro.

Colonne di compensazione

Queste classi aumentano il margine sinistro di una colonna per * colonne. Ad esempio, .col-md-offset-4 sposta .col-md-4 su quattro colonne.

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
  <div class="col-lg-5 col-lg-offset-1"></div>
  <div class="col-lg-5 col-lg-offset-1"></div>
</div>

Manipolazione dell'ordine delle colonne tramite push e pull

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

Questo cambia l'ordine delle colonne della griglia incorporate.

Sintassi: .col-md-push- * e .col-md-pull- *.

Di Più:
Manipolazione dell'ordine delle colonne usando col-lg-push e col-lg-pull in Twitter Bootstrap 3
Bootstrap 3: spingere / tirare le colonne solo su schermi di dimensioni più piccole
Ordinamento e impilamento colonne in Bootstrap 3