Z-indeks
Kuigi z-indeksid ei kuulu Bootstrapi ruudustikusüsteemi, on neil oluline osa meie komponentide kattumisel ja üksteisega suhtlemisel.
Mitmed Bootstrapi komponendid kasutavad z-index
CSS-i atribuuti, mis aitab juhtida paigutust, pakkudes sisu korraldamiseks kolmandat telge. Kasutame Bootstrapis vaikimisi z-indeksi skaalat, mis on loodud navigeerimise, tööriistaspikrite ja hüpikaknate, modaalide ja muu õigeks kihistamiseks.
Need kõrgemad väärtused algavad suvalisest arvust, mis on piisavalt kõrged ja piisavalt spetsiifilised, et ideaalis vältida konflikte. Vajame nende standardset komplekti kõigis oma kihilistes komponentides – tööriistaspikrid, hüpikaknad, navigeerimisribad, rippmenüüd, modaalid –, et saaksime käitumises mõistlikult järjekindlad olla. Pole põhjust, miks me ei oleks saanud kasutada 100
+ või 500
+.
Me ei julgusta nende individuaalsete väärtuste kohandamist; Kui peaksite ühte muutma, peate tõenäoliselt muutma need kõik.
$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;
Komponentide (nt nupud ja sisendid sisendrühmades) kattuvate ääriste käsitlemiseks kasutame madalaid ühekohalisi z-index
väärtusi 1
, 2
ja 3
vaike-, hõljutus- ja aktiivsete olekute jaoks. Hõljutus-/fookus-/aktiivne-režiimis toome konkreetse elemendi esiplaanile kõrgema z-index
väärtusega, et näidata nende piire õdede elementide kohal.