ઝેડ-ઇન્ડેક્સ
બુટસ્ટ્રેપની ગ્રીડ સિસ્ટમનો ભાગ ન હોવા છતાં, અમારા ઘટકો કેવી રીતે ઓવરલે કરે છે અને એકબીજા સાથે ક્રિયાપ્રતિક્રિયા કરે છે તેમાં 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