Z-indeks

Alhoewel dit nie deel is van Bootstrap se roosterstelsel nie, speel z-indekse 'n belangrike rol in hoe ons komponente oorlê en met mekaar in wisselwerking is.

Verskeie Bootstrap-komponente gebruik z-index, die CSS-eienskap wat help om uitleg te beheer deur 'n derde as te verskaf om inhoud te rangskik. Ons gebruik 'n verstek z-indeks skaal in Bootstrap wat ontwerp is om behoorlik laag navigasie, gereedskapwenke en popovers, modale, en meer.

Hierdie hoër waardes begin by 'n arbitrêre getal, hoog en spesifiek genoeg om konflik te vermy. Ons benodig 'n standaardstel hiervan oor ons gelaagde komponente - nutswenke, popovers, navigasiebalke, dropdowns, modale - sodat ons redelik konsekwent in die gedrag kan wees. Daar is geen rede waarom ons nie 100+ of 500+ kon gebruik het nie.

Ons moedig nie aanpassing van hierdie individuele waardes aan nie; sou jy een verander, moet jy hulle waarskynlik almal verander.

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

Om oorvleuelende grense binne komponente (bv. knoppies en invoere in invoergroepe) te hanteer, gebruik ons lae enkelsyferwaardes z-indexvan 1, 2, en 3vir verstek-, sweef- en aktiewe toestande. Op sweef/fokus/aktief bring ons 'n bepaalde element na vore met 'n hoër z-indexwaarde om hul grens oor die broer en suster-elemente te wys.