લેઆઉટ માટે ઉપયોગિતાઓ
ઝડપી મોબાઇલ-મૈત્રીપૂર્ણ અને પ્રતિભાવશીલ વિકાસ માટે, બુટસ્ટ્રેપમાં સામગ્રી દર્શાવવા, છુપાવવા, સંરેખિત કરવા અને અંતર રાખવા માટે ડઝનેક ઉપયોગિતા વર્ગોનો સમાવેશ થાય છે.
બદલાતીdisplay
પ્રોપર્ટીના સામાન્ય મૂલ્યોને પ્રતિભાવપૂર્વક ટૉગલ કરવા માટે અમારી ડિસ્પ્લે યુટિલિટીનો ઉપયોગ કરો. display
ચોક્કસ વ્યુપોર્ટ પર બતાવવા અથવા છુપાવવા માટે તેને અમારી ગ્રીડ સિસ્ટમ, સામગ્રી અથવા ઘટકો સાથે મિક્સ કરો.
ફ્લેક્સબોક્સ વિકલ્પો
બુટસ્ટ્રેપ ફ્લેક્સબોક્સ સાથે બનેલ છે, પરંતુ દરેક ઘટકને display
બદલવામાં આવ્યું નથી display: flex
કારણ કે આ ઘણા બિનજરૂરી ઓવરરાઇડ્સ ઉમેરશે અને અણધારી રીતે કી બ્રાઉઝર વર્તણૂકોને બદલશે. અમારા મોટાભાગના ઘટકો ફ્લેક્સબોક્સ સક્ષમ સાથે બનેલ છે.
display: flex
જો તમારે કોઈ ઘટકમાં ઉમેરવાની જરૂર હોય , તો .d-flex
તે પ્રતિભાવશીલ પ્રકારો (દા.ત., .d-sm-flex
)માંથી એક સાથે કરો. કદ, સંરેખણ, અંતર અને વધુ માટે અમારી વધારાની ફ્લેક્સબોક્સ ઉપયોગિતાઓનોdisplay
ઉપયોગ કરવાની મંજૂરી આપવા માટે તમને આ વર્ગ અથવા મૂલ્યની જરૂર પડશે .
માર્જિન અને ગાદી
તત્વો અને ઘટકો કેવી રીતે અંતર અને કદના છે તે નિયંત્રિત કરવા માટે margin
અને padding
અંતર ઉપયોગિતાઓનો ઉપયોગ કરો . 1rem
બુટસ્ટ્રેપમાં વેલ્યુ ડિફોલ્ટ $spacer
વેરીએબલ પર આધારિત, અંતર ઉપયોગિતાઓ માટે છ-સ્તરના સ્કેલનો સમાવેશ થાય છે . બધા વ્યુપોર્ટ્સ માટે મૂલ્યો પસંદ કરો (દા.ત., LTR માં .me-3
માટે ), અથવા ચોક્કસ વ્યૂપોર્ટ્સને લક્ષ્ય બનાવવા માટે margin-right: 1rem
પ્રતિભાવશીલ વેરિઅન્ટ્સ પસંદ કરો (દા.ત., — LTR માં — બ્રેકપોઈન્ટથી શરૂ કરીને )..me-md-3
margin-right: 1rem
md
ટૉગલ કરોvisibility
જ્યારે ટૉગલ કરવાની જરૂર ન હોય, ત્યારે તમે અમારી વિઝિબિલિટી યુટિલિટીઝ સાથે એલિમેન્ટને display
ટૉગલ કરી શકો છો . અદ્રશ્ય તત્વો હજી પણ પૃષ્ઠના લેઆઉટને અસર કરશે, પરંતુ મુલાકાતીઓથી દૃષ્ટિની રીતે છુપાયેલા છે.visibility