Z-индекс
Въпреки че не са част от мрежовата система на Bootstrap, z-индексите играят важна роля в това как нашите компоненти се наслагват и взаимодействат един с друг.
Няколко компонента на Bootstrap използват z-indexCSS свойството, което помага за контролиране на оформлението чрез предоставяне на трета ос за подреждане на съдържанието. Ние използваме z-индексна скала по подразбиране в Bootstrap, която е проектирана за правилно наслояване на навигация, подсказки и изскачащи елементи, модали и др.
Тези по-високи стойности започват с произволно число, достатъчно високо и специфично, за да се избегнат в идеалния случай конфликти. Нуждаем се от стандартен набор от тях в нашите многослойни компоненти – подсказки, изскачащи ленти, навигационни ленти, падащи менюта, модали – за да можем да бъдем разумно последователни в поведението. Няма причина да не сме използвали 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;
$zindex-toast: 1090;
За да се справим с припокриващи се граници в рамките на компоненти (напр. бутони и входове във входни групи), използваме ниски едноцифрени z-indexстойности на 1, 2и 3за състояния по подразбиране, задържане и активни състояния. При задържане на курсора/фокус/активност извеждаме конкретен елемент на преден план с по-висока z-indexстойност, за да покажем границата му над елементите-роднини.