बदलें बटन पाठ स्वचालित रूप से स्क्रीन बूटस्ट्रैप के साथ आकार दिया जाता है 3

Question

पर विचार करें इस कोड:

एचटीएमएल

<div class="col-xs-3 col-sm-3"> 
    <button type="button" class="btn btn-default btn-md btn-block"> 
    <i class="fa fa-plus"></i> Add New Item</button> 
</div> 

सीएसएस

@media only screen and (max-width: 767px) { 
    button { 
     content: '<i class="fa fa-plus"></i>'; 
    } 
} 

आप स्क्रीन क्षैतिज आकार परिवर्तन तो , कुछ पल में पाठ से बाहर निकल जाएगा बटन।

मैं जानना चाहता हूं कि क्षैतिज स्क्रीन का आकार बदलते समय बटन टेक्स्ट को स्वचालित रूप से बदलना संभव है या नहीं। छोटे उपकरणों में केवल प्लस सिग्नल "+" के लिए "+ नया आइटम जोड़ें" जैसा कुछ।

मैं मीडिया प्रश्नों के साथ थोड़ा सा नोब हूं, इसलिए मुझे लगता है कि मुझे कुछ याद आ रही है या यह गलत है।

क्या कोई मेरी मदद कर सकता है?

मैंने इसे fiddle बनाया है।

Answer 1

इस काम के प्रदर्शन का प्रयास करें: JSFiddle।

बटन पाठ करने के लिए एक वर्ग जोड़ें, display:none सेट जब स्क्रीन आकार काफी छोटा है:

<button type="button" class="btn btn-default btn-md btn-block"> 
    <i class="fa fa-plus"></i> 
    <span class="button-text">Add New Item</span> 
</button> 

और सीएसएस:

@media screen and (max-width: 300px) { 
    .button-text { 
     display: none; 
    } 
} 

सुझाव: कभी नहीं DOM संरचना या सीएसएस शैलियों के अंदर जानकारी डाल । इसे बनाए रखना मुश्किल है।

Answer 2

मैंने 2 अलग-अलग बटन दिखाए और छिपाने के लिए एक बेवकूफ बनाया जो शायद सबसे अच्छा तरीका नहीं है, लेकिन हे, यह काम करता है।

http://jsfiddle.net/xo9xkv05/

एचटीएमएल

<div class="less"> 
    <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i></button> 
</div> 
<div class="more"> 
    <button type="button" class="btn btn-default btn-md btn-block"><i class="fa fa-plus"></i> Add New Item</button> 
</div> 

सीएसएस

.less { 
    display:none; 
} 
@media (max-width: 300px) { 
    .less { 
     display:block; 
    } 
    .more { 
     display:none; 
    } 
} 

Answer 3

आप सिर्फ एक और मीडिया क्वेरी बनाने (बिंदु जहां आपको लगता है पाठ बदलना चाहिए पर), और भीतर पाठ छिपाने बटन। जहां बटन है, उसे रखने के बजाय, इसे <span> में एन्सेप्लेट करें, फिर पेज कोसे none पर सेट करने के लिए कुछ सीएसएस लिखें, जब पृष्ठ x पिक्सल से छोटा हो रहा हो।

एचटीएमएल

<div class="col-xs-3 col-sm-3"> 
    <button type="button" class="btn btn-default btn-md btn-block"> 
    <i class="fa fa-plus"></i><span>Add New Item</span></button> 
</div> 

सीएसएस

@media only screen and (max-width: <change this value>) { 
    button span { 
     display: none; 
    } 
} 

---

हालांकि, मैं के बाद से वहाँ कोई रास्ता नहीं गारंटी नहीं है कि यह जा रहा है है इस jQuery के साथ हल किया जाना चाहिए लगता है यदि आप अन्य स्थानों पर बटन डालते हैं तो काम करने के लिए। आपको यह देखने की कोशिश करनी चाहिए कि बटन की सामग्री बटन की चौड़ाई से अधिक व्यापक है, फिर

मैंने आपके jsfiddle को थोड़ा सा संशोधित किया है, हालांकि, jQuery इस पर थोड़ी छोटी गाड़ी लग रहा है (समारोह में मानों मैं उपयोग कर रहा हूँ: प्रिंट करके देखें)

https://jsfiddle.net/ogt84jds/1/

Answer 4

आप बूटस्ट्रैप भीतर उत्तरदायी उपयोगिताओं में बनाया का उपयोग करके किसी भी अतिरिक्त मीडिया के प्रश्नों या CSS जोड़ने के बिना यह कर सकता है:

<div class="col-xs-3 col-sm-3"> 
    <button type="button" class="btn btn-default btn-md btn-block"> 
    <i class="fa fa-plus"></i><span class="hidden-sm hidden-xs">Add New Item</span></button> 
</div> 

यह थोड़ा और HTML मार्कअप लेता है, लेकिन अतिरिक्त डेटा या तो में जा रहा है एचटीएमएल, या सीएसएस में, जो भी आपके लिए सबसे अच्छा काम करता है।

Answer 5

यदि आप बूटस्ट्रैप का उपयोग करते हैं, तो यह दो वर्गों में घुसने जैसा आसान है।

hidden-sm और hidden-xs तत्व को स्क्रीन चौड़ाई क्रमशः मध्यम या छोटा होने पर तत्व को छुपाएं।

तो बस, जब आप स्क्रीन छोटी होती हैं तो आप छुपा होना चाहते हैं, बस उन वर्गों को लागू करें!

उदाहरण:

<button class="btn btn-primary"> 
    <span class="glyphicon glyphicon-person"></span> 
    <span class="hidden-xs hidden-sm">Profile</span> 
</button>