Z- इंडेक्स
जबकि बूटस्ट्रैप के ग्रिड सिस्टम का हिस्सा नहीं है, जेड-इंडेक्स एक महत्वपूर्ण भूमिका निभाते हैं कि कैसे हमारे घटक एक दूसरे के साथ ओवरले और इंटरैक्ट करते हैं।
कई बूटस्ट्रैप घटक z-index
सीएसएस संपत्ति का उपयोग करते हैं जो सामग्री को व्यवस्थित करने के लिए तीसरा अक्ष प्रदान करके लेआउट को नियंत्रित करने में मदद करता है। हम बूटस्ट्रैप में एक डिफ़ॉल्ट जेड-इंडेक्स स्केल का उपयोग करते हैं जिसे नेविगेशन, टूलटिप्स और पॉपओवर, मोडल आदि को ठीक से परत करने के लिए डिज़ाइन किया गया है।
ये उच्च मूल्य एक मनमाना संख्या से शुरू होते हैं, उच्च और विशिष्ट रूप से आदर्श रूप से संघर्षों से बचने के लिए। हमें अपने स्तरित घटकों-टूलटिप्स, पॉपओवर, नेवबार, ड्रॉपडाउन, मोडल में इनमें से एक मानक सेट की आवश्यकता है-ताकि हम व्यवहार में उचित रूप से सुसंगत हो सकें। ऐसा कोई कारण नहीं है कि हम 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
डिफ़ॉल्ट, होवर और सक्रिय राज्यों के लिए। z-index
होवर/फोकस/सक्रिय पर, हम भाई तत्वों पर अपनी सीमा दिखाने के लिए एक विशेष तत्व को उच्च मूल्य के साथ सबसे आगे लाते हैं।