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.
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.
<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-width
e dumande di media, vale à dì chì affettanu quellu puntu d'interruzzione è tutti quelli chì sò sopra (per esempiu,.col-sm-4
si 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
.container
per una larghezza di pixel responsive,.container-fluid
perwidth: 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. Questupadding
hè 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-4
spans four).width
s 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-0
hè 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 |
|
---|---|---|---|---|---|---|
Containermax-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.
<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.
<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}-auto
classi per dimensionà e colonne basatu nantu à a larghezza naturale di u so cuntenutu.
<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 .col
e .col-*
classi. Specificate una classa numerata quandu avete bisognu di una colonna particularmente grande; altrimenti, sentite liberu di attaccà à .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>
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
).
<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.
<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 .row
cum'è predefinitu per e colonne cuntenute. Cù .row-cols-auto
pudete 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.
<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>
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).
<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);
}
}
<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-columns
hè utilizatu per generà l'larghezza (in per centu) di ogni colonna individuali mentre $grid-gutter-width
stabilisce 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
, em
o %
).