Z-індэкс
Нягледзячы на тое, што z-індэксы не ўваходзяць у сеткавую сістэму Bootstrap, яны гуляюць важную ролю ў тым, як нашы кампаненты накладваюцца і ўзаемадзейнічаюць адзін з адным.
Некалькі кампанентаў Bootstrap выкарыстоўваюць z-indexуласцівасць CSS, якая дапамагае кантраляваць макет, забяспечваючы трэцюю вось для размяшчэння змесціва. Мы выкарыстоўваем шкалу 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значэннем, каб паказаць яго мяжу над роднаснымі элементамі.