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.