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