Sistema di griglia

Aduprate a nostra putente griglia flexbox mobile-first per custruisce layout di tutte e forme è dimensioni grazie à un sistema di dodici colonne, sei livelli di risposta predefiniti, variabili Sass è mixin, è decine di classi predefinite.

In sta pagina

Esempiu

U sistema di griglia di Bootstrap usa una seria di cuntenituri, fila è colonne per mette è allineà u cuntenutu. Hè custruitu cù flexbox è hè cumplettamente reattivu. Quì sottu hè un esempiu è una spiegazione approfondita di cumu si riunisce u sistema di griglia.

Novu o micca familiarizatu cù flexbox? Leghjite sta guida CSS Tricks flexbox per sfondate, terminologia, linee guida è frammenti di codice.

Colonna

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

L'esempiu di sopra crea trè culonni di larghezza uguale in tutti i dispositi è i vetri cù e nostre classi di griglia predefinite. Quelli culonni sò centrati in a pagina cù u parent .container.

Cumu funziona

Scomponendu, eccu cumu si riunisce u sistema di griglia:

A nostra griglia supporta sei breakpoints responsive . I punti d' interruzzione sò basati nantu à min-widthe dumande di media, vale à dì chì affettanu quellu puntu d'interruzzione è tutti quelli chì sò sopra (per esempiu, .col-sm-4si applica à sm, md, lg, xl, è xxl). Questu significa chì pudete cuntrullà a dimensione è u cumpurtamentu di u containeru è di a colonna per ogni puntu di rottura.
Contenituri centru è pad orizzontalmente u vostru cuntenutu. Aduprate .containerper una larghezza di pixel responsive, .container-fluidper width: 100%tutti i vetri è i dispositi, o un containeru responsive (per esempiu, .container-md) per una cumminazione di larghezza di fluidu è pixel.
E fila sò wrappers per e colonne. Ogni culonna hà horizontale padding(chjamatu gutter) per cuntrullà u spaziu trà elli. Questu paddinghè allora contru à e fila cù marghjini negativi per assicurà chì u cuntenutu in i vostri culonni hè visualmente allinatu à u latu manca. E fila supportanu ancu e classi di modificatori per applicà uniformemente a dimensione di a colonna è e classi di gutter per cambià a spaziatura di u vostru cuntenutu.
I culonni sò incredibbilmente flessibili. Ci hè 12 colonne di mudelli dispunibuli per fila, chì vi permettenu di creà diverse cumminazzioni di elementi chì spannu ogni numeru di colonne. E classi di colonna indicanu u numeru di colonne di mudellu per span (per esempiu, col-4spans four). widths sò stabiliti in percentuali cusì avete sempre a stessa dimensione relative.
I gutters sò ancu responsivi è persunalizabili. E classi di gutter sò dispunibuli in tutti i punti di rottura, cù tutte e stesse dimensioni cum'è u nostru margine è spaziatura di imbottitura . Cambià i canali orizontali cù .gx-*classi, i canali verticali cù .gy-*, o tutti i canali cù .g-*classi. .g-0hè ancu dispunibule per caccià i canali.
Variabili Sass, mape è mixins alimentanu a griglia. Se ùn vulete micca aduprà e classi di griglia predefinite in Bootstrap, pudete aduprà a nostra fonte di griglia Sass per creà u vostru propiu cù più marcatu semanticu. Includemu ancu alcune proprietà persunalizate CSS per cunsumà queste variabili Sass per una flessibilità ancu più grande per voi.

Siate cuscenti di e limitazioni è di i bug intornu à flexbox , cum'è l' incapacità di utilizà certi elementi HTML cum'è contenitori flex .

Opzioni di griglia

U sistema di griglia di Bootstrap pò adattà in tutti i sei punti di rottura predeterminati, è qualsiasi punti di rottura chì persunalizà. I sei livelli di griglia predeterminati sò i seguenti:

Extra picculu (xs)
Picculu (sm)
Mediu (md)
Grande (lg)
Extra large (xl)
Extra extra large (xxl)

Comu nutatu sopra, ognunu di sti punti di rottura hà u so propiu containeru, un prefissu di classi unicu è i modificatori. Eccu cumu a griglia cambia in questi punti di rottura:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container`max-width`	Nisunu (auto)	540 px	720 px	960 px	1140 px	1320 px
Prefissu di classa	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# di culonni	12
Larghezza di gutter	1.5rem (.75rem à manca è à diritta)
Gouttières sur mesure	Iè
Nestabile	Iè
Ordine di a colonna	Iè

Colonne di layout autumàticu

Aduprate classi di colonna specifiche di breakpoint per un dimensionamentu di colonna faciule senza una classa numerata esplicita cum'è .col-sm-6.

Uguali larghezza

Per esempiu, quì sò dui layout di griglia chì s'applicanu à ogni dispusitivu è viewport, da xsà xxl. Aghjunghjite ogni numeru di classi senza unità per ogni breakpoint chì avete bisognu è ogni colonna serà a stessa larghezza.

1 di 2

2 di 2

1 di 3

2 di 3

3 di 3

<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>

Stabbilimentu di una larghezza di una colonna

L'auto-disposizione per e colonne di griglia di flexbox significa ancu chì pudete stabilisce a larghezza di una colonna è avè e culonne di i fratelli ridimensionate automaticamente intornu. Pudete utilizà classi di griglia predefinite (cum'è mostratu quì sottu), mixins di griglia, o larghezze in linea. Innota chì l'altri culonni resizeranu ùn importa micca a larghezza di a colonna centrale.

1 di 3

2 di 3 (più largu)

3 di 3

1 di 3

2 di 3 (più largu)

3 di 3

<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>

Cuntenutu di larghezza variabile

Aduprate col-{breakpoint}-autoclassi per dimensionà e colonne basatu nantu à a larghezza naturale di u so cuntenutu.

1 di 3

Cuntenutu di larghezza variabile

3 di 3

1 di 3

Cuntenutu di larghezza variabile

3 di 3

<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 responsive

A griglia di Bootstrap include sei livelli di classi predefinite per a creazione di layout responsivi cumplessi. Personalizà a dimensione di e vostre culonne nantu à i dispositi extra chjuchi, chjuchi, medii, grandi, o extra-grandi cumu vedete adattatu.

Tutti i punti di rottura

Per e griglie chì sò listessi da u più chjucu di i dispositi à u più grande, utilizate .cole .col-*classi. Specificate una classa numerata quandu avete bisognu di una colonna particularmente grande; altrimenti, sentite liberu di attaccà à .col.

col

col-8

col-4

<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>

Stacked à l'orizontale

Utilizendu un unicu inseme di .col-sm-*classi, pudete creà un sistema di griglia basica chì principia in stack è diventa horizontale à u picculu breakpoint ( sm).

col-sm-8

col-sm-4

col-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>

Imbulighjate è abbinate

Ùn vogliu micca chì e vostre colonne si impilate solu in certi livelli di griglia? Aduprate una cumminazione di diverse classi per ogni livellu quantu necessariu. Vede l'esempiu quì sottu per una idea megliu di cumu tuttu funziona.

.col-md-8

.col-6 .col-md-4

.col-6

<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 fila

Aduprate e .row-cols-*classi responsive per stabilisce rapidamente u nùmeru di colonne chì rende megliu u vostru cuntenutu è u layout. Mentre chì e .col-*classi normali s'applicanu à e colonne individuali (per esempiu, .col-md-4), e classi di e colonne di fila sò stabilite nantu à u genitore .rowcum'è predefinitu per e colonne cuntenute. Cù .row-cols-autopudete dà i culonni a so larghezza naturali.

Aduprate queste classi di colonne di fila per creà rapidamente layout di griglia basi o per cuntrullà i vostri layout di carte è annullà quandu hè necessariu à u livellu di a colonna.

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>

Colonna

<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>

Colonna

<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>

Colonna

<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>

Colonna

<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>

Colonna

<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>

Colonna

<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>

Pudete ancu aduprà u Sass mixin accumpagnatu, 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 nidificà u vostru cuntenutu cù a griglia predeterminata, aghjunghje un novu .rowè un set di .col-sm-*colonne in una colonna esistente .col-sm-*. E fila nidificate duveranu include un inseme di colonne chì aghjunghjenu à 12 o menu (ùn hè micca necessariu chì utilizate tutte e 12 colonne dispunibuli).

Livellu 1 : .col-sm-3

Livellu 2: .col-8 .col-sm-6

Livellu 2: .col-4 .col-sm-6

<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

Quandu aduprate i schedarii Sass sorgenti di Bootstrap, avete l'opzione di utilizà variabili Sass è mixins per creà layout di pagina persunalizati, semantici è responsivi. E nostre classi di griglia predefinite utilizanu sti stessi variabili è mixin per furnisce una suite intera di classi pronte per l'usu per layout di rispunsibilità rapida.

Variabili

Variabili è carte determinanu u numeru di colonne, a larghezza di u canale, è u puntu di dumanda media à quale principià e colonne flottanti. Utilizemu questi per generà e classi di griglia predefinite documentate sopra, è ancu per i mixins persunalizati elencati quì sottu.

$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
);

Mixins

I mixins sò usati in cunghjunzione cù e variàbili di griglia per generà CSS semanticu per e colonne di griglia individuali.

// 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);

Esempiu di usu

Pudete mudificà e variàbili à i vostri valori persunalizati, o solu aduprà i mixins cù i so valori predeterminati. Eccu un esempiu di usu di i paràmetri predeterminati per creà un layout di dui culonne cù un spaziu trà.

.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);
  }
}

Cuntinutu principali

Cuntinutu secundariu

<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>

Personalizà a griglia

Utilizendu e nostre variabili è carte Sass di griglia integrata, hè pussibule persunalizà cumplettamente e classi di griglia predefinite. Cambia u nùmeru di livelli, e dimensioni di a dumanda di media, è a larghezza di u containeru, dopu ricompilate.

Culonni è gronde

U numaru di culonni di griglia pò esse mudificatu via variàbili Sass. $grid-columnshè utilizatu per generà l'larghezza (in per centu) di ogni colonna individuali mentre $grid-gutter-widthstabilisce a larghezza per i canali di colonna.

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

Livelli di griglia

Trascendendu oltre e colonne stesse, pudete ancu persunalizà u numeru di livelli di griglia. Se vulete solu quattru livelli di griglia, aghjurnà u $grid-breakpointsè $container-max-widthsà qualcosa cum'è questu:

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

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

Quandu fate qualsiasi cambiamenti à e variabili Sass o carte, avete bisognu di salvà i vostri cambiamenti è recompilà. Facendu cusì, pruducerà un novu set di classi di griglia predefinite per larghezza di colonna, offsets è ordine. L'utilità di visibilità responsive seranu ancu aghjurnate per utilizà i punti di rottura persunalizati. Assicuratevi di stabilisce i valori di griglia in px(micca rem, emo %).