जाल प्रणाली
द्वादशस्तम्भप्रणाल्याः, षट् पूर्वनिर्धारितप्रतिक्रियाशीलस्तराः, Sass चराः तथा mixins, दर्जनशः पूर्वनिर्धारितवर्गाः च धन्यवादेन सर्वेषां आकारानां आकारानां च विन्यासानां निर्माणार्थं अस्माकं शक्तिशालिनः मोबाईल-प्रथम flexbox जालस्य उपयोगं कुर्वन्तु
उदाहरण
बूटस्ट्रैप् इत्यस्य जालप्रणाली सामग्रीं विन्यासयितुं संरेखयितुं च पात्राणां, पङ्क्तयः, स्तम्भानां च श्रृङ्खलायाः उपयोगं करोति । इदं flexbox इत्यनेन सह निर्मितम् अस्ति तथा च पूर्णतया प्रतिक्रियाशीलम् अस्ति। अधः उदाहरणं, जालप्रणाली कथं एकत्र आगच्छति इति गहनं व्याख्यानं च अस्ति ।
<div class="container">
<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 आकारणं व्यवहारं च नियन्त्रयितुं शक्नोति ।sm
md
lg
xl
xxl
-
पात्र केन्द्र एवं क्षैतिज रूप से अपनी सामग्री को पैड करें।
.container
प्रतिक्रियाशीलपिक्सेलविस्तारस्य कृते, सर्वेषु दृश्यस्थानेषु उपकरणेषु च.container-fluid
कृते , अथवा द्रवस्य पिक्सेलविस्तारस्य च संयोजनाय प्रतिक्रियाशीलपात्रस्य (उदा., ) उपयोगं कुर्वन्तु ।width: 100%
.container-md
-
पङ्क्तयः स्तम्भानां कृते वेष्टकाः सन्ति । प्रत्येकं स्तम्भे
padding
तेषां मध्ये अन्तरिक्षं नियन्त्रयितुं क्षैतिजं (गटर इति उच्यते) भवति ।padding
ततः ऋणात्मकमार्जिनयुक्तेषु पङ्क्तिषु एतत् प्रतिहृतं भवति यत् भवतः स्तम्भेषु सामग्री वामपार्श्वे अधः दृग्गतरूपेण संरेखिता भवति इति सुनिश्चितं भवति । पङ्क्तयः अपि स्तम्भस्य आकारीकरणं एकरूपेण प्रयोक्तुं परिवर्तकवर्गान् अपि समर्थयन्ति तथा च भवतः सामग्रीयाः अन्तरालं परिवर्तयितुं गटरवर्गान् । -
स्तम्भाः अविश्वसनीयतया लचीलाः भवन्ति। प्रतिपङ्क्तौ १२ टेम्पलेट् स्तम्भाः उपलभ्यन्ते, येन भवान् किमपि संख्यायां स्तम्भान् विस्तृतान् तत्त्वानां भिन्नानि संयोजनानि निर्मातुं शक्नोति । स्तम्भवर्गाः स्पैन् कर्तुं टेम्पलेट् स्तम्भानां संख्यां सूचयन्ति (उदा.,
col-4
spans four) ।width
s प्रतिशतेषु सेट् भवन्ति अतः भवतः सदैव समानं सापेक्षिकं आकारणं भवति । -
नाली अपि प्रतिक्रियाशीलाः अनुकूलनीयाः च भवन्ति । 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 xs
to xxl
. भवतः आवश्यकतानुसारं प्रत्येकं 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>
एकं स्तम्भविस्तारं सेट् करणम्
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>
प्रतिक्रियाशील वर्ग
बूटस्ट्रैप् इत्यस्य जालपुटे जटिलप्रतिसादात्मकविन्यासनिर्माणार्थं पूर्वनिर्धारितवर्गाणां षट् स्तराः सन्ति । अतिरिक्त-लघु, लघु, मध्यम, बृहत्, अथवा अतिरिक्त-बृहत् उपकरणेषु यथायोग्यं भवतः स्तम्भानां आकारं अनुकूलितं कुर्वन्तु ।
सर्वे भङ्गबिन्दवः
ये जालपुटाः लघुतमात् बृहत्तमपर्यन्तं समानाः सन्ति, तेषां कृते .col
and .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>
पङ्क्तिस्तम्भाः
.row-cols-*
भवतः सामग्रीं विन्यासं च सर्वोत्तमरूपेण प्रतिपादयन्तः स्तम्भानां संख्यां शीघ्रं सेट् कर्तुं प्रतिक्रियाशीलवर्गाणां उपयोगं कुर्वन्तु । यत्र सामान्यवर्गाः .col-*
व्यक्तिगतस्तम्भेषु (उदा., ) प्रवर्तन्ते .col-md-4
, तत्र पङ्क्तिस्तम्भवर्गाः .row
शॉर्टकटरूपेण अभिभावके सेट् भवन्ति । भवता सह .row-cols-auto
स्तम्भान् तेषां प्राकृतिकविस्तारं दातुं शक्नोति।
मूलभूतजालविन्यासान् शीघ्रं निर्मातुं अथवा स्वकार्डविन्यासान् नियन्त्रयितुं एतेषां पङ्क्तिस्तम्भवर्गाणां उपयोगं कुर्वन्तु ।
<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-auto">
<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);
}
}
नीडं करणम्
पूर्वनिर्धारितजालेन सह स्वस्य सामग्रीं नेस्ट् कर्तुं, विद्यमानस्य स्तम्भस्य अन्तः नूतनं स्तम्भसमूहं .row
च योजयन्तु । नेस्टेड् पङ्क्तयः स्तम्भसमूहः समाविष्टः भवेत् यत् १२ वा न्यूनतरं वा योजयति (भवतः सर्वेषां १२ उपलब्धानां स्तम्भानां उपयोगः आवश्यकः नास्ति) ।.col-sm-*
.col-sm-*
<div class="container">
<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-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);
}
}
<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: 1.5rem !default;
जाल स्तर
स्तम्भेभ्यः एव परं गत्वा, भवान् जालस्तरस्य संख्यां अपि अनुकूलितुं शक्नोति । यदि भवान् केवलं चत्वारि जालस्तराः इच्छति स्म, तर्हि भवान् $grid-breakpoints
and $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 ) इत्यत्र जालमूल्यानि सेट् कर्तुं सुनिश्चितं कुर्वन्तु %
।