css - बूटस्ट्रैप में col-lg-*, col-md-*और col-sm-* के बीच क्या अंतर है?




twitter-bootstrap twitter-bootstrap-3 (6)

ट्विटर बूटस्ट्रैप में col-lg-* , col-lg-* और col-lg-* बीच क्या अंतर है?


अच्छी तरह से बूटस्ट्रैप को बताने के लिए प्रयोग किया जाता है कि स्क्रीन आकार के आधार पर पंक्ति में कितने कॉलम रखना है-

col-xs-2

अतिरिक्त छोटी (एक्सएस) स्क्रीन में एक पंक्ति में केवल 2 कॉलम दिखाएंगे, जैसे ही एसएम एक छोटी स्क्रीन, एमडी (मध्यम आकार), एलजी (बड़े आकार) को परिभाषित करता है, लेकिन बूटस्ट्रैप के अनुसार छोटे नियम के अनुसार, यदि आप उल्लेख करते हैं

xs-col-2 md-col-4

फिर स्क्रीन के आकारों की बेहतर समझ के लिए एमएस अप टू एलजी (शामिल) के लिए xs upto sm (शामिल) से स्क्रीन आकारों के लिए प्रत्येक पंक्ति में 2 कॉलम दिखाए जाएंगे और जब यह अगले आकार में आता है यानी एमडी अप टू एलजी (शामिल) के लिए स्क्रीन आकारों की बेहतर समझ के लिए उन्हें विभिन्न स्क्रीन मोड में चलाने का प्रयास करें क्रोम के डेवलपर मोड (सीटीआर + शिफ्ट + i) और विभिन्न पिक्सल या डिवाइस आज़माएं


एक विशेष मामला: बूटस्ट्रैप ग्रिड सिस्टम सीखने से पहले, सुनिश्चित करें कि ब्राउज़र ज़ूम 100% (सौ प्रतिशत) पर सेट है। उदाहरण के लिए: यदि स्क्रीन रेज़ोल्यूशन (1600px x 900px) है और ब्राउज़र ज़ूम 175% है, तो "बूटस्ट्रैप-पेड" तत्वों को ढंका जाएगा।

एचटीएमएल

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

क्रोम ज़ूम 100%

ब्राउज़र 100 प्रतिशत - तत्व क्षैतिज रखा गया है

क्रोम ज़ूम 175%

ब्राउज़र 175 प्रतिशत - ढेर तत्व


मुझे लगता है कि इसका भ्रमित पहलू यह तथ्य है कि बूटस्ट्रैप 3 एक मोबाइल पहली प्रतिक्रियाशील प्रणाली है और यह बूट करने के लिए विफल रहता है कि यह बूटस्ट्रैप दस्तावेज़ के उस हिस्से में col-xx-n पदानुक्रम को कैसे प्रभावित करता है। इससे आपको आश्चर्य होता है कि छोटे उपकरणों पर क्या होता है यदि आप बड़े उपकरणों के लिए मूल्य चुनते हैं और आपको आश्चर्य होता है कि एकाधिक मान निर्दिष्ट करने की आवश्यकता है या नहीं। (आप नहीं करते)

मैं यह बताकर इसे स्पष्ट करने का प्रयास करूंगा कि ... छोटे अनाज प्रकार (एक्सएस, एसएम) प्रयास छोटे स्क्रीन और लेआउट पर लेआउट उपस्थिति बनाए रखने के प्रयास (एमडी, एलजी) बड़ी स्क्रीन पर सही ढंग से प्रदर्शित होंगे लेकिन छोटे उपकरणों पर कॉलम लपेटेंगे। पिछले उदाहरणों में उद्धृत मान थ्रेसहोल्ड को संदर्भित करते हैं, जिसके रूप में बूटस्ट्रैप उपलब्ध स्क्रीन संपत्ति को फिट करने के लिए उपस्थिति को कम करता है।

अभ्यास में इसका क्या अर्थ है कि यदि आप स्तंभों को col-xs-n बनाते हैं तो वे बहुत छोटी स्क्रीन पर भी सही उपस्थिति बनाए रखेंगे, जब तक कि खिड़की उस आकार तक न हो जाए जो इतना प्रतिबंधित है कि पृष्ठ सही तरीके से प्रदर्शित नहीं किया जा सकता है। इसका मतलब यह होना चाहिए कि जिन उपकरणों की चौड़ाई 768 पीएक्स या उससे कम है, उन्हें अपनी तालिका को दिखाना चाहिए क्योंकि आपने इसे डिग्रेडेड (सिंगल या लिपटे कॉलम फॉर्म) के बजाय डिज़ाइन किया है। जाहिर है यह अभी भी कॉलम की सामग्री पर निर्भर करता है और यह पूरा बिंदु है। यदि पृष्ठ बड़े डेटा के एकाधिक कॉलम प्रदर्शित करने का प्रयास करता है, तो एक छोटी सी स्क्रीन पर तरफ से तरफ से कॉलम स्वाभाविक रूप से एक भयानक तरीके से लपेट जाएंगे यदि आपने इसके लिए कोई खाता नहीं लिया है। इसलिए, कॉलम के भीतर डेटा के आधार पर आप उस बिंदु को तय कर सकते हैं जिस पर लेआउट को पर्याप्त रूप से सामग्री प्रदर्शित करने के लिए अनुकूलित किया गया है।

उदाहरण के लिए यदि आपके पृष्ठ में तीन कॉल-एसएम-एन कॉलम बूटस्ट्रैप हैं तो कॉलम पंक्तियों में रैप करेगा जब पृष्ठ की चौड़ाई 992px से नीचे गिर जाएगी। इसका मतलब है कि डेटा अभी भी दिखाई दे रहा है लेकिन इसे देखने के लिए लंबवत स्क्रॉलिंग की आवश्यकता होगी। यदि आप अपने लेआउट को अपनाना नहीं चाहते हैं, तो xs चुनें (जब तक आपका डेटा तीन कॉलम में निचले रिज़ॉल्यूशन डिवाइस पर पर्याप्त रूप से प्रदर्शित किया जा सके)

यदि डेटा की क्षैतिज स्थिति महत्वपूर्ण है तो आपको दृश्य प्रकृति को बनाए रखने के लिए निम्न ग्रैन्युलरिटी मानों को चुनने का प्रयास करना चाहिए। यदि स्थिति कम महत्वपूर्ण है लेकिन पृष्ठ सभी उपकरणों पर दिखाई देना चाहिए तो उच्च मूल्य का उपयोग किया जाना चाहिए।

यदि आप col-lg-n चुनते हैं तो स्तंभ 1200px के xs थ्रेसहोल्ड के नीचे स्क्रीन चौड़ाई ड्रॉप होने तक सही ढंग से प्रदर्शित होंगे।



टी एल; डॉ

.col-XY अर्थ स्क्रीन आकार एक्स और ऊपर है , वाई तत्वों को भरने के लिए इस तत्व को खींचें

बूटस्ट्रैप प्रति कॉलम 12 कॉलम का ग्रिड प्रदान करता है, इसलिए वाई = 3 का अर्थ चौड़ाई = 25% है।

xs, sm, md, lg क्रमश: स्मार्टफोन, टैबलेट, लैपटॉप, डेस्कटॉप के आकार हैं।

विभिन्न स्क्रीन आकारों पर विभिन्न चौड़ाई निर्दिष्ट करने का बिंदु आपको छोटी स्क्रीन पर चीजों को बड़ा बनाने देता है।

उदाहरण

<div class="col-lg-6 col-xs-12">

मतलब: डेस्कटॉप पर 50% चौड़ाई, मोबाइल, टैबलेट और लैपटॉप पर 100% चौड़ाई।


डिवाइस आकार और कक्षा उपसर्ग:

  • अतिरिक्त छोटे डिवाइस फ़ोन (<768px) - .col-xs-
  • छोटे डिवाइस टैबलेट (≥768 पीएक्स) - .col-sm- sm-
  • मध्यम उपकरण डेस्कटॉप (≥992 पीएक्स) - .col-md- md-
  • बड़े उपकरण डेस्कटॉप (≥1200 पीएक्स) - .col-lg-

ग्रिड विकल्प:

संदर्भ: docs





bootstrap-4