લેઆઉટ માટે ઉપયોગિતાઓ

ઝડપી મોબાઇલ-મૈત્રીપૂર્ણ અને પ્રતિભાવશીલ વિકાસ માટે, બુટસ્ટ્રેપમાં સામગ્રી દર્શાવવા, છુપાવવા, સંરેખિત કરવા અને અંતર રાખવા માટે ડઝનેક ઉપયોગિતા વર્ગોનો સમાવેશ થાય છે.

બદલાતીdisplay

પ્રોપર્ટીના સામાન્ય મૂલ્યોને પ્રતિભાવપૂર્વક ટૉગલ કરવા માટે અમારી ડિસ્પ્લે યુટિલિટીનો ઉપયોગ કરો. displayચોક્કસ વ્યુપોર્ટ પર બતાવવા અથવા છુપાવવા માટે તેને અમારી ગ્રીડ સિસ્ટમ, સામગ્રી અથવા ઘટકો સાથે મિક્સ કરો.

ફ્લેક્સબોક્સ વિકલ્પો

બુટસ્ટ્રેપ 4 ફ્લેક્સબોક્સ સાથે બનેલ છે, પરંતુ દરેક ઘટકને displayબદલવામાં આવ્યું નથી display: flexકારણ કે આ ઘણા બિનજરૂરી ઓવરરાઇડ્સ ઉમેરશે અને અણધારી રીતે કી બ્રાઉઝર વર્તણૂકોને બદલશે. અમારા મોટાભાગના ઘટકો ફ્લેક્સબોક્સ સક્ષમ સાથે બનેલ છે.

display: flexજો તમારે કોઈ ઘટકમાં ઉમેરવાની જરૂર હોય , તો .d-flexતે પ્રતિભાવશીલ પ્રકારો (દા.ત., .d-sm-flex)માંથી એક સાથે કરો. કદ, સંરેખણ, અંતર અને વધુ માટે અમારી વધારાની ફ્લેક્સબોક્સ ઉપયોગિતાઓનોdisplay ઉપયોગ કરવાની મંજૂરી આપવા માટે તમને આ વર્ગ અથવા મૂલ્યની જરૂર પડશે .

માર્જિન અને ગાદી

તત્વો અને ઘટકો કેવી રીતે અંતર અને કદના છે તે નિયંત્રિત કરવા માટે marginઅને padding અંતર ઉપયોગિતાઓનો ઉપયોગ કરો . 1remબુટસ્ટ્રેપ 4 એ વેલ્યુ ડિફોલ્ટ $spacerચલના આધારે, અંતર ઉપયોગિતાઓ માટે પાંચ-સ્તરના સ્કેલનો સમાવેશ કરે છે . બધા વ્યુપોર્ટ્સ માટે મૂલ્યો પસંદ કરો (દા.ત., .mr-3માટે margin-right: 1rem), અથવા ચોક્કસ વ્યૂપોર્ટ્સને લક્ષ્ય બનાવવા માટે પ્રતિભાવશીલ પ્રકારો પસંદ કરો (દા.ત., બ્રેકપોઇન્ટથી શરૂ કરવા .mr-md-3માટે ).margin-right: 1remmd

ટૉગલ કરોvisibility

જ્યારે ટૉગલ કરવાની જરૂર ન હોય, ત્યારે તમે અમારી વિઝિબિલિટી યુટિલિટીઝ સાથે એલિમેન્ટને displayટૉગલ કરી શકો છો . અદ્રશ્ય તત્વો હજી પણ પૃષ્ઠના લેઆઉટને અસર કરશે, પરંતુ મુલાકાતીઓથી દૃષ્ટિની રીતે છુપાયેલા છે.visibility