Sistema a griglia

Esempio

Il sistema a griglia di Bootstrap utilizza una serie di contenitori, righe e colonne per il layout e l'allineamento del contenuto. È costruito con flexbox ed è completamente reattivo. Di seguito è riportato un esempio e una spiegazione approfondita di come si integra il sistema a griglia.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

L'esempio precedente crea tre colonne di uguale larghezza su tutti i dispositivi e le finestre utilizzando le nostre classi di griglia predefinite. Tali colonne sono centrate nella pagina con il genitore .container.

Come funziona

Scomponendolo, ecco come si combina il sistema a griglia:

• La nostra griglia supporta sei punti di interruzione reattivi . I punti di interruzione si basano su min-widthquery multimediali, il che significa che influiscono su quel punto di interruzione e su tutti quelli al di sopra (ad esempio, .col-sm-4si applica a sm, md, lg, xle xxl). Ciò significa che puoi controllare il dimensionamento e il comportamento di contenitori e colonne in base a ciascun punto di interruzione.

• I contenitori si centrano e riempiono orizzontalmente il contenuto. Utilizzare .containerper una larghezza pixel reattiva, .container-fluidper width: 100%tutti i viewport e i dispositivi, o un contenitore reattivo (ad es. .container-md) per una combinazione di larghezze fluide e pixel.

• Le righe sono wrapper per le colonne. Ogni colonna ha un'orizzontale padding(chiamata grondaia) per controllare lo spazio tra di loro. Questo paddingviene quindi contrastato sulle righe con margini negativi per garantire che il contenuto delle colonne sia allineato visivamente sul lato sinistro. Le righe supportano anche le classi di modifica per applicare uniformemente il dimensionamento delle colonne e le classi di gronda per modificare la spaziatura del contenuto.

• Le colonne sono incredibilmente flessibili. Sono disponibili 12 colonne modello per riga, che consentono di creare diverse combinazioni di elementi che si estendono su un numero qualsiasi di colonne. Le classi di colonne indicano il numero di colonne del modello su cui occupare (ad esempio, col-4intervalli di quattro). widths sono impostati in percentuale in modo da avere sempre la stessa dimensione relativa.

• Anche le grondaie sono reattive e personalizzabili. Le classi di grondaia sono disponibili in tutti i punti di interruzione, con tutte le stesse dimensioni del nostro margine e spaziatura di riempimento . Cambia le grondaie orizzontali con .gx-*le classi, le grondaie verticali con .gy-*o tutte le grondaie con .g-*le classi. .g-0è disponibile anche per rimuovere le grondaie.

• Le variabili Sass, le mappe e i mixin alimentano la rete. Se non desideri utilizzare le classi di griglia predefinite in Bootstrap, puoi utilizzare il sorgente Sass della nostra griglia per crearne uno personalizzato con più markup semantico. Includiamo anche alcune proprietà personalizzate CSS per utilizzare queste variabili Sass per una flessibilità ancora maggiore per te.

Siate consapevoli delle limitazioni e dei bug di flexbox , come l' impossibilità di utilizzare alcuni elementi HTML come contenitori flessibili .

Opzioni griglia

Il sistema a griglia di Bootstrap può adattarsi a tutti e sei i punti di interruzione predefiniti ea tutti i punti di interruzione che personalizzi. I sei livelli di griglia predefiniti sono i seguenti:

• Extra piccolo (xs)
• Piccolo (sm)
• Medio (md)
• Grande (lg)
• Extra grande (xl)
• Extra extra large (xxl)

Come indicato in precedenza, ciascuno di questi punti di interruzione ha il proprio contenitore, un prefisso di classe univoco e modificatori. Ecco come cambia la griglia attraverso questi punti di interruzione:

Colonne con layout automatico

Utilizza classi di colonne specifiche del punto di interruzione per ridimensionare facilmente le colonne senza una classe numerata esplicita come .col-sm-6.

Uguale larghezza

Ad esempio, ecco due layout di griglia che si applicano a ogni dispositivo e finestra, da xsa xxl. Aggiungi un numero qualsiasi di classi senza unità per ogni punto di interruzione di cui hai bisogno e ogni colonna avrà la stessa larghezza.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Impostazione della larghezza di una colonna

Il layout automatico per le colonne della griglia flexbox significa anche che puoi impostare la larghezza di una colonna e fare in modo che le colonne di pari livello si ridimensionino automaticamente attorno ad essa. È possibile utilizzare classi di griglia predefinite (come mostrato di seguito), mixin di griglia o larghezze inline. Nota che le altre colonne verranno ridimensionate indipendentemente dalla larghezza della colonna centrale.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Contenuto a larghezza variabile

Usa col-{breakpoint}-autole classi per ridimensionare le colonne in base alla larghezza naturale del loro contenuto.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Classi reattive

La griglia di Bootstrap include sei livelli di classi predefinite per la creazione di layout reattivi complessi. Personalizza le dimensioni delle tue colonne su dispositivi extra piccoli, piccoli, medi, grandi o extra grandi come meglio credi.

Tutti i punti di interruzione

Per le griglie uguali dal dispositivo più piccolo al più grande, utilizzare le classi .cole . .col-*Specificare una classe numerata quando si necessita di una colonna di dimensioni particolari; in caso contrario, sentiti libero di attenersi a .col.

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

Impilato in orizzontale

Utilizzando un unico insieme di .col-sm-*classi, puoi creare un sistema a griglia di base che inizia impilato e diventa orizzontale al piccolo punto di interruzione ( sm).

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</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>

Mescolare e abbinare

Non vuoi che le tue colonne vengano semplicemente impilate in alcuni livelli della griglia? Usa una combinazione di classi diverse per ogni livello, se necessario. Vedi l'esempio qui sotto per un'idea migliore di come funziona.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Colonne di riga

Usa le .row-cols-*classi reattive per impostare rapidamente il numero di colonne che rendono al meglio il tuo contenuto e il tuo layout. Mentre le classi normali .col-*si applicano alle singole colonne (ad esempio, .col-md-4), le classi delle colonne di riga sono impostate sul genitore .rowcome impostazione predefinita per le colonne contenute. Con .row-cols-autopuoi dare alle colonne la loro larghezza naturale.

Usa queste classi di colonne di righe per creare rapidamente layout di griglia di base o per controllare i layout delle schede e sovrascriverli quando necessario a livello di colonna.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

Puoi anche usare il mixin Sass in accompagnamento, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Nidificazione

Per annidare i tuoi contenuti con la griglia predefinita, aggiungi un nuovo .rowe un insieme di colonne all'interno di una colonna .col-sm-*esistente . .col-sm-*Le righe nidificate devono includere un set di colonne che si sommano fino a 12 o meno (non è necessario utilizzare tutte le 12 colonne disponibili).

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

Quando si utilizzano i file Sass di origine di Bootstrap, è possibile utilizzare variabili e mixin Sass per creare layout di pagina personalizzati, semantici e reattivi. Le nostre classi di griglia predefinite utilizzano queste stesse variabili e mixin per fornire un'intera suite di classi pronte all'uso per layout veloci e reattivi.

Variabili

Le variabili e le mappe determinano il numero di colonne, la larghezza della grondaia e il punto di media query in cui iniziare le colonne mobili. Li usiamo per generare le classi di griglia predefinite documentate sopra, così come per i mixin personalizzati elencati di seguito.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Miscele

I mixin vengono utilizzati insieme alle variabili della griglia per generare CSS semantici per le singole colonne della griglia.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Esempio di utilizzo

Puoi modificare le variabili in base ai tuoi valori personalizzati o semplicemente utilizzare i mixin con i loro valori predefiniti. Ecco un esempio di utilizzo delle impostazioni predefinite per creare un layout a due colonne con uno spazio vuoto tra.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Personalizzazione della griglia

Utilizzando le nostre variabili e mappe Sass della griglia integrate, è possibile personalizzare completamente le classi di griglia predefinite. Modifica il numero di livelli, le dimensioni della query multimediale e le larghezze del contenitore, quindi ricompila.

Colonne e grondaie

Il numero delle colonne della griglia può essere modificato tramite le variabili Sass. $grid-columnsviene utilizzato per generare le larghezze (in percentuale) di ogni singola colonna mentre $grid-gutter-widthimposta la larghezza per le grondaie delle colonne.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

Livelli di griglia

Andando oltre le colonne stesse, puoi anche personalizzare il numero di livelli della griglia. Se volessi solo quattro livelli di griglia, aggiorneresti $grid-breakpointse $container-max-widthsa qualcosa del genere:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Quando apporti modifiche alle variabili o mappe Sass, dovrai salvare le modifiche e ricompilare. In questo modo verrà prodotto un nuovissimo set di classi di griglia predefinite per larghezze, offset e ordinamento delle colonne. Anche le utilità di visibilità reattive verranno aggiornate per utilizzare i punti di interruzione personalizzati. Assicurati di impostare i valori della griglia in px(non rem, emo %).