जाल प्रणाली

द्वादशस्तम्भप्रणाली, पञ्च पूर्वनिर्धारितप्रतिक्रियाशीलस्तराः, Sass चराः तथा mixins, दर्जनशः पूर्वनिर्धारितवर्गाः च धन्यवादेन सर्वेषां आकारानां आकारानां च लेआउट् निर्मातुं अस्माकं शक्तिशालिनः मोबाईल-प्रथम flexbox जालस्य उपयोगं कुर्वन्तु

कथं कार्यं करोति

बूटस्ट्रैप् इत्यस्य जालप्रणाली सामग्रीं विन्यासयितुं संरेखयितुं च पात्राणां, पङ्क्तयः, स्तम्भानां च श्रृङ्खलां उपयुज्यते । इदं flexbox इत्यनेन सह निर्मितम् अस्ति तथा च पूर्णतया प्रतिक्रियाशीलम् अस्ति। अधः उदाहरणं जालपुटं कथं एकत्र आगच्छति इति गहनतया अवलोकनं च अस्ति ।

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अथवा सर्वेषु viewport तथा ​​device आकारेषु कृते उपयुज्यताम् ।.container-fluidwidth: 100%
• पङ्क्तयः स्तम्भानां कृते वेष्टकाः सन्ति । प्रत्येकं स्तम्भे paddingतेषां मध्ये अन्तरिक्षं नियन्त्रयितुं क्षैतिजं (गटर इति उच्यते) भवति । एतत् paddingततः ऋणात्मकमार्जिनयुक्तेषु पङ्क्तिषु प्रतिहृतं भवति । एवं भवतः स्तम्भेषु सर्वा सामग्री वामपार्श्वे अधः दृग्गतरूपेण संरेखिता भवति ।
• जालविन्यासे सामग्रीं स्तम्भानां अन्तः अवश्यं स्थापनीयं तथा च केवलं स्तम्भाः पङ्क्तयः तात्कालिकाः बालकाः भवितुम् अर्हन्ति ।
• flexbox इत्यस्य धन्यवादेन निर्दिष्टं विना widthजालस्तम्भाः स्वयमेव समानविस्तारस्तम्भरूपेण विन्यासं करिष्यन्ति । यथा, चत्वारि उदाहरणानि .col-smप्रत्येकं स्वयमेव लघुभङ्गबिन्दुतः उपरि च 25% विस्तृताः भविष्यन्ति । अधिक-उदाहरणार्थं auto-layout columns इति विभागं पश्यन्तु ।
• स्तम्भवर्गाः प्रतिपङ्क्तिं सम्भाव्य 12 मध्ये भवन्तः स्तम्भानां संख्यां सूचयन्ति । अतः, यदि भवान् त्रीणि समानविस्तारयुक्तानि स्तम्भानि पारं इच्छति तर्हि भवान् .col-4.
• स्तम्भाः widths प्रतिशतेषु सेट् भवन्ति, अतः ते सर्वदा द्रवरूपेण भवन्ति तथा च तेषां मूलतत्त्वस्य सापेक्षतया आकारयुक्ताः भवन्ति ।
• स्तम्भेषु paddingव्यक्तिगतस्तम्भानां मध्ये गटर्स् निर्मातुं क्षैतिजं भवति, तथापि, भवन्तः marginfrom rows and paddingfrom columns with .no-gutterson the इत्यनेन सह निष्कासयितुं शक्नुवन्ति .row।
• जालम् प्रतिक्रियाशीलं कर्तुं पञ्च जालविच्छेदबिन्दवः सन्ति, प्रत्येकस्य प्रतिक्रियाशीलविरामबिन्दुस्य कृते एकः : सर्वे भङ्गबिन्दवः (अतिरिक्तलघु), लघु, मध्यमः, विशालः, अतिरिक्तविशालः च ।
• जाल-विच्छेद-बिन्दवः न्यूनतम-विस्तार-माध्यम-प्रश्नानां आधारेण भवन्ति, अर्थात् ते तस्मिन् एकस्मिन् भङ्ग-बिन्दौ तस्य उपरि च सर्वेषु प्रवर्तन्ते (उदा., .col-sm-4लघु-मध्यम-बृहत्, अतिरिक्त-बृहत्-यन्त्रेषु प्रवर्तन्ते, परन्तु प्रथम- xsविच्छेद-बिन्दौ न)
• .col-4अधिकशब्दार्थचिह्नार्थं पूर्वनिर्धारितजालवर्गाणां (like ) अथवा Sass mixins इत्यस्य उपयोगं कर्तुं शक्नुवन्ति ।

flexbox इत्यस्य परितः सीमानां दोषाणां च विषये अवगताः भवन्तु , यथा केषाञ्चन HTML तत्त्वानां flex पात्ररूपेण उपयोगं कर्तुं असमर्थता |

जालविकल्पाः

यदा Bootstrap अधिकांशस्य आकारस्य परिभाषार्थं ems अथवा s इत्यस्य उपयोगं करोति, तदा s इत्यस्य उपयोगः ग्रिड् ब्रेकपॉइण्ट् तथा कन्टेनर् विड्थ् इत्यस्य कृते भवति । यतो हि viewport width pixels मध्ये भवति तथा च font size इत्यनेन सह न परिवर्तते |rempx

पश्यन्तु यत् Bootstrap जालप्रणाल्याः पक्षाः कथं सुलभसारणीयुक्तेन बहुषु उपकरणेषु कार्यं कुर्वन्ति ।

स्वतः-विन्यास-स्तम्भाः

यथा स्पष्टसङ्ख्यायुक्तवर्गं विना सुलभस्तम्भप्रमाणीकरणार्थं breakpoint-विशिष्टस्तम्भवर्गाणां उपयोगं कुर्वन्तु .col-sm-6।

सम-विस्तारः

यथा, अत्र द्वौ जालविन्यासौ स्तः ये प्रत्येकं उपकरणे दृश्यपोर्टे च प्रवर्तन्ते, from xsto xl. भवतः आवश्यकतानुसारं प्रत्येकं breakpoint कृते यत्किमपि संख्यां unit-less classes योजयन्तु तथा च प्रत्येकं column समानविस्तारं भविष्यति ।

<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 grid columns कृते Auto-layout इत्यस्य अपि अर्थः अस्ति यत् भवान् एकस्य स्तम्भस्य विस्तारं सेट् कर्तुं शक्नोति तथा च भ्रातृस्तम्भान् स्वयमेव तस्य परितः आकारं परिवर्तयितुं शक्नोति । भवान् पूर्वनिर्धारितजालवर्गान् (यथा अधः दर्शितम्), जालमिक्सिन्, अथवा अन्तःरेखाविस्तारं उपयोक्तुं शक्नोति । ध्यानं कुर्वन्तु यत् अन्ये स्तम्भाः केन्द्रस्तम्भस्य विस्तारः किमपि न भवतु आकारं परिवर्तयिष्यन्ति ।

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

प्रतिक्रियाशील वर्ग

बूटस्ट्रैप् इत्यस्य जालपुटे जटिलप्रतिसादात्मकविन्यासनिर्माणार्थं पूर्वनिर्धारितवर्गाणां पञ्चस्तराः सन्ति । अतिरिक्त-लघु, लघु, मध्यम, बृहत्, अथवा अतिरिक्त-बृहत् उपकरणेषु यथायोग्यं भवतः स्तम्भानां आकारं अनुकूलितं कुर्वन्तु ।

सर्वे भङ्गबिन्दवः

ये जालपुटाः लघुतमात् बृहत्तमपर्यन्तं समानाः सन्ति, तेषां कृते .coland .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 alignment utilities इत्यस्य उपयोगं कुर्वन्तु ।

ऊर्ध्वाधर संरेखण

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

स्तम्भ लपेटना

यदि एकस्याः पङ्क्तौ १२ तः अधिकाः स्तम्भाः स्थापिताः सन्ति तर्हि अतिरिक्तस्तम्भानां प्रत्येकं समूहः एकैकरूपेण नूतनरेखायां वेष्टयिष्यति ।

<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 (eg, ) सेट् कर्तुं शक्नोति । पञ्चसु जालस्तरयोः मध्ये माध्यमेन समर्थनं समावेशयति ।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-lastपरिवर्तनं कुर्वन्ति । एतेषां वर्गानां आवश्यकतानुसारं संख्यायुक्तवर्गैः सह अपि अन्तरमिश्रणं कर्तुं शक्यते ।orderorder: -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 मध्ये गमनेन सह, भवान् margin utilities इत्यस्य उपयोगं कर्तुं शक्नोति यथा .mr-autosibling columns इत्येतत् परस्परं दूरं कर्तुं बाध्यते ।

<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च योजयन्तु । नेस्टेड् पङ्क्तयः स्तम्भसमूहः समाविष्टः भवेत् यत् १२ वा न्यूनतरं वा योजयति (भवतः सर्वेषां १२ उपलब्धानां स्तम्भानां उपयोगः आवश्यकः नास्ति) ।.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 चरस्य, mixins इत्यस्य च उपयोगेन कस्टम्, सेमेन्टिक्, प्रतिक्रियाशीलपृष्ठविन्यासाः च निर्मातुं विकल्पः अस्ति । अस्माकं पूर्वनिर्धारितजालवर्गाः द्रुतप्रतिसादात्मकविन्यासानां कृते उपयोगाय सज्जवर्गाणां सम्पूर्णं सूटं प्रदातुं एतान् एव चरानाम् मिश्रणानां च उपयोगं कुर्वन्ति ।

चर

चराः नक्शाश्च स्तम्भानां संख्यां, नालीविस्तारं, माध्यमप्रश्नबिन्दुं च निर्धारयन्ति यस्मिन् प्लवमानस्तम्भान् आरभ्यतव्यम् । उपरि दस्तावेजितानां पूर्वनिर्धारितजालवर्गाणां जननार्थं वयं एतानि उपयुञ्ज्महे, तथैव अधः सूचीकृतानां custom mixins कृते अपि ।

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

उदाहरण प्रयोग

भवान् चरं स्वस्य कस्टम् मूल्येषु परिवर्तयितुं शक्नोति, अथवा केवलं तेषां पूर्वनिर्धारितमूल्यैः सह mixins इत्यस्य उपयोगं कर्तुं शक्नोति । अत्र पूर्वनिर्धारितसेटिंग्स् इत्यस्य उपयोगेन द्विस्तम्भविन्यासं निर्मातुं उदाहरणम् अस्ति यस्य मध्ये अन्तरं भवति ।

.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 चर तथा मानचित्रस्य उपयोगेन पूर्वनिर्धारितजालवर्गान् पूर्णतया अनुकूलितुं शक्यते । स्तरसङ्ख्यां, माध्यमप्रश्नपरिमाणानि, पात्रविस्ताराणि च परिवर्तयन्तु—ततः पुनः संकलयन्तु ।

स्तम्भ एवं नाली

Sass चरद्वारा जालस्तम्भानां संख्या परिवर्तयितुं शक्यते । $grid-columnsप्रत्येकस्य व्यक्तिगतस्तम्भस्य विस्तारं (प्रतिशतरूपेण) जनयितुं उपयुज्यते, यदा तु भङ्गबिन्दुविशिष्टविस्तारं अनुमन्यते यत् स्तम्भनालिकानां कृते $grid-gutter-widthसमानरूपेण विभक्तं padding-leftभवतिpadding-right

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

जाल स्तर

स्तम्भेभ्यः एव परं गत्वा, भवान् जालस्तरस्य संख्यां अपि अनुकूलितुं शक्नोति । यदि भवान् केवलं चत्वारि जालस्तराः इच्छति स्म, तर्हि भवान् $grid-breakpointsand $container-max-widthsइत्येतत् किमपि एतादृशं प्रति अद्यतनं करिष्यति स्म:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass चरयोः अथवा मानचित्रेषु किमपि परिवर्तनं कुर्वन् भवद्भिः स्वपरिवर्तनानि रक्षित्वा पुनः संकलितुं आवश्यकं भविष्यति । एवं कृत्वा स्तम्भविस्तारस्य, आफ्सेट्, क्रमस्य च कृते पूर्वनिर्धारितजालवर्गाणां नूतनं समुच्चयं निर्गमिष्यति । कस्टम् ब्रेकपॉइण्ट् इत्यस्य उपयोगाय प्रतिक्रियाशीलदृश्यता-उपयोगिता अपि अद्यतनं भविष्यति । px(not rem, em, or ) इत्यत्र जालमूल्यानि सेट् कर्तुं सुनिश्चितं कुर्वन्तु %।