twitter-bootstrap
ग्रिड प्रणाली

परिचय

टिप्पणियों

मीडिया के प्रश्नों

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

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

कभी-कभी सीएसएस को उपकरणों के एक संकीर्ण सेट में सीमित करने के लिए अधिकतम-चौड़ाई को शामिल करने के लिए इनका विस्तार किया जाता है:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

बूटस्ट्रैप ग्रिड टियर्स (ब्रेकप्वाइंट)

स्तंभ इकाइयों की अवधारणा के अलावा, बूटस्ट्रैप में विभिन्न ब्रेकप्वाइंट या ग्रिड आकार होते हैं जिन्हें टियर्स कहा जाता है। बूटस्ट्रैप 3 ग्रिड में विभिन्न स्क्रीन (या व्यूपोर्ट) चौड़ाई को समायोजित करने के लिए चार (4) टीयर हैं। बूटस्ट्रैप 3 टियर xs , sm , md और lg । बूटस्ट्रैप के ग्रिड स्तंभों की पहचान अलग-अलग col-{breakpoint}-{units} द्वारा की जाती col-{breakpoint}-{units} सीएसएस क्लासेस।

प्रत्येक ग्रिड टीयर एक ऐसी सीमा को समाहित करता है जो कि डेस्कटॉप, लैपटॉप, टैबलेट और स्मार्टफ़ोन जैसी विशिष्ट डिवाइस स्क्रीन चौड़ाई के लिए सबसे उपयुक्त है।

बूटस्ट्रैप संवेदनशील ब्रेकपॉइंट बनाने के लिए सीएसएस मीडिया क्वेरी का उपयोग करता है जो प्रत्येक ग्रिड आकार के लिए एक सीमा स्थापित करता है। ये ग्रिड आकार आपको स्तंभों के लेआउट को अलग-अलग स्क्रीन चौड़ाई और डिवाइस से मेल खाने के लिए सक्षम करते हैं। उत्तरदायी डिजाइन का सार।

• col-xs-* - स्मार्टफोन जैसी छोटी स्क्रीन की चौड़ाई के लिए <768 px
• col-sm-* - स्मार्टफोन और टैबलेट जैसे छोटे स्क्रीन चौड़ाई के लिए> = 768 पीएक्स
• col-md-* - टैबलेट और लैपटॉप जैसी मध्यम स्क्रीन चौड़ाई के लिए> = 992 px
• col-lg-* - बड़ी स्क्रीन चौड़ाई जैसे डेस्कटॉप के लिए> = 1200 px

संदर्भ: ग्रिड सिस्टम

प्रत्येक डिवाइस के लिए एक ही कॉलम की चौड़ाई

एक कॉलम बनाने के लिए जो व्यूपोर्ट चौड़ाई का हमेशा 50% है (सभी डिवाइसों पर) आप हर t .. के लिए col-*-6 सेट कर सकते हैं।

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>

हालाँकि, यह आवश्यक अतिरिक्त मार्कअप है, क्योंकि col-xs-6 अर्थ है xs और up पर 6 इकाइयाँ। आपके द्वारा सेट किया गया सबसे छोटा टियर (xs, sm या md) भी बड़े स्क्रीन चौड़ाई के लिए आकार को परिभाषित करता है। सभी स्तरों पर समान आकार के कॉलम के लिए, बस सबसे छोटे व्यूपोर्ट के लिए चौड़ाई निर्धारित करें।

कम कोड:

<div class="col-xs-6">..</div>

प्रत्येक डिवाइस के लिए अलग कॉलम चौड़ाई (उत्तरदायी डिजाइन)

col-*-* वर्गों को विभिन्न ग्रिड आकारों पर स्तंभ की चौड़ाई को नियंत्रित करने के लिए जोड़ा जा सकता है।

उदाहरण के लिए, sm tier पर 50% चौड़ाई वाला स्तंभ और md tier पर 25% चौड़ाई वाला स्तंभ बनाएँ ...

<div class="col-md-3 col-sm-6">..</div>

sm , md और lg ग्रिड सभी "स्टैक" को व्यूपोर्ट चौड़ाई पर 768 पिक्सेल से कम में खड़ी करेंगे। यह वह जगह है जहाँ xs ग्रिड फिट बैठता है। Columns जो col-xs- * वर्गों का उपयोग करते हैं, वे लंबवत रूप से स्टैक नहीं होंगे और छोटी स्क्रीन पर बड़े पैमाने पर जारी रहेंगे।

बूटस्ट्रैप पंक्तियाँ और कॉलम

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

12-यूनिट ग्रिड (10, 16, आदि के बजाय) का कारण यह है कि 12 समान रूप से 6 (आधा), 4 (क्वार्टर) और 3 (तिहाई) में विभाजित है। यह विभिन्न प्रकार के लेआउट को आसान बनाता है। बूटस्ट्रैप के ग्रिड स्तंभों की पहचान अलग-अलग col-{breakpoint}-{units} द्वारा की जाती col-{breakpoint}-{units} सीएसएस क्लासेस। व्यूपोर्ट की चौड़ाई और ब्रेकप्वाइंट (AKA Tiers) के बारे में अधिक जानें

इसलिए, उदाहरण के लिए, col-md-3 एक कॉलम का प्रतिनिधित्व करता है जो मध्यम ( md ) चौड़ाई व्यूपोर्ट के पार 12 इकाइयों (या 25%) में से 3 लेता है। अपने लेआउट में एक कॉलम की चौड़ाई का उपयोग करने के लिए, बस अपने HTML मार्कअप में उपयुक्त col-{breakpoint}-{units} वर्ग का उपयोग करें।

<div class="col-{breakpoint}-{units}">

कॉलम की चौड़ाई द्रव है (निश्चित चौड़ाई नहीं), इसलिए कॉलम उनके कंटेनर का एक प्रतिशत खपत करते हैं।

बूटस्ट्रैप 3 में कॉलम इकाइयां

• col-*-1 : १२ का (*.३३३३३३३३% चौड़ाई)
• col-*-2 : 2 of 12 (16.66666667% चौड़ाई)
• col-*-3 : 12 की 3 (25% चौड़ाई)
• col-*-4 : १२ का १२ (३३.३३३३३३३% चौड़ाई)
• col-*-5 : 5 12 का (41.66666667% चौड़ाई)
• col-*-6 : 12 का 6 (50% चौड़ाई)
• col-*-7 : 7 of 12 (58.33333333% चौड़ाई)
• col-*-8 : 12 की 8 (66.66666667% चौड़ाई)
• col-*-9 : ९ १२ (:५% चौड़ाई)
• col-*-10 : 10 की 12 (83.33333333% चौड़ाई)
• col-*-11 : 12 की 11 (91.66666667% चौड़ाई)
• col-*-12 : 12 की 12 (100% चौड़ाई)

डेमो - बूटस्ट्रैप की 12 कॉलम इकाइयाँ

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

बूटस्ट्रैप .row वर्ग का उपयोग कॉलम को समाहित करने के लिए किया जाता है। कॉलम को हमेशा पंक्तियों में रखा जाना चाहिए, और पंक्तियों को हमेशा एक कंटेनर ( container या container-fluid ) के अंदर रखा जाना चाहिए। पंक्ति की सामग्री और ब्राउज़र के किनारे के बीच उचित अंतर सुनिश्चित करने के लिए पंक्ति नकारात्मक मार्जिन (-15px) का उपयोग करती है। पंक्तियों का उपयोग क्षैतिज रूप से समूह स्तंभों के लिए किया जाता है।

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

कॉलम को भरने जाएगा .row क्षैतिज बाएँ-से-सही होगा, और लपेट एक नई लाइन के लिए हर 12 स्तंभ इकाइयों। इसलिए, आप क्षैतिज विराम बनाने के लिए .row s का उपयोग कर सकते हैं, या आप एकल .row तत्व में 12 से अधिक स्तंभ इकाइयाँ जोड़ सकते हैं, जिसमें व्यूपोर्ट के नीचे स्तंभ (या स्टैक) खड़े हों।

कॉलम रैपिंग (एक .row में 12 से अधिक .row ) का उपयोग करते समय , आपको असमान कॉलम कंटेंट की रैपिंग सुनिश्चित करने के लिए उत्तरदायी रीसेट (या .row ) का उपयोग करना होगा। यह आवश्यक है जब कॉलम की सामग्री ऊंचाई में भिन्न होती है।

बूटस्ट्रैप ग्रिड कॉलम और पंक्तियों पर अधिक

बूटस्ट्रैप 3 द्रव ग्रिड लेआउट मुद्दे?

बूटस्ट्रैप 3 - नेस्टेड पंक्ति मैं कॉलम को 12 से अधिक तक जोड़ सकता है?

बूटस्ट्रैप पंक्ति और कर्नल स्पष्टीकरण

बूटस्ट्रैप ग्रिड कैसे काम करती है (मध्यम)

कंटेनर

बूटस्ट्रैप के लिए साइट सामग्री को लपेटने और हमारे ग्रिड सिस्टम को घर में रखने के लिए एक तत्व की आवश्यकता होती है। आप अपनी परियोजनाओं में उपयोग करने के लिए दो में से एक कंटेनर चुन सकते हैं।

उत्तरदायी निश्चित चौड़ाई के कंटेनर के लिए .container वर्ग का उपयोग करें।

<div class="container">
  ...
</div>

एक पूर्ण चौड़ाई वाले कंटेनर के लिए .container-fluid क्लास का उपयोग करें, जो आपके व्यूपोर्ट की पूरी चौड़ाई को फैलाए।

<div class="container-fluid">
  ...
</div>

नोट: कंटेनर पेडिंगेबल नहीं हैं (आप एक कंटेनर के अंदर कंटेनर नहीं रख सकते हैं), padding और अधिक के कारण।

परेशान करने वाले कॉलम

ये कक्षाएं एक कॉलम के बाएं मार्जिन को * कॉलम से बढ़ाती हैं। उदाहरण के लिए, .col-md-ऑफ़सेट-4 में चार कॉलम में .col-md-4 चलता है।

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
  <div class="col-lg-5 col-lg-offset-1"></div>
  <div class="col-lg-5 col-lg-offset-1"></div>
</div>

पुश और पुल का उपयोग करके स्तंभ क्रम हेरफेर

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

यह अंतर्निहित ग्रिड कॉलम के क्रम को बदल देता है।

सिंटेक्स: .col-md-push- * और .col-md-pull- *।

अधिक:
ट्विटर बूटस्ट्रैप 3 में कोल-एलजी-पुश और कोल-एलजी-पुल का उपयोग करके कॉलम ऑर्डर हेरफेर
बूटस्ट्रैप 3: छोटे स्क्रीन साइज पर ही कॉलम को पुश / पुल करें
बूटस्ट्रैप 3 में कॉलम ऑर्डरिंग और स्टैकिंग