जाळी पद्दत

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

ऑटो-लेआउट स्तंभ

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

समान-रुंदायेचें

देखीक, हांगा दोन ग्रिड मांडावळी आसात जी दरेक डिव्हायसाक आनी दृश्यपोर्टाक लागू जाता, ते xsते मेरेन xl. तुमकां जाय आशिल्ल्या दर एका ब्रेकपॉइंटाक खंयचेय संख्येन युनिट-रहित वर्ग जोडात आनी दरेक स्तंभ समान रुंदायेचो आसतलो.

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

समान रुंदायेचे स्तंभ एका परस चड ओळींनी मोडूं येतात, पूण एक Safari flexbox बग आशिल्लो जो स्पश्ट flex-basisवा नासतना हें काम करपाक आडायतालो border. पोरन्या ब्राउझर आवृत्त्यां खातीर उपाय आसात, पूण तुमी अद्ययावत आसल्यार तीं गरजेचीं आसूंक फावना.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

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

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

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

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

समान रुंदायेची बहुपंक्ति

.w-100तुमकां स्तंभ खंय मोडपाक जाय थंय नवी ओळीक घालपाक घालून एका परस चड ओळींचो विस्तार करपी समान रुंदायेचे स्तंभ तयार करात . .w-100कांय प्रतिसाद दिवपी प्रदर्शन उपयुक्तताय कडेन मिश्रण करून ब्रेक प्रतिसाद दिवपी करात .

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

प्रतिसाद दिवपी वर्ग

बूटस्ट्रॅपाच्या ग्रिडांत जटिल प्रतिसाद मांडावळी तयार करपाखातीर पूर्वनिर्धारीत वर्गांचे पांच थर आसपावीत केल्यात. तुमकां जाय तशें अतिरिक्त ल्हान, ल्हान, मध्यम, व्हड, वा अतिरिक्त व्हड डिव्हायसांचेर तुमच्या स्तंभांचे आकार पसंतीचे करात.

सगळे ब्रेकपॉइंट

ल्हान साधनांसावन व्हड साधनांमेरेन समान आशिल्ल्या जाळींखातीर, .colआनी .col-*वर्ग वापरात. जेन्ना तुमकां खाशेल्या आकाराचो स्तंभ जाय तेन्ना क्रमांकीत वर्ग निर्देशीत करात; नाजाल्यार, मेकळेपणान चिकटून रावपाक .col.

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

आडव्या मेरेन रांकोन दवरतात

वर्गांचो एकूच संच वापरून , तुमी एक मुळावी ग्रिड प्रणाली तयार करूंक शकतात जी ल्हान ब्रेकपॉइंट ( ) .col-sm-*चेर आडवें जावचे पयलीं स्टॅक करून सुरू जाता .sm

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

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

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

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

संरेखण करप

स्तंभ उबे आनी आडवे संरेखित करपाक flexbox संरेखण उपयुक्तताय वापरात.

उबें संरेखण

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

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

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

स्तंभ गुठलावप

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

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

स्तंभ मोडटा

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

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

पुनर्क्रमण करप

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

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

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

तशेंच अनुक्रमान आनी ( ) लागू करून एका घटकाचो बदल करपी प्रतिसाद दिवपी .order-firstआनी वर्ग आसात. तशेंच गरज पडल्यार ह्या वर्गांक क्रमांकीत वर्गांवांगडा परस्पर भरसण करूं येता ..order-lastorderorder: -1order: 13order: $columns + 1.order-*

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

स्तंभ ऑफसेट करप

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

ऑफसेट वर्ग

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

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

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

v4 त flexbox कडेन वचपा वांगडा, तुमी मार्जिन उपयुक्तताय वापरूं येता जशी .mr-autoभावंड स्तंभ एकामेकां पासून पयस करपाक जबरदस्ती.

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

घोंस घालप

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

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

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

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एकसारकीं विभागिल्लीं ब्रेकपॉइंट-विशिश्ट रुंदाय परवानगी दिता .padding-leftpadding-right

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