Prezentare generală

Componente și opțiuni pentru amenajarea proiectului dvs. Bootstrap, inclusiv containere de ambalare, un sistem de grilă puternic, un obiect media flexibil și clase de utilitate receptive.

Containere

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

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 .

Toate intr-unul

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>

Fluid

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>

Receptiv

Containerele responsive sunt noi în Bootstrap v4.4. Acestea vă permit să specificați o clasă care are o lățime de 100% 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și xl.

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

Puncte de întrerupere receptive

Deoarece Bootstrap este dezvoltat pentru a fi mai întâi mobil, folosim o mână de interogări media pentru a crea puncte de întrerupere sensibile pentru layout-urile și interfețele noastre. Aceste puncte de întrerupere se bazează în mare parte pe lățimi minime ale ferestrelor de vizualizare și ne permit să mărim elementele pe măsură ce fereastra de vizualizare se schimbă.

Bootstrap utilizează în principal următoarele intervale de interogare media — sau puncte de întrerupere — în fișierele noastre sursă Sass pentru aspectul, sistemul de grilă și componentele noastre.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Deoarece scriem CSS-ul nostru sursă în Sass, toate interogările noastre media sunt disponibile prin mixuri Sass:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Folosim ocazional interogări media care merg în cealaltă direcție (dimensiunea ecranului dată sau mai mică ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Încă o dată, aceste interogări media sunt disponibile și prin mixuri Sass:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Există, de asemenea, interogări media și mix-uri pentru vizarea unui singur segment de dimensiuni de ecran folosind lățimile minime și maxime ale punctelor de întrerupere.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Aceste interogări media sunt, de asemenea, disponibile prin Sass mixins:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

În mod similar, interogările media se pot întinde pe mai multe lățimi ale punctelor de întrerupere:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Mixin-ul Sass pentru vizarea aceluiași interval de dimensiune a ecranului ar fi:

@include media-breakpoint-between(md, xl) { ... }

indicele Z

Mai multe componente Bootstrap utilizează z-index, proprietatea CSS care ajută la controlul aspectului prin furnizarea unei a treia axe pentru aranjarea conținutului. Utilizăm o scară z-index implicită în Bootstrap, care a fost concepută pentru a stratifica în mod corespunzător navigarea, sfaturile instrumente și popoverele, modale și multe altele.

Aceste valori mai mari încep de la un număr arbitrar, suficient de mare și de specific pentru a evita în mod ideal conflictele. Avem nevoie de un set standard al acestora pe componentele noastre stratificate - sfaturi cu instrumente, popovers, bare de navigare, meniuri derulante, modal - astfel încât să putem fi în mod rezonabil consecvenți în comportamente. Nu există niciun motiv pentru care nu am fi putut folosi 100+ sau 500+.

Nu încurajăm personalizarea acestor valori individuale; dacă schimbați unul, probabil că trebuie să le schimbați pe toate.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Pentru a gestiona marginile suprapuse în cadrul componentelor (de exemplu, butoanele și intrările în grupurile de intrare), folosim z-indexvalori mici de o singură cifră de 1, 2, și 3pentru stările implicite, hover și active. La hover/focus/activ, aducem în prim-plan un anumit element cu o z-indexvaloare mai mare pentru a arăta marginea lor peste elementele frate.