Source

जाळी पद्दत

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

कशें काम करता

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

फ्लेक्सबॉक्सांत नवे वा अपरिचित? पार्श्वभूंय, परिभाषा, मार्गदर्शक तत्वां, आनी कोड स्निपेटां खातीर हो 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उपरांत नकारात्मक मार्जिन आशिल्ल्या ओळींचेर हाका प्रतिकार करतात. अशे तरेन, तुमच्या स्तंभांतली सगळी सामग्री डावी वटेन सकयल दृश्यमानपणान संरेखित जाता.
जाळी मांडावळींत, सामुग्री स्तंभां भितर दवरपाक जाय आनी फकत स्तंभ ओळींचे तात्काळ भुरगीं आसूं येतात.
flexbox च्या उपकाराक लागून, निर्दिश्ट नाशिल्ले ग्रिड स्तंभ widthआपोआप समान रुंदायेचे स्तंभ म्हणून मांडटले. देखीक, चार प्रसंग .col-smदरेक आपोआप ल्हान ब्रेकपॉइंट पासून आनी वयर 25% रुंद आसतले. चड उदाहरणांखातीर ऑटो-लेआउट स्तंभ विभाग पळयात .
स्तंभ वर्ग दर ओळींत शक्य आशिल्ल्या 12 मदल्यान तुमकां वापरपाक जाय आशिल्ल्या स्तंभांची संख्या दाखयतात. तर, तुमकां तीन समान रुंदायेचे स्तंभ आडवें जाय जाल्यार, तुमी वापरूं येता .col-4.
स्तंभ widths टक्केवारींत सेट केल्ले आसतात, देखून ते सदांच द्रव आनी तांच्या पालक घटकाच्या सापेक्ष आकाराचे आसतात.
स्तंभांक वैयक्तीक स्तंभांमदीं गटर तयार करपाक आडवे paddingआसतात, तरीपूण, तुमी marginओळींतल्यान आनी paddingस्तंभांतल्यान काडून उडोवंक शकतात with .no-gutterson the .row.
जाळी प्रतिसाद दिवपी करपाक, पांच जाळी ब्रेकपॉइंट आसात, दरेक प्रतिसाद दिवपी ब्रेकपॉइंटाक एक : सगळे ब्रेकपॉइंट (अतिरिक्त ल्हान), ल्हान, मध्यम, व्हड, आनी अतिरिक्त व्हड.
ग्रिड ब्रेकपॉइंट उण्यांत उणी रुंदायेच्या माध्यम क्वेरीचेर आदारीत आसात, म्हळ्यार ते त्या एका ब्रेकपॉइंटाक आनी ताचे वयर आशिल्ल्या सगळ्यांक लागू जातात (देखीक, .col-sm-4ल्हान, मध्यम, व्हड, आनी अतिरिक्त व्हड साधनांक लागू जाता, पूण पयल्या xsब्रेकपॉइंटाक न्हय).
तुमी चड अर्थपूर्ण मार्कअप खातीर पूर्वनिर्धारीत ग्रिड वर्ग (जशे .col-4) वा Sass mixins वापरूं येतात.

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

जाळी पर्याय

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

Bootstrap ग्रिड प्रणालीचे आंग कशे काम करतात तें पळयात एका सुलभ कोश्टका वांगडा जायत्या साधनां वयल्यान.

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

१ च्या २

२ च्या २

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>

समान रुंदायेची बहुरेखा

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

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

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>

गटर करतात

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

lgव्हड ( ) ब्रेकपॉइंट आनी वयर Bootstrap ग्रिड सानुकूल करपाचें एक उदाहरण हांगा दिला . आमी .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 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);
  }
}

संरेखण करप

स्तंभ उबे आनी आडवे संरेखित करपाक flexbox संरेखण उपयुक्तताय वापरात. Internet Explorer 10-11 flex आयटम उब्या संरेखणाक तेंको दिना जेन्ना flex कंटेनराक min-heightसकयल दाखयल्ले प्रमाणें एक आसता. चड तपशीलां खातीर Flexbugs #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;
  }
}

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

.कोल-स्म-6 .कोल-मड-8

.कोल-6 .कोल-एमडी-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-4
9 + 4 = 13 > 12 आशिल्ल्यान हो 4-स्तंभ-रुंद दिव एक संलग्न एकक म्हणून नव्या ओळीचेर गुठलायता.

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

स्तंभ मोडटा

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

.कोल-6 .कोल-एसएम-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>

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

.कोल-६ .कोल-एसएम-४

<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- नियंत्रण दवरपा खातीर वर्ग वापरात . हे वर्ग प्रतिसाद दिवपी आसतात, देखून तुमी by breakpoint सेट करूंक शकतात (देखीक, ). पांचूय ग्रिड थरांतल्यान थ्रू खातीर आदार समाविष्ट करता .order.order-1.order-md-2112

पयलें डीओएमांत कसलोच आदेश लागू जालो ना

डीओएमांत दुसरें, व्हडल्या ऑर्डरान

डीओएमांत तिसरो, 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-lastorderorder: -1order: 13order: $columns + 1.order-*

डीओएमांत पयलें, निमाणें ऑर्डर दिल्लें

डीओएमांत दुसरें, अक्रम्य

डीओएमांत तिसरो, पयली ऑर्डर दिली

<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

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

.कोल-एमडी-4 .ऑफसेट-एमडी-4

.कोल-एमडी-3 .ऑफसेट-एमडी-3

.कोल-एमडी-6 .ऑफसेट-एमडी-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>

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

.कोल-एसएम-5 .कोल-एमडी-6

.कोल-एसएम-5 .ऑफसेट-एसएम-2 .कोल-एमडी-6 .ऑफसेट-एमडी-0

.कोल-एसएम-6 .कोल-एमडी-5 .कोल-एलजी-6

.कोल-एसएम-6 .कोल-एमडी-5 .ऑफसेट-एमडी-2 .कोल-एलजी-6 .ऑफसेट-एलजी-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भावंड स्तंभ एकामेकां पासून पयस करपाक जबरदस्ती.

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

.कोल-एमडी-4 .मिली-ऑटो

.कोल-एमडी-3 .मिली-एमडी-ऑटो

.कोल-ऑटो .mr-ऑटो

.कोल-ऑटो हें नांव

<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: .कोल-4 .कोल-एसएम-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>

सास मिक्सिन हें नांव

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

$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, वा %) हातूंत ग्रिड मोलां सेट करपाची खात्री करात .