Índex Z
Tot i que no formen part del sistema de quadrícula de Bootstrap, els índexs z tenen un paper important en com els nostres components es superposen i interactuen entre ells.
Diversos components Bootstrap utilitzen z-index, la propietat CSS que ajuda a controlar el disseny proporcionant un tercer eix per organitzar el contingut. Utilitzem una escala d'índex z predeterminada a Bootstrap que s'ha dissenyat per a la navegació en capes, consells sobre eines i popovers, modals i molt més.
Aquests valors més alts comencen en un nombre arbitrari, prou alt i específic per evitar conflictes idealment. Necessitem un conjunt estàndard d'aquests en els nostres components en capes: informació sobre eines, popovers, barres de navegació, menús desplegables, modalitats, perquè puguem ser raonablement coherents en els comportaments. No hi ha cap motiu pel qual no haguéssim pogut utilitzar 100+ o 500+.
No fomentem la personalització d'aquests valors individuals; si en canvieu un, probablement haureu de canviar-los tots.
$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;
Per gestionar les vores superposades dins dels components (p. ex., botons i entrades en grups d'entrada), utilitzem z-indexvalors d' un dígit baix de 1, 2, i 3per als estats predeterminats, desplaçament i actiu. En passar el cursor/enfocar/actiu, portem un element particular al primer pla amb un z-indexvalor més alt per mostrar la seva vora sobre els elements germans.