Z- സൂചിക
ബൂട്ട്സ്ട്രാപ്പിന്റെ ഗ്രിഡ് സിസ്റ്റത്തിന്റെ ഭാഗമല്ലെങ്കിലും, ഞങ്ങളുടെ ഘടകങ്ങൾ എങ്ങനെ പരസ്പരം പരത്തുകയും പരസ്പരം ഇടപഴകുകയും ചെയ്യുന്നു എന്നതിൽ z-ഇൻഡക്സുകൾ ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു.
നിരവധി ബൂട്ട്സ്ട്രാപ്പ് ഘടകങ്ങൾ ഉപയോഗപ്പെടുത്തുന്നു z-index
, ഉള്ളടക്കം ക്രമീകരിക്കുന്നതിന് ഒരു മൂന്നാം അച്ചുതണ്ട് നൽകിക്കൊണ്ട് ലേഔട്ട് നിയന്ത്രിക്കാൻ സഹായിക്കുന്ന CSS പ്രോപ്പർട്ടി. ശരിയായ ലെയർ നാവിഗേഷൻ, ടൂൾടിപ്പുകൾ, പോപ്പോവറുകൾ, മോഡലുകൾ എന്നിവയും മറ്റും ശരിയായി രൂപകൽപ്പന ചെയ്തിട്ടുള്ള ഒരു ഡിഫോൾട്ട് z-ഇൻഡക്സ് സ്കെയിൽ ഞങ്ങൾ ബൂട്ട്സ്ട്രാപ്പിൽ ഉപയോഗിക്കുന്നു.
ഈ ഉയർന്ന മൂല്യങ്ങൾ ഒരു അനിയന്ത്രിതമായ സംഖ്യയിൽ ആരംഭിക്കുന്നു, ഉയർന്നതും പൊരുത്തക്കേടുകൾ ഒഴിവാക്കാൻ പര്യാപ്തവുമാണ്. ഞങ്ങളുടെ ലേയേർഡ് ഘടകങ്ങളിൽ ഉടനീളം ഇവയുടെ ഒരു സ്റ്റാൻഡേർഡ് സെറ്റ് ആവശ്യമാണ്—ടൂൾടിപ്പുകൾ, പോപ്പോവറുകൾ, നവബാറുകൾ, ഡ്രോപ്പ്ഡൗണുകൾ, മോഡലുകൾ—അതിനാൽ നമുക്ക് പെരുമാറ്റങ്ങളിൽ ന്യായമായും സ്ഥിരത പുലർത്താനാകും. 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