Z-indeks
Iako nisu dio Bootstrap-ovog grid sistema, z-indeksi igraju važnu ulogu u tome kako se naše komponente preklapaju i međusobno djeluju.
Nekoliko Bootstrap komponenti koristi z-index, CSS svojstvo koje pomaže u kontroli rasporeda pružanjem treće ose za raspoređivanje sadržaja. Koristimo zadanu skalu z-indeksa u Bootstrapu koja je dizajnirana za ispravnu navigaciju slojeva, opise alata i iskačuće elemente, modale i još mnogo toga.
Ove veće vrijednosti počinju od proizvoljnog broja, dovoljno visokih i specifičnih da se u idealnom slučaju izbjegnu sukobi. Potreban nam je standardni skup ovih u našim slojevitim komponentama – opisi alata, skočni prozori, navigacijske trake, padajući menii, modali – tako da možemo biti razumno dosljedni u ponašanju. Nema razloga da ne bismo mogli koristiti 100+ ili 500+.
Ne potičemo prilagođavanje ovih individualnih vrijednosti; ako promijenite jednu, vjerovatno ćete ih morati promijeniti sve.
$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;
Za rukovanje preklapajućim granicama unutar komponenti (npr. dugmadi i ulazi u ulaznim grupama), koristimo niske jednocifrene z-indexvrijednosti 1, 2, i 3za zadana stanja, lebdenje i aktivna stanja. Kada lebdi/fokusira/aktivno, stavljamo određeni element u prvi plan s višom z-indexvrijednošću kako bismo prikazali njihovu granicu preko srodnih elemenata.