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

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

एह पन्ना पर दिहल गइल बा

उदाहरण

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

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

खंभा

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

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

एकरा के तोड़ के देखल जाव कि ग्रिड सिस्टम कइसे एक साथ आवेला:

हमनी के ग्रिड छह गो रिस्पांसिव ब्रेकपॉइंट के सपोर्ट करेला . ब्रेकपॉइंट मीडिया क्वेरी सभ पर आधारित min-widthहोला, मने कि ई ओह ब्रेकपॉइंट आ एकरे ऊपर के सभ लोग के प्रभावित करे लें (जइसे कि, , , , , आ .col-sm-4पर लागू होला )। एकर मतलब बा कि रउआँ हर ब्रेकपॉइंट से कंटेनर आ कॉलम के साइजिंग आ व्यवहार के नियंत्रित क सकत बानी।smmdlgxlxxl
कंटेनर केंद्र आ क्षैतिज रूप से आपके सामग्री के पैड। .containerरिस्पांसिव पिक्सेल चौड़ाई खातिर, सभ व्यूपोर्ट आ डिवाइस सभ के पार .container-fluidखातिर , या फिर फ्लूइड आ पिक्सेल चौड़ाई के संयोजन खातिर width: 100%रिस्पांसिव कंटेनर (उदाहरण खातिर, ) के इस्तेमाल करीं।.container-md
पंक्ति कॉलम खातिर रैपर होला। हर स्तंभ में क्षैतिज padding(जेकरा के गटर कहल जाला) होला जेह से कि इनहन के बीच के जगह के नियंत्रित कइल जा सके। एकरे paddingबाद एकर प्रतिकार नकारात्मक हाशिया वाला पंक्ति सभ पर कइल जाला ताकि ई सुनिश्चित कइल जा सके कि आपके कॉलम सभ में सामग्री बाईं ओर नीचे दृष्टिगत रूप से संरेखित होखे। पंक्ति सभ संशोधक क्लास सभ के भी सपोर्ट करे लीं जेह से कि कॉलम साइजिंग आ गटर क्लास सभ के एक समान रूप से लागू कइल जा सके ताकि आपके सामग्री के स्पेसिंग बदलल जा सके।
कॉलम अविश्वसनीय रूप से लचीला होला। प्रति पंक्ति में 12 गो टेम्पलेट कॉलम उपलब्ध बाड़ें, एह से आप कौनों भी संख्या में कॉलम सभ के बिस्तार वाला तत्व सभ के अलग-अलग संयोजन बना सके लें। कॉलम क्लास सभ टेम्पलेट कॉलम सभ के संख्या के बतावे लीं जे स्पैन करे के बा (जइसे कि, col-4स्पैन चार)। widths के प्रतिशत में सेट कइल जाला एहसे रउरा लगे हमेशा एकही रिलेटिव साइजिंग होखे.
गटर भी रिस्पांसिव अवुरी कस्टमाइज करे लायक होखेला। गटर क्लास सभ ब्रेकपॉइंट में उपलब्ध बा , जवना के सभ आकार हमनी के मार्जिन अवुरी पैडिंग स्पेसिंग के समान बा । क्लास के साथ क्षैतिज गटर .gx-*, , के साथ ऊर्ध्वाधर गटर .gy-*, या .g-*क्लास के साथ सभ गटर बदलीं। .g-0गटर निकाले खातिर भी उपलब्ध बा।
सास चर, नक्शा, आ मिक्सिन ग्रिड के पावर देला। अगर रउआँ बूटस्ट्रैप में पहिले से परिभाषित ग्रिड क्लास सभ के इस्तेमाल ना कइल चाहत बानी, त रउआँ हमनी के ग्रिड के स्रोत Sass के इस्तेमाल क के अउरी सिमेंटिक मार्कअप के साथ आपन बना सकत बानी। हमनी के कुछ CSS कस्टम गुण भी शामिल बानी जा ताकि रउआ खातिर अउरी अधिका लचीलापन खातिर एह Sass चर के उपभोग कइल जा सके।

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

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

बूटस्ट्रैप के ग्रिड सिस्टम छहों डिफ़ॉल्ट ब्रेकपॉइंट के पार अनुकूलित हो सकता, अवुरी कवनो ब्रेकपॉइंट के आप अनुकूलित क सकतानी। छह गो डिफ़ॉल्ट ग्रिड टीयर निम्नलिखित बाड़ें:

अतिरिक्त छोट (xs) के बा।
छोट (एसएम) के बा।
मध्यम (एमडी) के बा।
बड़का (एलजी) के बा।
अतिरिक्त बड़ (xl) बा।
अतिरिक्त अतिरिक्त बड़ (xxl) के बा।

जइसन कि ऊपर बतावल गइल बा, एह में से हर ब्रेकपॉइंट के आपन कंटेनर, यूनिक क्लास प्रीफिक्स आ मोडिफायर होलें। इहाँ एह ब्रेकपॉइंट सभ के पार ग्रिड में कइसे बदलाव होला:

	xs <576px के बा	sm ≥576px के बा	md ≥768px के बा	lg ≥992px के बा	xl ≥1200px के बा	xxl ≥1400px के बा
कंटेनर के बा`max-width`	कवनो ना (ऑटो) .	540px के बा	720px के बा	960px के बा	1140px के बा	1320px के बा
कक्षा के उपसर्ग बा	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# के कॉलम के बा	12 के बा
गटर के चौड़ाई के बा	1.5rem (बाएं और दाएं ओर .75rem) के बा।
कस्टम गटर के बा	हॅंं
घोंसला के लायक बा	हॅंं
कॉलम के ऑर्डर दिहल जा रहल बा	हॅंं

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

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

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

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

2 में से 1 के बा

2 के 2 के बा

3 में से 1 के बा

3 में से 2 के बा

3 में से 3 के बा

<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>

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

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

3 में से 1 के बा

3 में से 2 (चौड़ा) के बा।

3 में से 3 के बा

3 में से 1 के बा

3 में से 2 (चौड़ा) के बा।

3 में से 3 के बा

<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कॉलम सभ के सामग्री के प्राकृतिक चौड़ाई के आधार पर आकार देवे खातिर क्लास सभ के इस्तेमाल करीं।

3 में से 1 के बा

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

3 में से 3 के बा

3 में से 1 के बा

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

3 में से 3 के बा

<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>

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

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

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

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

कर्नल के बा

कोल-8 के बा

कोल-4 के बा

<div class="container">
  <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>
</div>

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

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

कोल-एसएम-8 के बा

कोल-एसएम-4 के बा

कोल-एसएम के बा

<div class="container">
  <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>
</div>

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

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

.कोल-एमडी-8 के बा

.कोल-6 .कोल-एमडी-4 के बा

.कोल-6 के बा

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>

पंक्ति के कॉलम बा

रिस्पांसिव .row-cols-*क्लास सभ के इस्तेमाल जल्दी से कॉलम सभ के संख्या सेट करे खातिर करीं जे आपके सामग्री आ लेआउट के सभसे नीक तरीका से रेंडर करे। जबकि सामान्य .col-*क्लास अलग-अलग कॉलम सभ पर लागू होला (उदाहरण खातिर, ), पंक्ति कॉलम क्लास सभ के शॉर्टकट के रूप में .col-md-4पैरेंट पर सेट कइल जाला । .rowके साथ .row-cols-autoरउआ कॉलम के ओकर प्राकृतिक चौड़ाई दे सकेनी।

जल्दी से बेसिक ग्रिड लेआउट बनावे खातिर या अपना कार्ड लेआउट के नियंत्रित करे खातिर एह पंक्ति कॉलम क्लास सभ के इस्तेमाल करीं।

खंभा

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

खंभा

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

खंभा

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

खंभा

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

खंभा

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

खंभा

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

रउआँ साथ में दिहल गइल Sass mixin के भी इस्तेमाल कर सकत बानी, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

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

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

स्तर 1: .col-sm-3 के बा

स्तर 2: .col-8 .col-sm-6 के बा

स्तर 2: .col-4 .col-sm-6 के बा

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>
</div>

ससस के बा

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

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

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

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

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

// 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

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

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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कॉलम गटर सभ खातिर चौड़ाई सेट करे ला।

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !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, या ) में सेट कइल सुनिश्चित करीं %।