जाळी पद्दत

बारा स्तंभ प्रणाली, स मुलभूत प्रतिसाद दिवपी टियर, Sass चड-उणें आनी मिक्सिन, आनी डझनभर पूर्वनिर्धारीत वर्गांक लागून सगळ्या आकारांची आनी आकारांची मांडावळ तयार करपाक आमची बळिश्ट मोबायल-पयली फ्लेक्सबॉक्स ग्रिड वापरात.

ह्या पानाचेर

उदारण

बूटस्ट्रॅपाची ग्रिड प्रणाली सामुग्री मांडपाक आनी संरेखित करपाक कंटेनर, ओळी, आनी स्तंभ हांची माळ वापरता. तो flexbox कडेन तयार केल्लो आसा आनी पुरायपणान प्रतिसाद दिता. ग्रिड प्रणाली कशी एकठांय येता हाचें एक उदाहरण आनी खोलायेन स्पश्टीकरण सकयल दिलां.

फ्लेक्सबॉक्सांत नवे वा अपरिचित? पार्श्वभूंय, परिभाषा, मार्गदर्शक तत्वां, आनी कोड स्निपेटां खातीर हो 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 वापरून चड अर्थपूर्ण मार्कअपान तुमचो स्वताचो तयार करूंक शकतात. तुमकां आनीकय चड लवचीकताये खातीर ह्या Sass चड-उणें वापरपाक आमी कांय CSS सानुकूल गुणधर्मय समाविष्ट करतात.

flexbox भोंवतणी आशिल्ल्या मर्यादा आनी बगांची जाणविकाय दवरात , जशे की कांय HTML घटक flex कंटेनर म्हणून वापरपाक असमर्थताय .

जाळी पर्याय

Bootstrap ची ग्रिड प्रणाली सगल्या स मुलभूत ब्रेकपॉइंटांत, आनी तुमी पसंतीचे केल्ले खंयचेय ब्रेकपॉइंटांत अनुकूल करूंक शकता. स मुलभूत ग्रिड टियर फुडले तरेन आसात:

अतिरिक्त ल्हान (xs) .
ल्हान ( एस एम ) .
मध्यम (एमडी) 1.5.
मोठें (एलजी) .
अतिरिक्त व्हड (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. तुमकां जाय आशिल्ल्या दर एका ब्रेकपॉइंटाक खंयचेय संख्येन युनिट-रहित वर्ग जोडात आनी दरेक स्तंभ समान रुंदायेचो आसतलो.

१ च्या २

२ च्या २

1 च्या 3

2 च्या 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>

एक स्तंभ रुंदाय सेट करप

flexbox ग्रिड स्तंभांखातीर ऑटो-लेआउट म्हणल्यार तुमी एका स्तंभाची रुंदाय सेट करूंक शकतात आनी भावंड स्तंभांक आपोआप ताचे भोंवतणी आकार बदलूंक शकतात. तुमी पूर्वनिर्धारीत ग्रिड वर्ग (सकयल दाखयल्ले प्रमाणें), ग्रिड मिक्सिन, वा इनलायन रुंदायेचो वापर करूंक शकतात. लक्षांत दवरात की हेर स्तंभ मध्य स्तंभाची रुंदाय कितलीय आसूं आकार बदलतले.

1 च्या 3

२ च्या ३ (रुंद) ४.

३ च्या ३

1 च्या 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तांच्या आशयाचे सैमीक रुंदायेचेर आदारीत स्तंभ आकार दिवपाक वर्ग वापरात .

1 च्या 3

परिवर्तनशील रुंदायेचें आशय

३ च्या ३

1 च्या 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.

कोल

कोल-८ हें नांव

कोल-४ हें नांव

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

कोल-स्म-८ हें नांव

कोल-स्म-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>

मिक्स आनी मॅच करप

तुमचे स्तंभ फकत कांय ग्रिड टायर्सांत स्टॅक करपाक जायनात? गरज पडल्यार दरेका थराक वेगवेगळ्या वर्गांचें संयोजन वापरात. हें सगळें कशें काम करता हाची चड बरी कल्पना मेळोवपा खातीर सकयल दिल्लें उदाहरण पळयात.

.कोल-मड-८ हें नांव

.कोल-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>

स्तंभ

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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: .कोल-4 .कोल-एसएम-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>

सास

Bootstrap ची स्त्रोत 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
);

मिक्सिन हें वखद

वैयक्तीक ग्रिड स्तंभांखातीर अर्थपूर्ण CSS तयार करपाखातीर ग्रिड चयापचयांवांगडा मिक्सिन वापरतात.

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

// Get fancy by offsetting, or changing the sort order
@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, वा %) हातूंत ग्रिड मोलां सेट करपाची खात्री करात .