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

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

हे कसे कार्य करते

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

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

तीन स्तंभांपैकी एक

<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-fluidवापरा .width: 100%
पंक्ती स्तंभांसाठी आवरण आहेत. प्रत्येक स्तंभामध्ये क्षैतिज padding(ज्याला गटर म्हणतात) त्यांच्या दरम्यानची जागा नियंत्रित केली जाते. हे paddingनंतर पंक्तींवर नकारात्मक मार्जिनसह प्रतिवाद केले जाते. अशा प्रकारे, तुमच्या स्तंभातील सर्व सामग्री दृष्यदृष्ट्या डाव्या बाजूला खाली संरेखित केली जाते.
ग्रिड लेआउटमध्ये, सामग्री स्तंभांमध्ये ठेवली जाणे आवश्यक आहे आणि फक्त स्तंभ हे पंक्तींचे तात्काळ मूल असू शकतात.
फ्लेक्सबॉक्सचे आभार, निर्दिष्ट नसलेले ग्रिड स्तंभ widthसमान रुंदीच्या स्तंभ म्हणून स्वयंचलितपणे लेआउट करतील. उदाहरणार्थ, विलची चार उदाहरणे .col-smआपोआप लहान ब्रेकपॉईंटपासून 25% रुंद होतील. अधिक उदाहरणांसाठी स्वयं-लेआउट स्तंभ विभाग पहा .
स्तंभ वर्ग तुम्हाला प्रति पंक्ती संभाव्य १२ पैकी किती स्तंभ वापरू इच्छिता हे सूचित करतात. म्हणून, जर तुम्हाला तीन समान-रुंदीचे स्तंभ हवे असतील, तर तुम्ही वापरू शकता .col-4.
स्तंभ widths टक्केवारीत सेट केले जातात, त्यामुळे ते नेहमी त्यांच्या मूळ घटकाच्या तुलनेत द्रव आणि आकाराचे असतात.
paddingवैयक्तिक स्तंभांमध्ये गटर तयार करण्यासाठी स्तंभ क्षैतिज असतात, तथापि, तुम्ही वर सह marginपंक्ती आणि स्तंभांमधून काढू शकता .padding.no-gutters.row
ग्रिड रिस्पॉन्सिव्ह करण्यासाठी, पाच ग्रिड ब्रेकपॉइंट्स आहेत, प्रत्येक रिस्पॉन्सिव्ह ब्रेकपॉइंटसाठी एक : सर्व ब्रेकपॉइंट्स (अतिरिक्त लहान), लहान, मध्यम, मोठे आणि अतिरिक्त मोठे.
ग्रिड ब्रेकपॉइंट्स किमान रुंदीच्या मीडिया क्वेरीवर आधारित असतात, म्हणजे ते त्या एका ब्रेकपॉइंटवर आणि त्यावरील सर्वांवर लागू होतात (उदा. .col-sm-4लहान, मध्यम, मोठ्या आणि अतिरिक्त मोठ्या उपकरणांना लागू होते, परंतु प्रथम xsब्रेकपॉइंट नाही).
अधिक सिमेंटिक मार्कअपसाठी तुम्ही पूर्वनिर्धारित ग्रिड वर्ग (जसे .col-4) किंवा Sass मिक्सिन वापरू शकता .

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

ग्रिड पर्याय

बूटस्ट्रॅप बहुतेक आकार परिभाषित करण्यासाठी ems किंवा s वापरत असताना, ग्रिड ब्रेकपॉइंट्स आणि कंटेनर रुंदीसाठी s वापरतात. कारण व्ह्यूपोर्टची रुंदी पिक्सेलमध्ये आहे आणि फॉन्ट आकारानुसार बदलत नाही .rempx

सुलभ सारणीसह बूटस्ट्रॅप ग्रिड प्रणालीचे पैलू एकाधिक उपकरणांवर कसे कार्य करतात ते पहा.

	अतिरिक्त लहान <576px	लहान ≥576px	मध्यम ≥768px	मोठा ≥992px	अतिरिक्त मोठा ≥1200px
कमाल कंटेनर रुंदी	काहीही नाही (स्वयं)	540px	720px	960px	1140px
वर्ग उपसर्ग	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# स्तंभ	12
गटर रुंदी	30px (स्तंभाच्या प्रत्येक बाजूला 15px)
नेस्टेबल	होय
स्तंभ क्रमवारी	होय

स्वयं-लेआउट स्तंभ

सारख्या सुस्पष्ट क्रमांकित वर्गाशिवाय सहज स्तंभ आकारासाठी ब्रेकपॉइंट-विशिष्ट स्तंभ वर्ग वापरा .col-sm-6.

समान-रुंदी

उदाहरणार्थ, येथे दोन ग्रिड लेआउट आहेत जे प्रत्येक डिव्हाइस आणि व्ह्यूपोर्टवर लागू होतात, पासून xsते xl. तुम्हाला आवश्यक असलेल्या प्रत्येक ब्रेकपॉईंटसाठी कितीही युनिट-कमी वर्ग जोडा आणि प्रत्येक स्तंभ समान रुंदीचा असेल.

2 पैकी 1

2 पैकी 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>

समान-रुंदी मल्टी-लाइन

.w-100तुम्हाला जेथे स्तंभ नवीन ओळीत मोडायचे आहेत तेथे टाकून एकापेक्षा जास्त ओळींचा विस्तार करणारे समान-रुंदीचे स्तंभ तयार करा . .w-100काही रिस्पॉन्सिव्ह डिस्प्ले युटिलिटीज मिक्स करून ब्रेक्स रिस्पॉन्सिव्ह बनवा .

सफारी फ्लेक्सबॉक्स बग होता ज्याने हे स्पष्ट flex-basisकिंवा स्पष्ट न करता कार्य करण्यापासून प्रतिबंधित केले border. जुन्या ब्राउझर आवृत्त्यांसाठी उपाय आहेत, परंतु तुमचे लक्ष्य ब्राउझर बग्गी आवृत्त्यांमध्ये येत नसल्यास ते आवश्यक नसावेत.

कर्नल

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

एका स्तंभाची रुंदी सेट करत आहे

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

३ पैकी १

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

3 पैकी 3

३ पैकी १

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

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 पैकी 3

३ पैकी १

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

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.

कर्नल

col-8

col-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) वर क्षैतिज होते.

col-sm-8

col-sm-4

col-sm

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

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

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

.col-md-8

.col-6 .col-md-4

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

गटार

ब्रेकपॉइंट-विशिष्ट पॅडिंग आणि नकारात्मक मार्जिन युटिलिटी वर्गांद्वारे गटर्स प्रतिसादात्मकपणे समायोजित केले जाऊ शकतात. दिलेल्या पंक्तीमधील गटर बदलण्यासाठी, वर नकारात्मक मार्जिन युटिलिटी आणि s .rowवर जुळणारी पॅडिंग उपयुक्तता जोडा. पुन्हा जुळणारी पॅडिंग उपयुक्तता वापरून, अवांछित ओव्हरफ्लो टाळण्यासाठी किंवा पालकांना देखील समायोजित .colकरण्याची आवश्यकता असू शकते..container.container-fluid

lgमोठ्या ( ) ब्रेकपॉइंटवर आणि त्यावरील बूटस्ट्रॅप ग्रिड सानुकूलित करण्याचे येथे एक उदाहरण आहे . आम्ही .colसह पॅडिंग वाढविले आहे, त्यास पॅरेंटसह .px-lg-5प्रतिवाद केला आहे आणि नंतर रॅपर सह समायोजित केले आहे ..mx-lg-n5.row.container.px-lg-5

सानुकूल स्तंभ पॅडिंग

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

पंक्ती स्तंभ

.row-cols-*तुमची सामग्री आणि लेआउट सर्वोत्तम रेंडर करणार्‍या स्तंभांची संख्या द्रुतपणे सेट करण्यासाठी प्रतिसाद देणारे वर्ग वापरा . सामान्य .col-*वर्ग वैयक्तिक स्तंभांवर लागू होतात (उदा. ), पंक्ती स्तंभ वर्ग शॉर्टकट म्हणून .col-md-4पालकांवर सेट केले जातात ..row

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

स्तंभ

<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-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 मिक्सिन देखील वापरू शकता 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);
  }
}

संरेखन

स्तंभांना अनुलंब आणि क्षैतिजरित्या संरेखित करण्यासाठी फ्लेक्सबॉक्स संरेखन उपयुक्तता वापरा. इंटरनेट एक्सप्लोरर 10-11 फ्लेक्स आयटमच्या अनुलंब संरेखनास समर्थन देत नाही जेव्हा फ्लेक्स कंटेनरमध्ये min-heightखाली दर्शविल्याप्रमाणे असते. अधिक तपशीलांसाठी फ्लेक्सबग #3 पहा.

अनुलंब संरेखन

तीन स्तंभांपैकी एक

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

सराव मध्ये, ते कसे दिसते ते येथे आहे. लक्षात ठेवा तुम्ही हे इतर सर्व पूर्वनिर्धारित ग्रिड वर्गांसह वापरणे सुरू ठेवू शकता (स्तंभ रुंदी, प्रतिसादात्मक स्तर, पुनर्क्रमण आणि अधिकसह).

.col-sm-6 .col-md-8

.col-6 .col-md-4

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

स्तंभ लपेटणे

एका ओळीत 12 पेक्षा जास्त स्तंभ ठेवल्यास, अतिरिक्त स्तंभांचा प्रत्येक गट, एक युनिट म्हणून, नवीन ओळीवर गुंडाळला जाईल.

.col-9

.col-4
9 + 4 = 13 > 12 पासून, हा 4-स्तंभ-विस्तृत div नवीन ओळीवर एक संलग्न एकक म्हणून गुंडाळला जातो.

.col-6
त्यानंतरचे स्तंभ नवीन ओळीवर चालू राहतात.

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

स्तंभ तुटतो

फ्लेक्सबॉक्समध्ये नवीन ओळीत स्तंभ तोडण्यासाठी एक लहान हॅक आवश्यक आहे: width: 100%तुम्हाला जेथे नवीन ओळीत तुमचे स्तंभ गुंडाळायचे आहेत तेथे एक घटक जोडा. साधारणपणे हे एकाधिक .rows सह पूर्ण केले जाते, परंतु प्रत्येक अंमलबजावणी पद्धत यासाठी जबाबदार असू शकत नाही.

.col-6 .col-sm-3

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

तुम्ही हा ब्रेक आमच्या रिस्पॉन्सिव्ह डिस्प्ले युटिलिटीजसह विशिष्ट ब्रेकपॉइंट्सवर देखील लागू करू शकता .

.col-6 .col-sm-4

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

पुनर्क्रमण

वर्ग ऑर्डर करा

तुमच्या सामग्रीचा व्हिज्युअल क्रम.order- नियंत्रित करण्यासाठी वर्ग वापरा . हे वर्ग प्रतिसादात्मक आहेत, त्यामुळे तुम्ही ब्रेकपॉइंट (उदा., ) सेट करू शकता. सर्व पाच ग्रिड स्तरांवर समर्थन समाविष्ट करते .order.order-1.order-md-2112

प्रथम DOM मध्ये, कोणतीही ऑर्डर लागू नाही

मोठ्या ऑर्डरसह, DOM मध्ये दुसरा

DOM मध्ये तिसरा, 1 च्या ऑर्डरसह

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

.order-firstप्रतिसादात्मक आणि वर्ग देखील आहेत जे अनुक्रमे आणि ( ), लागू करून घटक .order-lastबदलतात . हे वर्ग आवश्यकतेनुसार क्रमांकित वर्गांमध्ये देखील मिसळले जाऊ शकतात .orderorder: -1order: 13order: $columns + 1.order-*

DOM मध्ये प्रथम, शेवटचे ऑर्डर केले

DOM मध्ये दुसरा, क्रमरहित

DOM मध्ये तिसरा, प्रथम ऑर्डर केला

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

ऑफसेटिंग स्तंभ

तुम्ही ग्रिड कॉलम्स दोन प्रकारे ऑफसेट करू शकता: आमचे रिस्पॉन्सिव्ह .offset-ग्रिड क्लासेस आणि आमच्या मार्जिन युटिलिटीज . ग्रिड वर्गांचा आकार स्तंभांशी जुळण्यासाठी केला जातो तर मार्जिन द्रुत मांडणीसाठी अधिक उपयुक्त असतात जेथे ऑफसेटची रुंदी व्हेरिएबल असते.

ऑफसेट वर्ग

.offset-md-*वर्ग वापरून स्तंभ उजवीकडे हलवा . हे वर्ग स्तंभाचे डावे मार्जिन *स्तंभांद्वारे वाढवतात. उदाहरणार्थ, चार स्तंभांवर .offset-md-4हलते ..col-md-4

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

प्रतिसादात्मक ब्रेकपॉइंट्सवर कॉलम क्लिअरिंग व्यतिरिक्त, तुम्हाला ऑफसेट रीसेट करण्याची आवश्यकता असू शकते. हे ग्रिड उदाहरणामध्ये कृतीत पहा .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

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

मार्जिन उपयुक्तता

v4 मध्‍ये flexbox वर जाल्‍याने, तुम्ही मार्जिन युटिलिटीज वापरू शकता जसे की .mr-autoसिबलिंग कॉलम एकमेकांपासून दूर नेणे.

.col-md-4

.col-md-4 .ml-ऑटो

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-ऑटो

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

घरटी

तुमची सामग्री डीफॉल्ट ग्रिडसह नेस्ट करण्यासाठी, विद्यमान स्तंभामध्ये नवीन .rowआणि स्तंभांचा संच जोडा . नेस्टेड पंक्तींमध्ये 12 किंवा त्यापेक्षा कमी जोडणाऱ्या स्तंभांचा संच समाविष्ट असावा (आपण सर्व 12 उपलब्ध स्तंभ वापरणे आवश्यक नाही)..col-sm-*.col-sm-*

स्तर 1: .col-sm-9

स्तर 2: .col-8 .col-sm-6

स्तर 2: .col-4 .col-sm-6

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

मिक्सन्स

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

स्तंभ आणि गटर

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

$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, किंवा %) मध्ये ग्रिड मूल्ये सेट केल्याचे सुनिश्चित करा .