मेरे पास div div कैसे हो सकता है जैसे कि यह बूटस्ट्रैप के साथ एक अलग डिवाइस पर था?

Question

मैं एक ट्विटर बूटस्ट्रैप एप्लिकेशन बनाने की कोशिश कर रहा हूं जो एक div प्रदर्शित करता है जो हमारे एसपीए में विभिन्न डिवाइस आकारों (डेस्कटॉप, टैबलेट, मोबाइल) पर एक एप्लिकेशन दिखाता है जिसमें बाहरी और बाहर मौजूद कार्यक्षमता के साथ संवाद करने की आवश्यकता होती है। निर्दिष्ट आकार पर क्लिक करते समय, div का आकार बदलना चाहिए। इस तरह:

बूटस्ट्रैप ब्रेक अंक मीडिया क्वेरी, जो खिड़की के स्तर पर हैं बंद आधारित हैं। लेकिन मैं इस काम को एक div पर बनाने की कोशिश कर रहा हूं। यदि हम div स्तर पर एक कंटेनर निर्दिष्ट करते हैं, तो ग्रिड लंबवत रूप से ढेर नहीं होगा जैसे कि यदि आप विंडो का आकार बदलते हैं, तो वे बस सिकुड़ते हैं।

कठिन समस्या तो यह पहले की तरह लगता है। :(इस बारे में कोई विचार कैसे है?

सबसे आसान जवाब एक आईफ्रेम है, ताकि आईफ्रेम का आकार आकार बदल जाए क्योंकि div परिवर्तन आकार और ग्रिड ढेर सही ढंग से बदलते हैं, लेकिन यह आदर्श नहीं है क्योंकि कार्यक्षमता हमारे अस्तित्व में है बाहर से और div अंदर एसपीए।

मैं इस से निपटने के लिए एक बेहतर समाधान सुनवाई पसंद करता है!

Answer 1

वैसे आप उस के लिए JQuery का उपयोग कर सकते हैं, या आप भी गतिशील बंधन है, जो उपयोग करने के लिए सक्षम बनाता है के लिए नॉकआउट पुस्तकालय का उपयोग कर सकते इसे प्राप्त करने के लिए कस्टम बाइंडिंग। यहां मैं जो करूँगा वह है नॉकआउट बाइंडिंग

<div id="devices"> It can have bindings which can have the values desktop, tablet & mobile<div> 
<div id="leftDiv">Some Code...<div> 
<div id="mainDiv">View<div> 

• मैं आईडी = "डिवाइस" के साथ div टैग जो कुछ भी यह {डेस्कटॉप, टेबलेट, मोबाइल} है और गुण कस्टम बाइंडिंग में परिभाषित से पहुंच सकते हैं से मूल्य पढ़ा जाएगा

• दूसरी बात कुछ लागू करता है, तो आवश्यक कार्यों को करने के लिए शर्तें।

  $ ("# mainDiv")। सीएसएस ( अपना सीएसएस लागू करें);

प्रत्येक परिस्थितियों के लिए। सीएसएस में id = "mainDiv" के साथ div को आकार देने के लिए आप कभी भी सीएसएस को लागू करना चाहते हैं।

Answer 2

खैर, बूटस्ट्रैप केवल सीएसएस और कम और एसएएसएस में लिखा गया कुछ जेएस है ताकि आप बूटस्ट्रैप फ़ाइल के कम/SASS संस्करण को संशोधित कर सकें और सभी मीडिया प्रश्नों को कक्षा के नाम से बदल सकें। कम पूर्वप्रक्रमक एक वाक्य रचना है, जो, निम्नलिखित कम घोषणा घोंसला सीएसएस घोषणा करने के लिए आप की अनुमति देता है, उदाहरण के लिए है:

.mobile { 
    .foo { ... } 
    .bar { ... } 
} 

सीएसएस के बराबर है:

.mobile .foo { ... } 
.mobile .bar { ... } 

एक बार जब आप के साथ मीडिया के प्रश्नों से बदल दिया है सीएसएस क्लास, आपको कुछ जावास्क्रिप्ट की आवश्यकता होगी जो कक्षाओं को उन तत्वों में जोड़ती है जिनके बच्चों को आप जो भी मीडिया क्वेरी चाहते हैं उसे नकली करना चाहते हैं।

अतिरिक्त विश्वसनीयता के लिए, ताकि शैलियों को आसपास के पृष्ठ पर रिसाव न हो, आप स्कोप्ड सीएसएस का उपयोग करना चाहेंगे, लेकिन browser support for scoped CSS इस चरण में अपमानजनक है।

Answer 3

अच्छी बूटस्ट्रैप में divs के लिए अलग-अलग कॉलम आकार हैं। .col-xs- .col-sm- .col-md-।col-lg- xSmall और छोटे और मध्यम और बड़े। ये आपके div के लिए कक्षाएं हैं।

Answer 4

jQuery आपकी समस्या का आसान, तेज़ और सबसे अच्छा समाधान है। आप

$("#idForSize").click(function(){ 
    $("#idForDiv").css({'height','20px','width','30px'}); 
});