Treci la conținutul principal Treceți la navigarea documentelor
Check
in English

indicele Z

Deși nu fac parte din sistemul de grilă Bootstrap, indicii z joacă un rol important în modul în care componentele noastre se suprapun și interacționează unele cu altele.

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 instrumentelor și popover-urile, 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 în componentele noastre stratificate - sfaturi cu instrumente, popovers, bare de navigare, meniuri derulante, modale - 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;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-offcanvas-backdrop:         1040;
$zindex-offcanvas:                  1045;
$zindex-modal-backdrop:             1050;
$zindex-modal:                      1055;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;
$zindex-toast:                      1090;

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.