बूटस्ट्रैप के माध्यम से देखने पर ऐसा लगता है कि वे छोटे स्क्रीन के लिए मेनूबार आइटम को गिराने का समर्थन करते हैं। क्या पृष्ठ पर अन्य वस्तुओं के लिए भी कुछ ऐसा ही है?
उदाहरण के लिए, मेरे पास नेव-पिल्स के साथ-साथ दाईं ओर फ्लोट है। छोटे पर्दे पर यह मुद्दों का कारण बनता है। मैं कम से कम इसे एक समान क्लिक-टू-शो-अधिक ड्रॉपडाउन में रखना पसंद करूंगा।
क्या यह मौजूदा बूटस्ट्रैप ढांचे के भीतर संभव है?
जवाबों:
अतिरिक्त छोटे डिवाइस
फ़ोन (<768px)(Class names : .visible-xs-block, hidden-xs)
छोटे उपकरण
टैबलेट (8768px)(Class names : .visible-sm-block, hidden-sm)
मध्यम उपकरण
डेस्कटॉप (2992px)(Class names : .visible-md-block, hidden-md)
बड़े उपकरण
डेस्कटॉप (Desk1200px)(Class names : .visible-lg-block, hidden-lg)
नीचे v3.2.0 के रूप में पदावनत किया गया है
अतिरिक्त छोटे डिवाइस फ़ोन (<768px) (Class names : .visible-xs, hidden-xs)
छोटे उपकरण टैबलेट (8768px) (Class names : .visible-sm, hidden-sm)
मध्यम उपकरण डेस्कटॉप (2992px) (Class names : .visible-md, hidden-md)
बड़े उपकरण डेस्कटॉप (Desk1200px) (Class names : .visible-lg, hidden-lg)
बहुत पुराना बूटस्ट्रैप
.hidden-phone, .hidden-tablet आदि असमर्थित / अप्रचलित हैं।
अपडेट करें:
बूटस्ट्रैप 4 में 2 प्रकार की कक्षाएं हैं:
hidden-*-upजो तत्व को छिपाने जब व्यूपोर्ट दिया ब्रेकपाइंट या व्यापक पर है।hidden-*-down जब तत्व दिए गए ब्रेकपॉइंट या छोटे पर होता है तो तत्व को छिपाते हैं।इसके अलावा, नए xlव्यूपोर्ट को उन उपकरणों के लिए जोड़ा जाता है जो 1200px से अधिक चौड़ाई के हैं। अधिक जानकारी के लिए यहां क्लिक करें ।
d-block d-md-noneमध्यम, बड़े और अतिरिक्त बड़े उपकरणों को छिपाने के लिए ।
d-none d-md-blockछोटे और अतिरिक्त-छोटे उपकरणों पर छिपाने के लिए ।
ध्यान दें कि आप भी बदल कर इनलाइन कर सकते हैं d-*-blockसाथd-*-inline-block
पुराना उत्तर: बूटस्ट्रैप 4 अल्फा
आप .hidden-*-upकिसी दिए गए आकार और बड़े उपकरणों पर छिपाने के लिए कक्षाओं का उपयोग कर सकते हैं
.hidden-md-upमध्यम, बड़े और अतिरिक्त बड़े उपकरणों को छिपाने के लिए ।
वही .hidden-*-downदिए गए आकार और छोटे उपकरणों पर छिपाने के लिए जाता है
.hidden-md-downमध्यम, छोटे और अतिरिक्त-छोटे उपकरणों को छिपाने के लिए
दृश्यमान * बूटस्ट्रैप 4 के साथ एक विकल्प नहीं रह गया है
केवल मध्यम उपकरणों पर प्रदर्शित करने के लिए , आप दो को जोड़ सकते हैं:
hidden-sm-downतथाhidden-xl-up
मान्य आकार हैं:
xs पोर्ट्रेट मोड में फोन के लिए (<34em)sm लैंडस्केप मोड में फोन के लिए ()34em)md गोलियों के लिए (tablets48em)lg डेस्कटॉप के लिए (t62em)xl डेस्कटॉप के लिए (em75em)यह बूटस्ट्रैप 4, अल्फा 5 (जनवरी 2017) के रूप में था। यहाँ अधिक जानकारी: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
बूटस्ट्रैप पर 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/
.d-विभिन्न आकारों में छिपाने या दिखाने के लिए कक्षाओं का उपयोग करते हैं। getbootstrap.com/docs/4.0/utilities/display
d-none d-md-block। code.luasoftware.com/tutorials/bootstrap/…
बूटस्ट्रैप 4.x उत्तर
hidden-* कक्षाएं बूटस्ट्रैप 4 बीटा आगे से हटा दी जाती हैं।
यदि आप मध्यम और ऊपर की d-*कक्षाओं को दिखाना चाहते हैं, जैसे:
<div class="d-none d-md-block">This will show in medium and up</div>यदि आप इसे केवल छोटे और नीचे उपयोग में दिखाना चाहते हैं:
<div class="d-block d-md-none"> This will show only in below medium form factors</div>स्क्रीन का आकार और कक्षा चार्ट
| Screen Size | Class |
|--------------------|--------------------------------|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-block |
| Visible only on xs | .d-block .d-sm-none |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block |स्पष्ट
.visible-*कक्षाओं का उपयोग करने के बजाय , आप एक तत्व को उस स्क्रीन के आकार में छिपाकर नहीं देखते हैं। आप एक.d-*-noneवर्ग को एक वर्ग के साथ जोड़कर.d-*-blockकिसी तत्व को केवल स्क्रीन आकार के अंतराल पर दिखा सकते हैं (जैसे.d-none.d-md-block.d-xl-noneतत्व को केवल मध्यम और बड़े उपकरणों पर दिखाता है)।
आप किसी भी मॉड्यूल को बेहतर नियंत्रण के लिए इन मॉड्यूल वर्ग प्रत्ययों को दर्ज कर सकते हैं जहां यह दिखाएगा या छिपा होगा।
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop http://twitter.github.com/bootstrap/scaffolding.html नीचे स्क्रॉल करें
यहाँ जोड़ने के लिए मेरे पास कुछ स्पष्टीकरण हैं:
1) दिखाई गई सूची (दृश्य-फोन, दृश्य-टैबलेट, आदि) बूटस्ट्रैप 3 में पदावनत है। नए मूल्य इस प्रकार हैं:
तारांकन प्रत्येक के लिए निम्नलिखित में अनुवाद करता है (मैं केवल दृश्यमान- x- * नीचे दिखाता हूं):
2) जब आप इन वर्गों का उपयोग करते हैं, तो आप सामने एक अवधि नहीं जोड़ते हैं (जैसा कि ऊपर दिए गए उत्तर के भाग में भ्रमित रूप से दिखाया गया है)।
उदाहरण के लिए:
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>3) आप दृश्यमान- * और हिडन- * का उपयोग कर सकते हैं (उदाहरण के लिए, दृश्य-एक्स और छिपे हुए-एक्स) लेकिन इन्हें बूटस्ट्रैप 3.2.0 में चित्रित किया गया है।
अधिक जानकारी और नवीनतम चश्मे के लिए, यहां जाएं और "दृश्यमान" की खोज करें: http://getbootstrap.com/css/
hidden-xs-blockमान्य नहीं है, लेकिन visible-xs-blockहै
सभी hidden-*-up, hidden-*कक्षाएं मेरे लिए काम नहीं करती हैं, इसलिए मैं hiddenपहले स्व-निर्मित वर्ग जोड़ रहा हूं visible-*(जो वर्तमान बूटस्ट्रैप संस्करण के लिए काम करता है)। यह बहुत उपयोगी है अगर आपको केवल एक स्क्रीन के लिए डिव दिखाने की जरूरत है, और अन्य सभी के लिए छिपाएं।
सीएसएस:
.hidden {display:none;}HTML:
<div class="col-xs-12 hidden visible-xs visible-sm">
<img src="photo.png" style="width:100%">
</div>बूटस्ट्रैप 4.0 बीटा के लिए (और मुझे लगता है कि यह अंतिम स्थान पर रहेगा) एक बदलाव है - ध्यान रखें कि छिपे हुए वर्गों को हटा दिया गया था।
डॉक्स देखें: https://getbootstrap.com/docs/4.0/utilities/display/
मोबाइल पर सामग्री को छिपाने और बड़े उपकरणों पर प्रदर्शित करने के लिए आपको निम्नलिखित वर्गों का उपयोग करना होगा:
d-none d-sm-blockप्रथम श्रेणी के सेट पूरे उपकरणों में से कोई भी प्रदर्शित नहीं करते हैं और दूसरा इसे उपकरणों के लिए "sm" अप (आप अलग-अलग उपकरणों पर दिखाना चाहते हैं, तो sm के बजाय md, lg इत्यादि का उपयोग कर सकते हैं)।
मैं प्रवास से पहले उस बारे में पढ़ने का सुझाव देता हूं:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
बूस्ट्रैप 4.1 में (स्निपेट चलाएं क्योंकि मैंने बूटस्ट्रैप डॉक्यूमेंटेशन से पूरा टेबल कोड कॉपी किया है):
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}<table class="fixed_headers">
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements
.hidden-phoneऔर.hidden-tabletकर रहे हैं पदावनत ** - वे ** असमर्थित कर रहे हैं । पदावनत का अर्थ है, "अन्य दृष्टिकोणों से अलग कर दिया गया है, हालांकि अभी भी समर्थित है इसका उद्देश्य जल्द ही चरणबद्ध किया जाना है" । ऐसा प्रतीत होता है कि बूटस्ट्रैप 3.2.0- के साथ ऐसा ही है.visible-xsऔर अभी भी इसके लिए काम करता है, जबकि.hidden-phoneमित्र बूटस्ट्रैप की कार्यक्षमता से पूरी तरह अनुपस्थित हैं।