Негізгі мазмұнға өту Құжаттар шарлауына өту
in English

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мәндерді қолданамыз. Меңзерді жылжыту/фокус/белсенді параметрінде біз белгілі бір элементті алдыңғы қатарға жоғарырақ мәнмен алып, олардың шекарасын сіңісті элементтердің үстінен көрсетеміз.123z-index