Z-ინდექსი
მიუხედავად იმისა, რომ არ არის Bootstrap-ის ბადის სისტემის ნაწილი, z- ინდექსები მნიშვნელოვან როლს თამაშობენ ჩვენი კომპონენტების გადაფარვისა და ურთიერთქმედების ერთმანეთზე.
Bootstrap-ის რამდენიმე კომპონენტი იყენებს z-index
CSS თვისებას, რომელიც გეხმარებათ განლაგების კონტროლში კონტენტის მოწყობის მესამე ღერძის მიწოდებით. ჩვენ ვიყენებთ ნაგულისხმევ z-ინდექსის სკალას Bootstrap-ში, რომელიც შექმნილია ნავიგაციის, ინსტრუმენტების რჩევების და პოპოვერების, მოდალების და სხვათა სწორად ფენისთვის.
ეს უმაღლესი მნიშვნელობები იწყება თვითნებური რიცხვით, საკმარისად მაღალი და სპეციფიკური, რათა იდეალურად თავიდან აიცილოთ კონფლიქტები. ჩვენ გვჭირდება მათი სტანდარტული ნაკრები ჩვენს ფენოვან კომპონენტებში - ინსტრუმენტების მინიშნებები, popovers, navbars, dropdowns, modals - ასე რომ, ჩვენ შეგვიძლია ვიყოთ გონივრულად თანმიმდევრული ქცევებში. არ არსებობს მიზეზი, რომ ჩვენ ვერ გამოვიყენოთ 100
+ ან 500
+.
ჩვენ არ ვამხნევებთ ამ ინდივიდუალური ღირებულებების პერსონალიზაციას; თუ ერთს შეცვლით, სავარაუდოდ ყველა უნდა შეცვალოთ.
$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;
კომპონენტების შიგნით გადახურული საზღვრების დასამუშავებლად (მაგ., ღილაკები და შეყვანები შეყვანის ჯგუფებში), ჩვენ ვიყენებთ დაბალ ერთნიშნა z-index
მნიშვნელობებს 1
, 2
, და 3
ნაგულისხმევად, გადასატანი და აქტიური მდგომარეობებისთვის. Hover/focus/active-ზე ჩვენ ვაყენებთ კონკრეტულ ელემენტს წინა პლანზე უფრო მაღალი z-index
მნიშვნელობით, რათა აჩვენოს მათი საზღვარი და-ძმის ელემენტებზე.