Containere

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ă un max-widthla fiecare punct de întrerupere receptiv
• .container-{breakpoint}, care este width: 100%până la punctul de întrerupere specificat
• .container-fluid, care este width: 100%la toate punctele de întrerupere

Tabelul de mai jos ilustrează modul în care fiecare container se max-widthcompară 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 .

Container implicit

Clasa noastră implicită .containereste un container receptiv, cu lățime fixă, adică max-widthmodifică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-widths pentru fiecare dintre punctele de întrerupere mai mari. De exemplu, .container-smare o lățime de 100% pentru a începe până când smeste 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-fluidpentru 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 .