अवलोकनम्
भवतः Bootstrap परियोजनां विन्यस्तं कर्तुं घटकाः विकल्पाः च, यत्र wrapping containers, एकः शक्तिशाली ग्रिड् प्रणाली, एकः लचीलः media object, प्रतिक्रियाशीलाः उपयोगितावर्गाः च सन्ति
पात्राणि
Containers Bootstrap इत्यस्मिन् सर्वाधिकं मूलभूतं layout element अस्ति तथा च अस्माकं default grid system इत्यस्य उपयोगं कुर्वन् आवश्यकम् अस्ति | पात्राणां उपयोगः तेषां अन्तः सामग्रीं समाहितं कर्तुं, पैड् कर्तुं, (कदाचित्) केन्द्रीकृत्य च भवति । यद्यपि पात्राणि नेस्ट् कर्तुं शक्यन्ते तथापि अधिकांशविन्यासेषु नेस्टेड् पात्रस्य आवश्यकता नास्ति ।
बूटस्ट्रैप् त्रीणि भिन्नानि पात्राणि सह आगच्छति:
.container
max-width
, यत् प्रत्येकं प्रतिक्रियाशीलविरामबिन्दौ a सेट् करोति.container-fluid
, यत्width: 100%
सर्वेषु भङ्गबिन्दुषु भवति.container-{breakpoint}
, यत्width: 100%
निर्दिष्टभङ्गबिन्दुपर्यन्तं भवति
अधोलिखिता सारणी दर्शयति यत् प्रत्येकं पात्रस्य max-width
मूलस्य तुलनां कृत्वा .container
प्रत्येकं .container-fluid
भङ्गबिन्दुं पारं कथं भवति।
तान् क्रियायां दृष्ट्वा अस्माकं Grid उदाहरणे तुलनां कुर्वन्तु |
अतिरिक्त लघु <576px |
लघु ≥576px |
मध्यम ≥768px |
बड़ा ≥992px |
अतिरिक्त बड़ा ≥1200px |
|
---|---|---|---|---|---|
.container |
१००% ९. | ५४०px | ७२०px इति | ९६०px इति | 1140px इति |
.container-sm |
१००% ९. | ५४०px | ७२०px इति | ९६०px इति | 1140px इति |
.container-md |
१००% ९. | १००% ९. | ७२०px इति | ९६०px इति | 1140px इति |
.container-lg |
१००% ९. | १००% ९. | १००% ९. | ९६०px इति | 1140px इति |
.container-xl |
१००% ९. | १००% ९. | १००% ९. | १००% ९. | 1140px इति |
.container-fluid |
१००% ९. | १००% ९. | १००% ९. | १००% ९. | १००% ९. |
सर्व-एक-इति
अस्माकं पूर्वनिर्धारितवर्गः .container
एकः प्रतिक्रियाशीलः, नियत-विस्तार-पात्रः अस्ति, अर्थात् max-width
प्रत्येकस्मिन् breakpoint मध्ये तस्य परिवर्तनम् ।
<div class="container">
<!-- Content here -->
</div>
द्रव
.container-fluid
पूर्णविस्तारस्य पात्रस्य कृते उपयुज्यताम् , दृश्यपोर्टस्य सम्पूर्णविस्तारं विस्तृतं भवति ।
<div class="container-fluid">
...
</div>
प्रतिक्रियाशीलः
Bootstrap v4.4 इत्यस्मिन् प्रतिक्रियाशीलाः पात्राः नवीनाः सन्ति । ते भवन्तं निर्दिष्टं breakpoint यावत् 100% विस्तृतं वर्गं निर्दिष्टुं शक्नुवन्ति, तदनन्तरं वयं max-width
प्रत्येकं उच्चतर breakpoint कृते s प्रयोजयामः । यथा, यावत् भङ्गबिन्दुः न प्राप्यते .container-sm
तावत् आरभ्यतुं 100% विस्तृतः अस्ति, यत्र , , तथा च इत्यनेन सह स्केल अप करिष्यति ।sm
md
lg
xl
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
प्रतिक्रियाशील ब्रेकपॉइंट
यतः Bootstrap प्रथमं चलं भवितुं विकसितम् अस्ति, अतः वयं अस्माकं लेआउट्-अन्तरफलकानां कृते बोधगम्य-ब्रेक-पॉइण्ट्-निर्माणार्थं मुष्टिभ्यां मीडिया-प्रश्नानां उपयोगं कुर्मः । एते breakpoints अधिकतया न्यूनतम viewport widths इत्यस्य आधारेण भवन्ति तथा च viewport इत्यस्य परिवर्तनेन अस्मान् elements scale up कर्तुं शक्नुवन्ति ।
Bootstrap मुख्यतया अस्माकं विन्यासस्य, जालप्रणाल्याः, घटकानां च कृते अस्माकं स्रोत Sass सञ्चिकासु निम्नलिखितमाध्यमप्रश्नपरिधिषु—अथवा breakpoints—उपयोगं करोति ।
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
यतः वयं Sass मध्ये अस्माकं स्रोत CSS लिखामः, अस्माकं सर्वाणि media queries Sass mixins मार्गेण उपलभ्यन्ते:
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
वयं कदाचित् अन्यदिशि गच्छन्तीनां मीडियाप्रश्नानां उपयोगं कुर्मः (दत्तः स्क्रीन आकारः वा लघुतरः वा ):
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
min-
तथा max-
उपसर्गाणां दृश्यपोर्टानां च सीमानां परितः कार्यं कुर्मः
(यत् उच्च-dpi उपकरणेषु कतिपयेषु परिस्थितिषु भवितुं शक्नोति, उदाहरणार्थं) .
पुनः, एते मीडिया प्रश्नाः Sass mixins मार्गेण अपि उपलभ्यन्ते:
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
न्यूनतमं अधिकतमं च ब्रेकपॉइण्ट् विस्तारं उपयुज्य स्क्रीन-आकारस्य एकस्य खण्डस्य लक्ष्यीकरणार्थं मीडिया-प्रश्नानि, मिक्सिन्-इत्यादीनि अपि सन्ति ।
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
एते मीडिया प्रश्नाः Sass mixins मार्गेण अपि उपलभ्यन्ते:
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
तथैव मीडियाप्रश्नानि बहुविधविच्छेदबिन्दुविस्तारं व्याप्नुवन्ति:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
समानं स्क्रीन आकारपरिधिं लक्ष्यं कर्तुं Sass mixin स्यात्:
@include media-breakpoint-between(md, xl) { ... }
Z-सूचकाङ्कः
अनेकाः Bootstrap घटकाः utilize z-index
, CSS गुणं यत् सामग्रीं व्यवस्थापयितुं तृतीयं अक्षं प्रदातुं विन्यासं नियन्त्रयितुं सहायकं भवति । वयं Bootstrap मध्ये पूर्वनिर्धारितं z-index स्केलम् उपयुञ्ज्महे यत् नेविगेशनं, टूल्टिप्स तथा च popovers, मोडल्स्, इत्यादीनि च सम्यक् स्तरयितुं डिजाइनं कृतम् अस्ति ।
एते उच्चतरमूल्यानि मनमानासंख्यायां आरभन्ते, उच्चैः विशिष्टानि च यत् आदर्शरूपेण विग्रहान् परिहरितुं शक्नुवन्ति । अस्माकं स्तरितघटकानाम् मध्ये एतेषां मानकसमूहस्य आवश्यकता वर्तते-टूलटिप्स्, पोपोवर्स्, नवबार्स्, ड्रॉपडाउन्स्, मोडल्स्-अतः वयं व्यवहारेषु यथोचितरूपेण सुसंगताः भवितुम् अर्हति तत्र न कारणं यत् वयं 100
+ अथवा 500
+ इत्यस्य उपयोगं कर्तुं न शक्तवन्तः।
एतेषां व्यक्तिगतमूल्यानां अनुकूलनं वयं न प्रोत्साहयामः; यदि भवन्तः एकं परिवर्तयन्ति तर्हि भवन्तः सम्भवतः तान् सर्वान् परिवर्तयितुं प्रवृत्ताः भवेयुः।
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
घटकानां अन्तः अतिव्याप्तसीमाः (उदा., इनपुट् समूहेषु बटन्स् तथा इनपुट्) नियन्त्रयितुं, वयं , , इत्यस्य न्यूनानि एकाङ्कमूल्यानि उपयुञ्ज्महे तथा z-index
च पूर्वनिर्धारित , होवर, सक्रियस्थितीनां कृते च । hover/focus/active इत्यत्र वयं भ्रातृतत्त्वानां उपरि तेषां सीमां दर्शयितुं उच्चतरमूल्येन सह एकं विशेषं तत्त्वं अग्रभागे आनयामः ।1
2
3
z-index