Containere
Containerele sunt un element fundamental al Bootstrap care conțin, completează și aliniază conținutul dvs. într-un anumit dispozitiv sau fereastră de vizualizare.
Cum funcționează
Containerele sunt cel mai elementar element de aspect din Bootstrap și sunt necesare atunci când utilizați sistemul nostru de grile implicit . Containerele sunt folosite pentru a conține, a bloca și (uneori) a centra conținutul în ele. În timp ce containerele pot fi imbricate, majoritatea layout-urilor nu necesită un container imbricat.
Bootstrap vine cu trei containere diferite:
.container
, care setează unmax-width
la fiecare punct de întrerupere receptiv.container-{breakpoint}
, care estewidth: 100%
până la punctul de întrerupere specificat.container-fluid
, care estewidth: 100%
la toate punctele de întrerupere
Tabelul de mai jos ilustrează modul în care fiecare container se max-width
compară cu originalul .container
și .container-fluid
în fiecare punct de întrerupere.
Vedeți-le în acțiune și comparați-le în exemplul nostru Grid .
Extra mic
<576px
|
Mic
≥576px
|
Mediu
≥768px
|
Mare
≥992px
|
Extra larg
≥1200px
|
XX-Mare
≥1400px
|
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Container implicit
Clasa noastră implicită .container
este un container receptiv, cu lățime fixă, adică max-width
modificările sale la fiecare punct de întrerupere.
<div class="container">
<!-- Content here -->
</div>
Containere receptive
Containerele responsive vă permit să specificați o clasă care are 100% lățime până când este atins punctul de întrerupere specificat, după care aplicăm max-width
s pentru fiecare dintre punctele de întrerupere mai mari. De exemplu, .container-sm
are o lățime de 100% pentru a începe până când sm
este atins punctul de întrerupere, unde va crește cu md
, lg
, xl
și 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>
Recipiente pentru fluide
Utilizați .container-fluid
pentru un container cu lățime completă, care se întinde pe întreaga lățime a ferestrei de vizualizare.
<div class="container-fluid">
...
</div>
Sass
După cum se arată mai sus, Bootstrap generează o serie de clase de containere predefinite pentru a vă ajuta să construiți machetele dorite. Puteți personaliza aceste clase de containere predefinite modificând harta Sass (găsită în _variables.scss
) care le alimentează:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Pe lângă personalizarea Sass, vă puteți crea și propriile recipiente cu mixin-ul nostru 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();
}
Pentru mai multe informații și exemple despre cum să modificați hărțile și variabilele noastre Sass, vă rugăm să consultați secțiunea Sass din documentația Grid .