Z-индекс
Bootstrap тор жүйесінің бөлігі болмаса да, z-индекстері біздің құрамдас бөліктердің бір-бірімен қабаттасуы мен өзара әрекеттесуінде маңызды рөл атқарады.
Бірнеше Bootstrap құрамдастары z-index
мазмұнды реттеу үшін үшінші осьті қамтамасыз ету арқылы орналасуды басқаруға көмектесетін CSS сипатын пайдаланады. Біз Bootstrap жүйесінде шарлауды, құралдар кеңестерін және қалқымалы терезелерді, модальдарды және т.б. дұрыс қабаттастыруға арналған әдепкі z-индекс шкаласын қолданамыз.
Бұл жоғары мәндер ерікті саннан басталады, қайшылықтарды болдырмау үшін жеткілікті жоғары және нақты. Бізге осылардың стандартты жиынтығы біздің деңгейлі құрамдас бөліктерімізде қажет - кеңестер, қалқымалы терезелер, шарлау тақталары, ашылмалы тізімдер, модальдар - осылайша біз мінез-құлықта үйлесімді болуымыз керек. 100
+ немесе + пайдалануымызға ешқандай себеп жоқ 500
.
Біз бұл жеке құндылықтарды теңшеуді қолдамаймыз; біреуін өзгертсеңіз, олардың барлығын өзгерту қажет болуы мүмкін.
$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-offcanvas: 1050;
$zindex-modal: 1060;
$zindex-popover: 1070;
$zindex-tooltip: 1080;
Компоненттердегі қабаттасатын шекараларды өңдеу үшін (мысалы, енгізу топтарындағы түймелер мен кірістер) біз , , және әдепкі үшін меңзерді апару және белсенді күйлер үшін бір таңбалы төмен z-index
мәндерді қолданамыз. Меңзерді жылжыту/фокус/белсенді параметрінде біз белгілі бір элементті алдыңғы қатарға жоғарырақ мәнмен алып, олардың шекарасын сіңісті элементтердің үстінен көрсетеміз.1
2
3
z-index