बूटस्ट्रैप स्पैन

Question

मैंने हाल ही में ट्विटर बूटस्ट्रैप का उपयोग करना शुरू कर दिया है और मुझे लगता है कि स्पैन क्या करता है और स्पैन 4, span12 जैसे विभिन्न क्रमांकित स्पैन क्यों हैं? और ऑफसेट क्या हैं और उनका उपयोग कब किया जाता है? (कभी-कभी स्पैन के साथ प्रयोग किया जाता है) मैंने इसे ऑनलाइन खोजने की कोशिश की, लेकिन केवल बूटस्ट्रैप्स के बारे में विशिष्ट प्रश्न पाए।

Answer 1

बूटस्ट्रैप "काल" वर्गों bootstrap grid system में किया जाता है।

प्रलेखन, संख्या के साथ लेबल वाले स्तंभों से पता चलता प्रत्येक संख्या इस कंटेनर के लिए इस्तेमाल किया span वर्ग का प्रतिनिधित्व करता है। ऑफसेट अगले खंड में सही दिखाया गया है, वे परिभाषित करते हैं कि अवधि के बाईं ओर कितने खाली कॉलम होना चाहिए।

आप span4 offset2 "4 स्तंभों पर इस ब्लॉक का विस्तार, दो कॉलम बाईं ओर खाली छोड़ दें" के रूप में पढ़ सकते हैं।
डिफ़ॉल्ट रूप से 12 कॉलम हैं। यदि आपके पास span12 है, तो यह container (जो द्रव हो सकता है) के रूप में चौड़ा होगा।

Answer 2

सबसे पहले, वे <span> टैग नहीं हैं। (मैं इसका जिक्र करता हूं क्योंकि मैंने कुछ बार <span> टाइप करना शुरू कर दिया है!) वे एक पंक्ति के भीतर कॉलम चौड़ाई हैं।

http://twitter.github.com/bootstrap/scaffolding.html#gridSystem से

:

<div class="row"> 
<div class="span4">...</div> 
<div class="span8">...</div> 
</div> 

डॉक्स भी ऑफसेट चर्चा की।

Answer 3

22As तक मुझे पता है, यदि आप एक उत्तरदायी पेज लेआउट शैली करना चाहते हैं, तो आप भी कॉल-एलजी -2 उपयोग कर सकते हैं कि जैसे कुछ कक्षाएं, जब एक div मार्कअप, जैसे

<div class="col-lg-2 col-sm-3 col-xs-6"> some content </div> 

लेखन जो बड़ी, छोटी और अतिरिक्त छोटी स्क्रीन के लिए, कुछ सामग्री ऑन-स्क्रीन पर कितनी कॉलम रखती है, यह परिभाषित करेगी। बिंदु यह है कि आपके पास प्रति पंक्ति 12 कॉलम अधिकतम हैं, इसलिए आपकी सभी सामग्री को एक पंक्ति में सम्मान करना है। आपके पास

<row> 
<div class="col-lg-5">content1 </div> 
<div class="col-lg-6">content2 </div> 
<div class="col-lg-3">content3 </div> 
</row> 

क्योंकि यहां 14 बड़े कॉलम हैं। केवल xs कक्षाएं 24 में जोड़ने के लिए है, हालांकि

तो, अवधि एक ही चाल क्या करता है?