बूटस्ट्रैप रिस्पॉन्सिव लेआउट में तत्वों को छिपाना

विभिन्न स्क्रीन आकारों में सामग्री दृश्यता को अनुकूलित करके अपने बूटस्ट्रैप डिज़ाइन को बढ़ाएं। बूटस्ट्रैप छोटे उपकरणों पर मेनू आइटम प्रदर्शित करने के लिए सुविधाएँ प्रदान करता है, लेकिन अन्य पृष्ठ तत्वों के बारे में क्या?

इसे संबोधित करने के लिए, बूटस्ट्रैप "दृश्यमान" और "छिपी हुई" कक्षाएं प्रदान करता है जो आपको स्क्रीन के आधार पर तत्वों को गतिशील रूप से प्रदर्शित या छुपाने में सक्षम बनाता है आकार। उपलब्ध कक्षाओं में शामिल हैं:

दृश्यमान कक्षाएं:

• .visible-xs-block: अतिरिक्त छोटे उपकरणों (फोन) पर दिखाएं
• .visible-sm-block: छोटे उपकरणों (टैबलेट्स) पर दिखाएं
• .visible-md-block: मध्यम उपकरणों पर दिखाएं (डेस्कटॉप)
• .visible-lg-block: बड़े उपकरणों पर दिखाएं (डेस्कटॉप)

छिपे हुए वर्ग:

• .hidden-xs: अतिरिक्त छोटे उपकरणों (फोन) पर छिपाएं
• .hidden-sm: छुपाएं छोटे उपकरण (टैबलेट)
• .hidden-md: मध्यम उपकरणों (डेस्कटॉप) पर छिपाएं
• .hidden-lg: बड़े उपकरणों (डेस्कटॉप) पर छिपाएं

अपने नेविगेशन पिल्स को छोटी स्क्रीन पर छिपाने के लिए, बस संबंधित में .hidden-xs क्लास जोड़ें कंटेनर।

...

वैकल्पिक रूप से, आप "hidden-* का उपयोग कर सकते हैं -डाउन" वर्ग, जो निर्दिष्ट ब्रेकपॉइंट या छोटे पर तत्वों को छुपाता है।

...

यदि आप तत्व को निर्दिष्ट ब्रेकपॉइंट या उससे अधिक दूरी पर दिखाना चाहते हैं तो "विज़िबल-*-अप" क्लास का उपयोग करना याद रखें।

बूटस्ट्रैप की रिस्पॉन्सिव यूटिलिटी कक्षाओं के बारे में अधिक जानकारी के लिए, http://getbootstrap.com/css/#responsive-utilities पर उनके आधिकारिक दस्तावेज़ देखें।