ग्रीड प्रणाली

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

या पृष्ठावर

उदाहरण

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

फ्लेक्सबॉक्ससाठी नवीन किंवा अपरिचित? पार्श्वभूमी, शब्दावली, मार्गदर्शक तत्त्वे आणि कोड स्निपेट्ससाठी हे CSS ट्रिक्स फ्लेक्सबॉक्स मार्गदर्शक वाचा .

स्तंभ

html

<div class="container text-center">
  <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 वापरू शकता. तुमच्यासाठी अधिक लवचिकतेसाठी आम्ही या Sass व्हेरिएबल्सचा वापर करण्यासाठी काही CSS सानुकूल गुणधर्म देखील समाविष्ट करतो.

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

ग्रिड पर्याय

बूटस्ट्रॅपची ग्रिड सिस्टीम सर्व सहा डीफॉल्ट ब्रेकपॉइंट्स आणि तुम्ही सानुकूलित केलेले कोणतेही ब्रेकपॉइंट्समध्ये जुळवून घेऊ शकते. सहा डीफॉल्ट ग्रिड स्तर खालीलप्रमाणे आहेत:

अतिरिक्त लहान (xs)
लहान (sm)
मध्यम (md)
मोठा (lg)
अतिरिक्त मोठा (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 पैकी 3

html

<div class="container text-center">
  <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 पैकी 3

३ पैकी १

३ पैकी २ (विस्तृत)

3 पैकी 3

html

<div class="container text-center">
  <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 पैकी 3

३ पैकी १

व्हेरिएबल रुंदी सामग्री

3 पैकी 3

html

<div class="container text-center">
  <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.

कर्नल

col-8

col-4

html

<div class="container text-center">
  <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) वर क्षैतिज होते.

col-sm-8

col-sm-4

col-sm

html

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

मिसळा आणि जुळवा

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

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- 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स्तंभांना त्यांची नैसर्गिक रुंदी देऊ शकता.

मूलभूत ग्रिड लेआउट द्रुतपणे तयार करण्यासाठी किंवा तुमचे कार्ड लेआउट नियंत्रित करण्यासाठी या पंक्ती स्तंभ वर्गांचा वापर करा.

स्तंभ

html

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

स्तंभ

html

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

स्तंभ

html

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

स्तंभ

html

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

स्तंभ

html

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

स्तंभ

html

<div class="container text-center">
  <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 मिक्सिन देखील वापरू शकता 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

html

<div class="container text-center">
  <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-row-columns:  6;

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

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

मुख्य सामग्री

दुय्यम सामग्री

html

<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 व्हेरिएबल्स आणि नकाशे वापरून, पूर्वनिर्धारित ग्रिड वर्ग पूर्णपणे सानुकूलित करणे शक्य आहे. स्तरांची संख्या, मीडिया क्वेरीचे परिमाण आणि कंटेनर रुंदी बदला—नंतर पुन्हा संकलित करा.

स्तंभ आणि गटर

Sass व्हेरिएबल्सद्वारे ग्रिड कॉलम्सची संख्या सुधारली जाऊ शकते. स्तंभ गटरसाठी रुंदी सेट $grid-columnsकरताना प्रत्येक वैयक्तिक स्तंभाची रुंदी (टक्केवारी) व्युत्पन्न करण्यासाठी वापरली जाते . च्या स्तंभांची कमाल संख्या सेट करण्यासाठी वापरला जातो , या मर्यादेवरील कोणतीही संख्या दुर्लक्षित केली जाते.$grid-gutter-width$grid-row-columns.row-cols-*

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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, किंवा %) मध्ये ग्रिड मूल्ये सेट केल्याचे सुनिश्चित करा .