Source

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, cinque livelli di risposta predefiniti, variabili Sass è mixin, è decine di classi predefinite.

Cumu funziona

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 è un sguardu in prufundità di cumu si riunisce a griglia.

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

Una di trè colonne

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

L'esempiu di sopra crea trè culonni di larghezza uguale nantu à i dispositi chjuchi, medii, grandi è extra grande chì utilizanu e nostre classi di griglia predefinite. Quelli culonni sò centrati in a pagina cù u parent .container.

Distrughjendu, eccu cumu funziona:

I cuntenituri furniscenu un mezzu per centru è pad horizontalmente u cuntenutu di u vostru situ. Aduprate .containerper una larghezza di pixel responsive o .container-fluidper width: 100%tutte e dimensioni di i vetri è di i dispositi.
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. Questu modu, tuttu u cuntenutu in i vostri culonni hè visualmente allinatu in u latu manca.
In un layout di griglia, u cuntenutu deve esse piazzatu in e culonne è solu e culonne ponu esse figlioli immediati di fila.
Grazie à flexbox, e colonne di griglia senza una specificazione widthsaranu automaticamente disposte cum'è colonne di larghezza uguale. Per esempiu, quattru istanze di .col-smogni sarà automaticamente 25% larga da u picculu breakpoint è up. Vede a sezione di e colonne di layout automaticu per più esempi.
E classi di colonna indicanu u numeru di colonne chì vulete usà fora di e pussibuli 12 per fila. Allora, se vulete trè colonne di larghezza uguale, pudete aduprà .col-4.
A colonna widthsò stabilite in percentuali, cusì sò sempre fluidi è dimensionati relative à u so elementu parent.
I culonni anu horizontale paddingper creà i canali trà e colonne individuali, in ogni modu, pudete caccià u marginda e fila è paddingda e culonni cù .no-guttersnantu à u .row.
Per fà chì a griglia risponda, ci sò cinque punti di rottura di a griglia, unu per ogni puntu d'interruzzione di risposta : tutti i punti di rottura (extra small), small, medium, large, and extra large.
I punti di rottura di a griglia sò basati nantu à e dumande di media di larghezza minima, vale à dì chì s'applicanu à quellu puntu di rottura è tutti quelli chì sò sopra (per esempiu, .col-sm-4s'applicanu à i dispositi chjuchi, medii, grandi è extra grande, ma micca u primu puntu di xsrottura).
Pudete utilizà classi di griglia predefinite (cum'è .col-4) o Sass mixins per un marcatu più semanticu.

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

Opzioni di griglia

Mentre Bootstrap usa ems o rems per definisce a maiò parte di e dimensioni, pxs sò usati per i punti di rottura di a griglia è a larghezza di u containeru. Questu hè chì a larghezza di a finestra hè in pixel è ùn cambia micca cù a dimensione di font .

Vede cumu l'aspetti di u sistema di griglia Bootstrap funzionanu in parechji dispositi cù una tavola pratica.

	Extra picculu <576px	Picculu ≥576px	Mediu ≥768px	Grande ≥992px	Extra large ≥1200px
Larghezza massima di u containeru	Nisunu (auto)	540 px	720 px	960 px	1140 px
Prefissu di classa	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# di culonni	12
Larghezza di gutter	30px (15px da ogni latu di una colonna)
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à xl. 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>

E colonne di uguale larghezza ponu esse divise in parechje linee, ma ci era un bug di flexbox Safari chì impedia questu di travaglià senza esplicitu flex-basiso border. Ci sò solu solu per e versioni di u navigatore più vechje, ma ùn deve micca esse necessariu sè site aghjurnatu.

Colonna

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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>

Multifila di uguale larghezza

Crea culonni di uguale larghezza chì spannu parechje fila inserendu un .w-100induve vulete chì e colonne si rompenu à una nova linea. Fate i pause rispunsevuli mischjendu .w-100cù alcune utilità di visualizazione rispunsevuli .

col

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Classi responsive

A griglia di Bootstrap include cinque 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="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>

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

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-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

Allineamentu

Aduprate l'utilità di allineamentu flexbox per allineà e colonne verticalmente è orizontali.

Allineamentu verticale

Una di trè colonne

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Una di trè colonne

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Allineamentu horizontale

Una di duie colonne

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Nisun gutters

I canali trà e colonne in e nostre classi di griglia predefinite ponu esse eliminati cù .no-gutters. Questu sguassate u negativu margins da .rowè l'orizontale paddingda tutti i culonni di i zitelli immediata.

Eccu u codice fonte per creà sti stili. Innota chì l'override di e colonne sò scopre solu à e prime colonne di i zitelli è sò destinati via u selettore di attributi . Mentre chì questu genera un selettore più specificu, u padding di colonna pò ancu esse più persunalizatu cù utilità di spaziatura .

Avete bisognu di un disignu di punta à punta? Abbandunate u genitore .containero .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

In pratica, eccu cumu si vede. Nota chì pudete cuntinuà aduprà questu cù tutte l'altri classi di griglia predefiniti (cumprese larghezza di colonna, livelli responsivi, riordini, è più).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Imballaggio di a colonna

Se più di 12 culonni sò posti in una sola fila, ogni gruppu di colonne extra, cum'è una unità, si mette in una nova linea.

.col-9

.col-4
Siccomu 9 + 4 = 13 > 12, stu div di 4-column-wide si mette in una nova linea cum'è una unità cuntigua.

.col-6 Culonni
successivi cuntinueghjanu longu a nova linea.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

A colonna si rompe

A rottura di e colonne à una nova linea in flexbox richiede un picculu pirate: aghjunghje un elementu cù width: 100%induve vulete imbulighjà e vostre colonne in una nova linea. Normalmente questu hè realizatu cù parechje .rows, ma micca ogni metudu di implementazione pò cuntà per questu.

.col-6 .col-sm-3

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

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

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

Pudete ancu applicà sta pausa à punti di rottura specifichi cù e nostre utilità di visualizazione rispunsevuli .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

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

Riordinu

Ordine classi

Aduprate .order-classi per cuntrullà l'ordine visuale di u vostru cuntenutu. Queste classi sò responsive, cusì pudete stabilisce u orderper breakpoint (per esempiu, .order-1.order-md-2). Include supportu 1attraversu 12tutti i cinque livelli di griglia.

Prima, ma senza ordine

Siconda, ma ultima

Terzu, ma prima

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Ci sò ancu rispunsevuli .order-firstè .order-lastclassi chì cambianu l' orderelementu applicà order: -1è order: 13( order: $columns + 1), rispettivamente. Queste classi ponu ancu esse mischiate cù e classi numerate .order-*cum'è necessariu.

Prima, ma ultima

Siconda, ma senza ordine

Terzu, ma prima

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Colonne di compensazione

Pudete cumpensà e colonne di griglia in dui modi: e nostre .offset-classi di griglia responsive è e nostre utilità di margine . E classi di griglia sò dimensionate per currisponde à e colonne mentre i marghjini sò più utili per i layout rapidi induve a larghezza di l'offset hè variabile.

Classi offset

Sposta e colonne à a diritta usendu .offset-md-*classi. Queste classi aumentanu u margine di manca di una colonna per *colonne. Per esempiu, .offset-md-4si move .col-md-4nantu à quattru culonni.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

In più di l'eliminazione di a colonna à i punti d'interruzione responsive, pudete avè bisognu di resettate l'offsets. Vede questu in azzione in l'esempiu di griglia .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Utilità di margine

Cù u muvimentu in flexbox in v4, pudete aduprà l'utilità di marghjini cum'è .mr-autoper furzà e colonne frateddi alluntanate l'una da l'altru.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

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

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

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

<div class="row">
  <div class="col-sm-9">
    Level 1: .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>

Sass mixins

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 di 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: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

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();
@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 {
  width: 800px;
  @include make-container();
}

.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: 30px !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 %).