लेआउटको लागि उपयोगिताहरू

छिटो मोबाइल-अनुकूल र उत्तरदायी विकासको लागि, बुटस्ट्र्यापले देखाउने, लुकाउने, पङ्क्तिबद्ध गर्ने, र स्पेसिङ सामग्रीको लागि दर्जनौं उपयोगिता वर्गहरू समावेश गर्दछ।

फेर्दैdisplay

सम्पत्तीको सामान्य मानहरू प्रतिक्रियाशील रूपमा टगल गर्नका लागि हाम्रो प्रदर्शन उपयोगिताहरू प्रयोग गर्नुहोस्। displayयसलाई हाम्रो ग्रिड प्रणाली, सामग्री, वा कम्पोनेन्टहरू देखाउन वा लुकाउनको लागि विशिष्ट भ्यूपोर्टहरूमा मिलाउनुहोस्।

फ्लेक्सबक्स विकल्पहरू

बुटस्ट्र्याप 4 फ्लेक्सबक्सको साथ बनाइएको छ, तर प्रत्येक तत्वलाई displayपरिवर्तन गरिएको छैन display: flexकिनकि यसले धेरै अनावश्यक ओभरराइडहरू थप्नेछ र अप्रत्याशित रूपमा कुञ्जी ब्राउजर व्यवहारहरू परिवर्तन गर्नेछ। हाम्रा धेरैजसो कम्पोनेन्टहरू फ्लेक्सबक्स सक्षम भएकाले बनाइएका छन्।

यदि तपाईंले display: flexकुनै तत्वमा थप्न आवश्यक छ भने, त्यसो गर्नुहोस् .d-flexवा प्रतिक्रियाशील भेरियन्टहरू (जस्तै, .d-sm-flex) सँग गर्नुहोस्। साइजिङ , पङ्क्तिबद्धता, स्पेसिङ, र थपका लागि हाम्रो अतिरिक्त फ्लेक्सबक्स उपयोगिताहरूdisplay प्रयोग गर्न अनुमति दिन तपाईंलाई यो वर्ग वा मान चाहिन्छ।

मार्जिन र प्याडिङ

तत्वहरू र कम्पोनेन्टहरू कसरी स्पेस र साइज हुन्छन् भनेर नियन्त्रण गर्न marginर padding स्पेसिङ युटिलिटीहरू प्रयोग गर्नुहोस् । बुटस्ट्र्याप 4 ले स्पेसिङ उपयोगिताहरूको लागि पाँच-स्तर स्केल समावेश गर्दछ, 1remमान पूर्वनिर्धारित $spacerचरमा आधारित। सबै भ्यूपोर्टहरूका लागि मानहरू छनौट गर्नुहोस् (उदाहरणका .mr-3लागि margin-right: 1rem), वा विशिष्ट भ्यूपोर्टहरूलाई लक्षित गर्न उत्तरदायी भेरियन्टहरू छनोट गर्नुहोस् (उदाहरणका .mr-md-3लागि , ब्रेकपोइन्टमा margin-right: 1remसुरु गर्नका लागि)।md

टगल गर्नुहोस्visibility

जब टगल displayगर्न आवश्यक छैन, तपाइँ हाम्रो दृश्यता उपयोगिताहरुvisibility संग एक तत्व को टगल गर्न सक्नुहुन्छ । अदृश्य तत्वहरूले अझै पनि पृष्ठको लेआउटलाई असर गर्नेछ, तर भिजिटरहरूबाट दृश्यात्मक रूपमा लुकेका छन्।