Source

जाल प्रणाली

द्वादशस्तम्भप्रणाली, पञ्च पूर्वनिर्धारितप्रतिक्रियाशीलस्तराः, 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 जालप्रणाल्याः पक्षाः कथं सुलभसारणीयुक्तेन बहुषु उपकरणेषु कार्यं कुर्वन्ति ।

	अतिरिक्त लघु <576px	लघु ≥576px	मध्यम ≥768px	बड़ा ≥992px	अतिरिक्त बड़ा ≥1200px
अधिकतम पात्र चौड़ाई	न कोऽपि (स्वतः) २.	५४०px	७२०px इति	९६०px इति	1140px इति
वर्ग उपसर्गः	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# स्तम्भों का	१२
नाली चौड़ाई	३०px (स्तम्भस्य प्रत्येकं पार्श्वे १५px) ।
नेस्टेबल	आम्‌
स्तम्भ आदेश	आम्‌

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

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

सम-विस्तारः

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

1 of 2

२ of २

1 of 3

2 of 3

३ of ३

<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यत्र भवन्तः स्तम्भाः नूतनरेखां प्रति भग्नाः भवेयुः इति a सम्मिलितं कृत्वा बहुपङ्क्तयः विस्तृताः समानविस्तारयुक्ताः स्तम्भाः रचयन्तु । .w-100केनचित् प्रतिक्रियाशीलप्रदर्शनप्रयोगितायाः सह मिश्रणं कृत्वा विरामं प्रतिक्रियाशीलं कुर्वन्तु |

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

1 of 3

2 of 3 (विस्तृततर) .

३ of ३

1 of 3

2 of 3 (विस्तृततर) .

३ of ३

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

चर चौड़ाई सामग्री

३ of ३

1 of 3

चर चौड़ाई सामग्री

३ of ३

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

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

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

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

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

कोल-स्म-८

कोल-स्म-४

कोल-स्म

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

मिश्रण एवं मिलान करें

न इच्छति यत् भवतः स्तम्भाः केवलं केषुचित् जालस्तरयोः स्तम्भनं कुर्वन्तु? आवश्यकतानुसारं प्रत्येकस्य स्तरस्य कृते भिन्नवर्गस्य संयोजनस्य उपयोगं कुर्वन्तु । एतत् सर्वं कथं कार्यं करोति इति उत्तमविचाराय अधोलिखितं उदाहरणं पश्यन्तु ।

.कोल-मद्-८

.कोल-६ .कोल-मद्-४

.कोल-६

<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 इत्यत्र ऋणात्मकं मार्जिन-उपयोगितायाः युग्मं कुर्वन्तु तथा च s .rowइत्यत्र मेलनं गद्दी-उपयोगिताम् । अवांछित-अतिप्रवाहं परिहरितुं वा माता .col- पिता अपि समायोजितुं आवश्यकं भवेत्, पुनः मेल-पैडिंग-उपयोगितायाः उपयोगेन ।.container.container-fluid

lgअत्र बृहत् ( ) breakpoint इत्यत्र उपरि च Bootstrap grid इत्यस्य अनुकूलनस्य उदाहरणम् अस्ति । वयं .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 alignment utilities इत्यस्य उपयोगं कुर्वन्तु । Internet Explorer 10-11 flex items इत्यस्य ऊर्ध्वाधरसंरेखणं न समर्थयति यदा flex container इत्यस्य a 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;
  }
}

व्यवहारे अत्र कथं दृश्यते। ध्यानं कुर्वन्तु अन्यैः सर्वैः पूर्वनिर्धारितजालवर्गैः (स्तम्भविस्ताराः, प्रतिक्रियाशीलस्तराः, पुनःक्रमाः, इत्यादीनि समाविष्टानि) सह भवान् एतस्य उपयोगं निरन्तरं कर्तुं शक्नोति ।

.कोल-स्म-६ .कोल-मद्-८

.कोल-६ .कोल-मद्-४

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

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

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

.कोल-९

.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 इत्यनेन सह सिद्धं भवति, परन्तु प्रत्येकं कार्यान्वयनविधिः एतस्य लेखा न कर्तुं शक्नोति ।

.कोल-६ .कोल-स्म-३

<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 (eg, ) सेट् कर्तुं शक्नोति । पञ्चसु जालस्तरयोः मध्ये माध्यमेन समर्थनं समावेशयति ।order.order-1.order-md-2112

प्रथमं DOM मध्ये कोऽपि आदेशः न प्रयुक्तः

द्वितीयं DOM मध्ये, बृहत्तरेण क्रमेण सह

DOM इत्यत्र तृतीयः, १ क्रमेण

<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

.कोल-मद्-४

.कोल-मद्-४ .ऑफसेट्-मद्-४

.कोल-मद्-३ .ऑफसेट्-मद्-३

.कोल-मद्-६ .ऑफसेट्-मद्-३

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

प्रतिक्रियाशील-विच्छेद-बिन्दुषु स्तम्भ-समाशोधनस्य अतिरिक्तं, भवद्भिः आफ्सेट्-पुनः सेट्-करणस्य आवश्यकता भवितुमर्हति । एतत् जाल उदाहरणे क्रियायां पश्यन्तु .

.कोल-स्म-५ .कोल-मद्-६

.कोल-स्म-५ .ऑफसेट-स्म-२ .कोल-मड-६ .ऑफसेट-मड-०

.कोल-स्म-६ .कोल-मद्-५ .कोल-लग-६

.कोल-स्म-६ .कोल-मड-५ .ऑफसेट-मड-२ .कोल-लग-६ .ऑफसेट-लग-०

<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 मध्ये गमनेन सह, भवान् margin utilities इत्यस्य उपयोगं कर्तुं शक्नोति यथा .mr-autosibling columns इत्येतत् परस्परं दूरं कर्तुं बाध्यते ।

.कोल-मद्-४

.कोल-मद्-४ .ml-auto

.कोल-मद्-३ .ml-md-auto

.कोल-ऑटो .मर्-ऑटो

.कोल-स्वतः

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

सस् मिक्सिन्

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कृते विस्तारं सेट् करोति ।

$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 ) इत्यत्र जालमूल्यानि सेट् कर्तुं सुनिश्चितं कुर्वन्तु %।