Contenituri
I cuntenituri sò un bloccu di custruzzione fundamentale di Bootstrap chì cuntene, pad, è allineate u vostru cuntenutu in un determinatu dispositivu o viewport.
Cumu travaglianu
I cuntenituri sò l'elementu di layout più basicu in Bootstrap è sò richiesti quandu si usa u nostru sistema di griglia predeterminatu . I cuntenituri sò usati per cuntene, pad, è (a volte) centru u cuntenutu in elli. Mentre chì i cuntenituri ponu esse nidificati, a maiò parte di i layout ùn anu micca bisognu di un containeru nidificatu.
Bootstrap vene cun trè cuntenituri diffirenti:
.container
, chì stabilisce unmax-width
in ogni puntu di rupture responsive.container-fluid
, chì hèwidth: 100%
in tutti i punti di rottura.container-{breakpoint}
, chì hèwidth: 100%
finu à u puntu di ruptura specificatu
A tavula quì sottu illustra cumu ogni cuntainer si max-width
compara à l'uriginale .container
è .container-fluid
in ogni puntu di ruptura.
Vede li in azzione è paragunate in u nostru esempiu Grid .
Extra picculu <576px |
Picculu ≥576px |
Mediu ≥768px |
Grande ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540 px | 720 px | 960 px | 1140 px | 1320 px |
.container-sm |
100% | 540 px | 720 px | 960 px | 1140 px | 1320 px |
.container-md |
100% | 100% | 720 px | 960 px | 1140 px | 1320 px |
.container-lg |
100% | 100% | 100% | 960 px | 1140 px | 1320 px |
.container-xl |
100% | 100% | 100% | 100% | 1140 px | 1320 px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320 px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Container par défaut
A nostra .container
classa predeterminata hè un cuntainer responsive, di larghezza fissa, chì significheghja i so max-width
cambiamenti à ogni breakpoint.
<div class="container">
<!-- Content here -->
</div>
Contenituri rispunsevuli
I cuntenituri rispunsevuli permettenu di specificà una classa chì hè larga 100% finu à chì u puntu di rupture specificatu hè righjuntu, dopu chì applichemu max-width
s per ognunu di i punti di rottura più altu. Per esempiu, .container-sm
hè 100% largu per inizià finu à chì u puntu di sm
ruptura hè ghjuntu, induve si scala cù md
, lg
, xl
, è xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Contenitori di fluidi
Aduprà .container-fluid
per un cuntainer di larghezza tutale, spanning the whole wide of the viewport.
<div class="container-fluid">
...
</div>
Sass
Cum'è mostratu sopra, Bootstrap genera una seria di classi di cuntainer predefinite per aiutà à custruisce i layout chì vulete. Pudete persunalizà queste classi di cuntainer predefinite mudificà a mappa Sass (truvata in _variables.scss
) chì li alimenta:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
In più di persunalizà u Sass, pudete ancu creà i vostri cuntenituri cun u nostru mixin Sass.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Per più infurmazione è esempii nantu à cumu mudificà e nostre carte è variabili Sass, fate riferimentu à a sezione Sass di a documentazione di Grid .