जाल प्रणाली

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

इस पृष्ठ पर

उदाहरण

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

flexbox इत्यस्य नूतनं वा अपरिचितं वा? पृष्ठभूमि, शब्दावली, मार्गदर्शिकाः, कोडस्निपेट् च कृते एतत् CSS Tricks flexbox मार्गदर्शिकां पठन्तु ।

स्तम्भ

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

उपर्युक्तं उदाहरणं अस्माकं पूर्वनिर्धारितजालवर्गाणां उपयोगेन सर्वेषु उपकरणेषु दृश्यपोर्टेषु च त्रीणि समानविस्तारयुक्तानि स्तम्भानि निर्माति । ते स्तम्भाः पृष्ठे मातापितृभिः सह केन्द्रीकृताः सन्ति .container|

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

तत् भङ्गयित्वा, अत्र जालव्यवस्था कथं एकत्र आगच्छति इति दर्शितम् अस्ति ।

अस्माकं जालम् षट् प्रतिक्रियाशीलविरामबिन्दून् समर्थयति | भङ्गबिन्दवः माध्यमप्रश्नानां आधारेण भवन्ति min-width, अर्थात् ते तत् भङ्गबिन्दुं तस्य उपरि च सर्वान् प्रभावितयन्ति (उदा . , , , , and इत्यत्र .col-sm-4प्रवर्तते ) । अस्य अर्थः अस्ति यत् भवान् प्रत्येकं breakpoint द्वारा container तथा column आकारणं व्यवहारं च नियन्त्रयितुं शक्नोति ।smmdlgxlxxl
पात्र केन्द्र एवं क्षैतिज रूप से अपनी सामग्री को पैड करें। .containerप्रतिक्रियाशीलपिक्सेलविस्तारस्य .container-fluidकृते , width: 100%सर्वेषु दृश्यपोर्ट्-यन्त्रेषु च कृते, अथवा द्रव-पिक्सेल-विस्तारयोः संयोजनाय प्रतिक्रियाशील-पात्रस्य (उदा., ) .container-mdउपयुज्यताम् ।
पङ्क्तयः स्तम्भानां कृते वेष्टकाः सन्ति । प्रत्येकं स्तम्भे paddingतेषां मध्ये अन्तरिक्षं नियन्त्रयितुं क्षैतिजं (गटर इति उच्यते) भवति । paddingततः ऋणात्मकमार्जिनयुक्तेषु पङ्क्तिषु एतत् प्रतिहृतं भवति यत् भवतः स्तम्भेषु सामग्री वामपार्श्वे अधः दृग्गतरूपेण संरेखिता भवति इति सुनिश्चितं भवति । पङ्क्तयः अपि स्तम्भस्य आकारीकरणं समानरूपेण प्रयोक्तुं परिवर्तकवर्गान् अपि समर्थयन्ति तथा च भवतः सामग्रीयाः अन्तरालं परिवर्तयितुं गटरवर्गान् ।
स्तम्भाः अविश्वसनीयतया लचीलाः भवन्ति। प्रतिपङ्क्तौ १२ टेम्पलेट् स्तम्भाः उपलभ्यन्ते, येन भवान् किमपि संख्यायां स्तम्भान् विस्तृतान् तत्त्वानां भिन्नानि संयोजनानि निर्मातुं शक्नोति । स्तम्भवर्गाः span कर्तुं टेम्पलेट् स्तम्भानां संख्यां सूचयन्ति (उदा., col-4spans four) । widths प्रतिशतेषु सेट् भवन्ति अतः भवतः सदैव समानं सापेक्षिकं आकारणं भवति ।
नाली अपि प्रतिक्रियाशीलाः अनुकूलनीयाः च भवन्ति । Gutter classes सर्वेषु breakpoints मध्ये उपलभ्यन्ते , अस्माकं margin तथा padding spacing इत्यस्य सर्वेषां समानाकारैः सह . वर्गैः सह क्षैतिजनालिकां परिवर्तयन्तु .gx-*, , सह ऊर्ध्वाधरनालिकां परिवर्तयन्तु .gy-*, अथवा .g-*वर्गैः सह सर्वाणि नालिकानि परिवर्तयन्तु । .g-0नालिकानां निष्कासनार्थं अपि उपलभ्यते ।
Sass चर, मानचित्र, तथा mixins जालम् शक्तिं ददाति । यदि भवान् Bootstrap मध्ये पूर्वनिर्धारितजालवर्गाणां उपयोगं कर्तुम् इच्छति तर्हि अधिकशब्दार्थचिह्नसहितं स्वकीयं निर्मातुं अस्माकं जालस्य स्रोतः Sass इत्यस्य उपयोगं कर्तुं शक्नोति । वयं भवतः कृते अधिकाधिकलचीलतायै एतान् Sass चरानाम् उपभोगार्थं केचन CSS कस्टम् गुणाः अपि समाविष्टवन्तः ।

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

जालविकल्पाः

Bootstrap इत्यस्य जालप्रणाली सर्वेषु षट् पूर्वनिर्धारितविरामबिन्दुषु, तथा च यत्किमपि भङ्गबिन्दुषु अनुकूलितं भवति तत् अनुकूलितुं शक्नोति । षट् पूर्वनिर्धारितजालस्तराः निम्नलिखितरूपेण सन्ति ।

अतिरिक्त लघु (xs) .
लघु (स्म) ९.
मध्यम (मद्) ६.
बृहत् (lg) ९.
अतिरिक्त विशाल (xl) .
अतिरिक्त अतिरिक्त बड़ा (xxl) .

यथा उपरि उल्लिखितम्, एतेषु प्रत्येकस्मिन् भङ्गबिन्दुषु स्वकीयः पात्रः, अद्वितीयवर्गः उपसर्गः, परिवर्तकाः च सन्ति । अत्र एतेषु विच्छेदबिन्दुषु जालपुटं कथं परिवर्तते इति दर्शितम् अस्ति ।

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

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

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

सम-विस्तारः

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

1 of 2

२ of २

1 of 3

2 of 3

३ of ३

html

<div class="container text-center">
  <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>

एकं स्तम्भविस्तारं सेट् करणम्

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

1 of 3

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

३ of ३

1 of 3

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

३ of ३

html

<div class="container text-center">
  <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 ३

html

<div class="container text-center">
  <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.

कोल

कोल-८

कोल-४

html

<div class="container text-center">
  <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) क्षैतिजं भवति ।

कोल-स्म-८

कोल-स्म-४

कोल-स्म

html

<div class="container text-center">
  <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>

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

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

.कोल-मद्-८

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

.कोल-६

html

<div class="container text-center">
  <!-- 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>

पङ्क्तिस्तम्भाः

.row-cols-*भवतः सामग्रीं विन्यासं च सर्वोत्तमरूपेण प्रतिपादयन्तः स्तम्भानां संख्यां शीघ्रं सेट् कर्तुं प्रतिक्रियाशीलवर्गाणां उपयोगं कुर्वन्तु । यत्र सामान्यवर्गाः .col-*व्यक्तिगतस्तम्भेषु (उदा., ) प्रवर्तन्ते .col-md-4, तत्र पङ्क्तिस्तम्भवर्गाः .rowशॉर्टकटरूपेण अभिभावके सेट् भवन्ति । भवता सह .row-cols-autoस्तम्भान् तेषां प्राकृतिकविस्तारं दातुं शक्नोति।

मूलभूतजालविन्यासान् शीघ्रं निर्मातुं अथवा स्वकार्डविन्यासान् नियन्त्रयितुं एतेषां पङ्क्तिस्तम्भवर्गाणां उपयोगं कुर्वन्तु ।

स्तम्भ

html

<div class="container text-center">
  <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>

स्तम्भ

html

<div class="container text-center">
  <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>

स्तम्भ

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

html

<div class="container text-center">
  <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>

स्तम्भ

html

<div class="container text-center">
  <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>

स्तम्भ

html

<div class="container text-center">
  <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);
  }
}

नीडं करणम्

पूर्वनिर्धारितजालेन सह स्वस्य सामग्रीं नेस्ट् कर्तुं, विद्यमानस्य स्तम्भस्य अन्तः नूतनं स्तम्भसमूहं .rowच योजयन्तु । नेस्टेड् पङ्क्तयः स्तम्भसमूहः समाविष्टः भवेत् यत् १२ वा न्यूनतरं वा योजयति (भवतः सर्वेषां १२ उपलब्धानां स्तम्भानां उपयोगः आवश्यकः नास्ति) ।.col-sm-*.col-sm-*

स्तर 1: .col-sm-3

स्तर 2: .col-8 .col-sm-6

स्तर 2: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

मिक्सिन्

व्यक्तिगतजालस्तम्भानां कृते शब्दार्थ 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

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

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

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

मुख्य सामग्री

गौण सामग्री

html

<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-row-columnsis used to set the maximum number of columns of .row-cols-*, अस्याः सीमायाः उपरि कस्यापि संख्यायाः अवहेलना भवति ।

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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 ) इत्यत्र जालमूल्यानि सेट् कर्तुं सुनिश्चितं कुर्वन्तु %।