अवलोकनम्

भवतः Bootstrap परियोजनां विन्यस्तं कर्तुं घटकाः विकल्पाः च, यत्र wrapping containers, एकः शक्तिशाली ग्रिड् प्रणाली, एकः लचीलः media object, प्रतिक्रियाशीलाः उपयोगितावर्गाः च सन्ति

पात्राणि

Containers Bootstrap इत्यस्मिन् सर्वाधिकं मूलभूतं layout element अस्ति तथा च अस्माकं default grid system इत्यस्य उपयोगं कुर्वन् आवश्यकम् अस्ति | पात्राणां उपयोगः तेषां अन्तः सामग्रीं समाहितं कर्तुं, पैड् कर्तुं, (कदाचित्) केन्द्रीकृत्य च भवति । यद्यपि पात्राणि नेस्ट् कर्तुं शक्यन्ते तथापि अधिकांशविन्यासेषु नेस्टेड् पात्रस्य आवश्यकता नास्ति ।

बूटस्ट्रैप् त्रीणि भिन्नानि पात्राणि सह आगच्छति:

• .containermax-width, यत् प्रत्येकं प्रतिक्रियाशीलविरामबिन्दौ a सेट् करोति
• .container-fluid, यत् width: 100%सर्वेषु भङ्गबिन्दुषु भवति
• .container-{breakpoint}, यत् width: 100%निर्दिष्टभङ्गबिन्दुपर्यन्तं भवति

अधोलिखिता सारणी दर्शयति यत् प्रत्येकं पात्रस्य max-widthमूलस्य तुलनां कृत्वा .containerप्रत्येकं .container-fluidभङ्गबिन्दुं पारं कथं भवति।

तान् क्रियायां दृष्ट्वा अस्माकं Grid उदाहरणे तुलनां कुर्वन्तु |

सर्व-एकः

अस्माकं पूर्वनिर्धारितवर्गः .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% विस्तृतः अस्ति, यत्र , , तथा च इत्यनेन सह स्केल अप करिष्यति ।smmdlgxl

<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

पुनः, एते मीडिया प्रश्नाः 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 इत्यत्र वयं भ्रातृतत्त्वानां उपरि तेषां सीमां दर्शयितुं उच्चतरमूल्येन सह एकं विशेषं तत्त्वं अग्रभागे आनयामः ।123z-index