ग्रिड सिस्टम के बारे में बतावल गइल बा

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

कइसे काम करेला

बूटस्ट्रैप के ग्रिड सिस्टम में सामग्री के लेआउट आ संरेखित करे खातिर कंटेनर, पंक्ति आ कॉलम सभ के एगो श्रृंखला के इस्तेमाल होला। इ फ्लेक्सबॉक्स के संगे बनल बा अवरू इ पूरा तरीका से रिस्पांसिव बा। नीचे एगो उदाहरण दिहल गइल बा आ गहिराह नजर डालल गइल बा कि ग्रिड कइसे एक साथ आवेला.

फ्लेक्सबॉक्स में नया बानी कि अपरिचित बानी? बैकग्राउंड, शब्दावली, गाइडलाइन, आ कोड स्निपेट खातिर ई CSS Tricks flexbox गाइड पढ़ीं .

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

उपर दिहल उदाहरण हमनी के पहिले से परिभाषित ग्रिड क्लास सभ के इस्तेमाल से छोट, मध्यम, बड़, आ अतिरिक्त बड़हन डिवाइस सभ पर तीन गो बराबर चौड़ाई वाला कॉलम बनावे ला। ऊ कॉलम पन्ना में केंद्रित बा जवना में अभिभावक .containerबा .

एकरा के तोड़ के देखल जाव त ई कइसे काम करेला:

• कंटेनर रउरा साइट के सामग्री के केंद्र आ क्षैतिज रूप से पैड करे के एगो साधन उपलब्ध करावेला. रिस्पांसिव पिक्सेल चौड़ाई खातिर .containerया सभ व्यूपोर्ट आ डिवाइस साइज सभ के पार खातिर इस्तेमाल करीं ।.container-fluidwidth: 100%
• पंक्ति कॉलम खातिर रैपर होला। हर स्तंभ में क्षैतिज padding(जेकरा के गटर कहल जाला) होला जेह से कि इनहन के बीच के जगह के नियंत्रित कइल जा सके। एकरे paddingबाद एकर प्रतिकार नकारात्मक हाशिया वाला पंक्ति सभ पर कइल जाला। एह तरह से रउरा कॉलम में मौजूद सगरी सामग्री के बाईं ओर नीचे दृष्टिगत रूप से संरेखित कइल जाला.
• ग्रिड लेआउट में सामग्री के कॉलम सभ के भीतर रखल जरूरी बा आ खाली कॉलम सभ पंक्ति सभ के तत्काल संतान हो सके लें।
• फ्लेक्सबॉक्स के बदौलत, बिना निर्दिष्ट ग्रिड कॉलम सभ widthके स्वचालित रूप से बराबर चौड़ाई वाला कॉलम के रूप में लेआउट हो जाई। उदाहरण खातिर, चार गो उदाहरण के .col-smहर एक स्वचालित रूप से छोट ब्रेकपॉइंट से आ ऊपर 25% चौड़ा हो जाई। अउरी उदाहरण खातिर ऑटो-लेआउट कॉलम सभ के खंड देखल जाय ।
• कॉलम क्लास सभ में ई बतावे ला कि रउआँ प्रति पंक्ति संभावित 12 में से कतना कॉलम के इस्तेमाल कइल चाहत बानी। त, अगर रउआ तीन गो बराबर चौड़ाई वाला कॉलम के पार चाहत बानी त रउआ .col-4.
• कॉलम widths के प्रतिशत में सेट कइल जाला, एह से ई हमेशा अपना मूल तत्व के सापेक्ष तरल आ आकार के होलें।
• paddingकॉलम सभ में अलग-अलग कॉलम सभ के बीच गटर बनावे खातिर क्षैतिज होला , हालाँकि, आप marginपंक्ति सभ paddingसे आ कॉलम सभ से .no-guttersपर के साथ हटा सकत बानी .row।
• ग्रिड के रिस्पांसिव बनावे खातिर, पाँच गो ग्रिड ब्रेकपॉइंट होलें, हर रिस्पांसिव ब्रेकपॉइंट खातिर एक ठो : सभ ब्रेकपॉइंट (अतिरिक्त छोट), छोट, मध्यम, बड़हन, आ अतिरिक्त बड़हन।
• ग्रिड ब्रेकपॉइंट न्यूनतम चौड़ाई वाला मीडिया क्वेरी सभ पर आधारित होलें, मने कि ई ओह एक ठो ब्रेकपॉइंट आ एकरे ऊपर के सभ लोग पर लागू होला (उदाहरण खातिर, .col-sm-4छोट, मध्यम, बड़, आ अतिरिक्त बड़हन डिवाइस सभ पर लागू होला, बाकी पहिला xsब्रेकपॉइंट पर ना)।
• रउआँ पहिले से परिभाषित ग्रिड क्लास (जइसे कि .col-4) या सास मिक्सिन के इस्तेमाल अउरी सिमेंटिक मार्कअप खातिर कर सकत बानी।

फ्लेक्सबॉक्स के आसपास के सीमा आ बग के बारे में जागरूक रहीं , जइसे कि कुछ एचटीएमएल तत्वन के फ्लेक्स कंटेनर के रूप में इस्तेमाल करे में असमर्थता .

ग्रिड के विकल्प बा

जबकि बूटस्ट्रैप ज्यादातर साइज सभ के परिभाषित करे खातिर ems या s के इस्तेमाल करे ला, s के इस्तेमाल ग्रिड ब्रेकपॉइंट आ कंटेनर चौड़ाई खातिर कइल जाला। एकर कारण बा कि व्यूपोर्ट के चौड़ाई पिक्सेल में होला आ फॉन्ट साइज के साथे ना बदलेला .rempx

देखल जाव कि बूटस्ट्रैप ग्रिड सिस्टम के पहलू कइसे एगो सुलभ टेबल के साथ कई गो डिवाइस सभ पर काम करे लें।

ऑटो-लेआउट कॉलम के बा

बिना कवनो स्पष्ट नंबर वाला क्लास के आसान कॉलम साइजिंग खातिर ब्रेकपॉइंट-विशिष्ट कॉलम क्लास के उपयोग करीं जइसे कि .col-sm-6.

बराबर-चौड़ाई के बा

उदाहरण खातिर, इहाँ दू गो ग्रिड लेआउट दिहल गइल बा जे हर डिवाइस आ व्यूपोर्ट पर लागू होला, से xsले के xl. हर ब्रेकपॉइंट खातिर कवनो संख्या में यूनिट-लेस क्लास जोड़ीं जवना के जरूरत बा आ हर कॉलम के चौड़ाई एके होखी.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

बराबर चौड़ाई वाला कॉलम सभ के कई लाइन सभ में तोड़ल जा सके ला, बाकी सफारी फ्लेक्सबॉक्स बग रहल जे एकरा के बिना कौनों स्पष्ट flex-basisया border. पुरान ब्राउजर संस्करण सभ खातिर वर्कअराउंड बा, बाकी अगर आप अप-टू-डेट बानी त ई जरूरी ना होखे के चाहीं।

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

एक कॉलम के चौड़ाई सेट कइल जा रहल बा

फ्लेक्सबॉक्स ग्रिड कॉलम सभ खातिर ऑटो-लेआउट के मतलब ई भी बा कि आप एक कॉलम के चौड़ाई सेट क सकत बानी आ एकरे आसपास भाई-बहिन के कॉलम सभ के आकार स्वचालित रूप से बदल सकत बानी। रउआँ पहिले से परिभाषित ग्रिड क्लास (जइसे कि नीचे देखावल गइल बा), ग्रिड मिक्सिन, या इनलाइन चौड़ाई के इस्तेमाल कर सकत बानी। ध्यान दीं कि बाकी कॉलम सभ के आकार बदल जाई चाहे केंद्र कॉलम के चौड़ाई केतना भी होखे।

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

चर चौड़ाई सामग्री के बा

col-{breakpoint}-autoकॉलम सभ के सामग्री के प्राकृतिक चौड़ाई के आधार पर आकार देवे खातिर क्लास सभ के इस्तेमाल करीं।

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

बराबर-चौड़ाई के बहु-पंक्ति के बा

बराबर चौड़ाई वाला कॉलम बनाईं जे कई गो पंक्ति सभ में बिस्तार लिहले होखे आ .w-100जहाँ रउआँ चाहत बानी कि कॉलम सभ के नया लाइन में टूटे के चाहीं। .w-100कुछ रिस्पांसिव डिस्प्ले यूटिलिटीज के साथ के मिला के ब्रेक के रिस्पांसिव बनाईं .

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

रिस्पांसिव क्लास के बा

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

सब ब्रेकपॉइंट बा

ग्रिड सभ खातिर जे सभसे छोट डिवाइस से ले के सभसे बड़ डिवाइस सभ के एकही होखे, .colआ .col-*क्लास सभ के इस्तेमाल करीं। जब रउआँ के कौनों खास साइज के कॉलम के जरूरत होखे तब कौनों नंबर वाला क्लास निर्दिष्ट करीं; ना त बेझिझक के .col.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

क्षैतिज तक ढेर हो गइल बा

क्लास सभ के एकल सेट के इस्तेमाल से .col-sm-*, आप एगो बेसिक ग्रिड सिस्टम बना सकत बानी जे छोट ब्रेकपॉइंट ( sm) पर के साथ क्षैतिज होखे से पहिले ढेर हो के शुरू हो जाला।

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

मिक्स आ मैच करीं

नइखीं चाहत कि राउर कॉलम बस कुछ ग्रिड टीयर में ढेर होखे? जरूरत के हिसाब से हर टीयर खातिर अलग-अलग क्लास के संयोजन के इस्तेमाल करीं। ई सब कइसे काम करेला एकर बेहतर विचार खातिर नीचे दिहल उदाहरण देखीं।

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

संरेखण के बा

कॉलम सभ के लंबवत आ क्षैतिज रूप से संरेखित करे खातिर फ्लेक्सबॉक्स संरेखण उपयोगिता सभ के इस्तेमाल करीं।

ऊर्ध्वाधर संरेखण के बा

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

क्षैतिज संरेखण के बा

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ना गटर ना होखे

हमनी के पूर्व परिभाषित ग्रिड क्लास में कॉलम के बीच के गटर के .no-gutters. एह से सभ तत्काल बच्चा कॉलम से नकारात्मक margins .rowआ क्षैतिज के हटा दिहल जाला।padding

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

एज-टू-एज डिजाइन के जरूरत बा? माता-पिता के छोड़ दीं .containerभा .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

व्यवहार में देखल जाव त ई कइसे लउकत बा. ध्यान दीं कि आप एकर इस्तेमाल बाकी सभ पहिले से परिभाषित ग्रिड क्लास सभ के साथ जारी रख सकत बानी (जवना में कॉलम के चौड़ाई, रिस्पांसिव टीयर, रिऑर्डर आ अउरी बहुत कुछ भी सामिल बा)।

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

कॉलम के लपेटे के बा

अगर एकही पंक्ति के भीतर 12 से ढेर कॉलम सभ के रखल जाय तब अतिरिक्त कॉलम सभ के हर समूह, एक इकाई के रूप में, एगो नया लाइन पर लपेट जाई।

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

कॉलम टूट जाला

फ्लेक्सबॉक्स में कॉलम के नया लाइन में तोड़े खातिर एगो छोट हैक के जरूरत होला: width: 100%जहाँ भी रउआ आपन कॉलम के नया लाइन में लपेटल चाहत बानी ओकरा साथे एगो तत्व जोड़ीं। आमतौर पर ई कई गो .rows के साथ पूरा होला, बाकी हर कार्यान्वयन तरीका एकर लेखाजोखा ना दे सके ला।

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

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

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

रउआ हमनी के रिस्पांसिव डिस्प्ले यूटिलिटीज के साथ विशिष्ट ब्रेकपॉइंट पर भी एह ब्रेक के लागू कर सकेनी .

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

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

फेर से क्रमबद्ध कइल जा रहल बा

क्लास के ऑर्डर दिहल जाव

अपना सामग्री के दृश्य क्रम.order- के नियंत्रित करे खातिर कक्षा के इस्तेमाल करीं . ई क्लास रिस्पांसिव होलें, एह से रउआँ बाय ब्रेकपॉइंट (उदाहरण खातिर, ) सेट क सकत बानी। पांचों ग्रिड टीयर के पार के माध्यम से के समर्थन शामिल बा ।order.order-1.order-md-2112

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

एकरे अलावा रिस्पांसिव .order-firstआ क्लास भी बाड़ें जे क्रम से आ ( ) के लागू क के कौनों तत्व के .order-lastबदले लें । एह क्लास सभ के जरूरत के हिसाब से नंबर दिहल क्लास सभ के साथ भी इंटरमिक्स कइल जा सके ला ।orderorder: -1order: 13order: $columns + 1.order-*

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

कॉलम के ऑफसेट कइल जा रहल बा

रउआ ग्रिड कॉलम के दू तरीका से ऑफसेट कर सकेनी: हमनी के रिस्पांसिव .offset-ग्रिड क्लास आ हमनी के मार्जिन यूटिलिटीज . ग्रिड क्लास सभ के साइज कॉलम सभ से मेल खाए खातिर कइल जाला जबकि मार्जिन सभ के क्विक लेआउट सभ खातिर ढेर उपयोगी होला जहाँ ऑफसेट के चौड़ाई चर होला।

ऑफसेट क्लास के बा

.offset-md-*क्लास के इस्तेमाल से कॉलम के दाहिने ओर ले जाईं । ई क्लास सभ कौनों कॉलम के बाईं ओर के मार्जिन के कॉलम से बढ़ा *देलें। जइसे कि चार गो कॉलम पर .offset-md-4चलत बा..col-md-4

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

रिस्पांसिव ब्रेकपॉइंट पर कॉलम क्लियरिंग के अलावा, रउआँ के ऑफसेट सभ के रीसेट करे के जरूरत पड़ सके ला। ग्रिड उदाहरण में एकरा के एक्शन में देखल जाव .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

मार्जिन के उपयोगिता के बारे में बतावल गइल बा

v4 में flexbox पर जाए के साथ, आप मार्जिन उपयोगिता के इस्तेमाल कर सकत बानी जइसे .mr-autoकि भाई-बहिन के कॉलम के एक दूसरा से दूर करे खातिर मजबूर कइल।

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

घोंसला बनावे के काम होला

डिफ़ॉल्ट ग्रिड के साथ आपन सामग्री के नेस्ट करे खातिर, कौनों मौजूदा कॉलम के भीतर एगो नया .rowआ कॉलम सभ के सेट जोड़ीं । नेस्टेड पंक्ति सभ में कॉलम सभ के सेट होखे के चाहीं जे 12 या एकरे से कम जोड़ के होखे (जरुरी नइखे कि आप सभ 12 गो उपलब्ध कॉलम सभ के इस्तेमाल करीं)।.col-sm-*.col-sm-*

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

सस मिक्सिन के बा

बूटस्ट्रैप के स्रोत Sass फाइल सभ के इस्तेमाल करत समय, रउआँ लगे कस्टम, सिमेंटिक, आ रिस्पांसिव पन्ना लेआउट बनावे खातिर Sass चर आ मिक्सिन सभ के इस्तेमाल करे के विकल्प बा। हमनी के पहिले से परिभाषित ग्रिड क्लास सभ एही चर आ मिक्सिन सभ के इस्तेमाल तेजी से रिस्पांसिव लेआउट सभ खातिर रेडी-टू-यूज क्लास सभ के पूरा सूट उपलब्ध करावे खातिर करे लीं।

चर के बारे में बतावल गइल बा

चर आ नक्शा सभ कॉलम सभ के संख्या, गटर के चौड़ाई आ मीडिया क्वेरी बिंदु के निर्धारण करे लें जहाँ से फ्लोटिंग कॉलम सभ के सुरुआत कइल जाय। हमनी के इनहन के इस्तेमाल ऊपर दस्तावेज कइल गइल पहिले से परिभाषित ग्रिड क्लास सभ के जनरेट करे खातिर करे लीं, साथ ही नीचे दिहल गइल कस्टम मिक्सिन सभ खातिर भी।

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

मिक्सिन के नाम से जानल जाला

मिक्सिन सभ के इस्तेमाल ग्रिड चर सभ के साथ मिल के अलग-अलग ग्रिड कॉलम सभ खातिर सिमेंटिक सीएसएस पैदा कइल जाला।

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

उदाहरण के प्रयोग के बारे में बतावल गइल बा

रउआँ चर सभ के अपना कस्टम मान सभ में संशोधित क सकत बानी, या बस मिक्सिन सभ के डिफ़ॉल्ट मान सभ के साथ इस्तेमाल कर सकत बानी। इहाँ डिफ़ॉल्ट सेटिंग के इस्तेमाल से दू गो कॉलम वाला लेआउट बनावे के एगो उदाहरण दिहल गइल बा जेह में बीच में अंतराल बा।

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ग्रिड के अनुकूलित कइल जा रहल बा

हमनी के बिल्ट-इन ग्रिड Sass चर आ नक्शा के इस्तेमाल से, पहिले से परिभाषित ग्रिड क्लास सभ के पूरा तरीका से अनुकूलित कइल संभव बा। टीयर सभ के संख्या, मीडिया क्वेरी आयाम, आ कंटेनर के चौड़ाई बदलीं-फिर फिर से संकलित करीं।

स्तंभ आ नाली के बा

ग्रिड कॉलम के संख्या के सास चर के माध्यम से संशोधित कइल जा सकेला। $grid-columnsहर अलग-अलग कॉलम के चौड़ाई (प्रतिशत में) पैदा करे खातिर इस्तेमाल होला जबकि ब्रेकपॉइंट-बिसेस चौड़ाई के अनुमति देला जे कॉलम के गटर सभ के पार आ $grid-gutter-widthसमान रूप से बिभाजित कइल जाला ।padding-leftpadding-right

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

ग्रिड के स्तर के बारे में बतावल गइल बा

खुद कॉलम सभ से आगे बढ़ के, आप ग्रिड टीयर सभ के संख्या के भी अनुकूलित क सकत बानी। अगर रउआँ खाली चार गो ग्रिड टीयर चाहीं, त रउआँ $grid-breakpointsआ $container-max-widthsके कुछ अइसने में अपडेट करब:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass चर भा नक्शा सभ में कौनों बदलाव करे के समय, रउआँ के आपन बदलाव के सहेज के फिर से संकलित करे के पड़ी। अइसन कइला से कॉलम के चौड़ाई, ऑफसेट, आ ऑर्डरिंग खातिर पहिले से परिभाषित ग्रिड क्लास सभ के बिल्कुल नया सेट आउटपुट होखी। कस्टम ब्रेकपॉइंट के इस्तेमाल करे खातिर रिस्पांसिव विजिबिलिटी यूटिलिटीज के भी अपडेट कईल जाई। pxग्रिड मान के (ना rem, em, या ) में सेट कइल सुनिश्चित करीं %।