अवलोकनम्

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

पात्राणि

Containers Bootstrap इत्यस्मिन् सर्वाधिकं मूलभूतं layout element अस्ति तथा च अस्माकं default grid system इत्यस्य उपयोगं कुर्वन् आवश्यकम् अस्ति | प्रतिक्रियाशील, नियत-विस्तार-पात्रात् (अर्थात् max-widthप्रत्येक-विच्छेद-बिन्दौ तस्य परिवर्तनम्) अथवा द्रव-विस्तारात् (अर्थात् 100%सर्वदा विस्तृतं भवति) चयनं कुर्वन्तु ।

यद्यपि पात्राणि नेस्ट् कर्तुं शक्यन्ते तथापि अधिकांशविन्यासेषु नेस्टेड् पात्रस्य आवश्यकता नास्ति ।

<div class="container">
  <!-- Content here -->
</div>

.container-fluidपूर्णविस्तारस्य पात्रस्य कृते उपयुज्यताम् , दृश्यपोर्टस्य सम्पूर्णविस्तारं व्याप्नोति ।

<div class="container-fluid">
  ...
</div>

प्रतिक्रियाशील ब्रेकपॉइंट

यतः Bootstrap प्रथमं चलं भवितुं विकसितम् अस्ति, अतः वयं अस्माकं लेआउट्-अन्तरफलकानां कृते बोधगम्य-ब्रेक-पॉइण्ट्-निर्माणार्थं मुष्टिभ्यां मीडिया-प्रश्नानां उपयोगं कुर्मः । एते breakpoints अधिकतया न्यूनतम viewport widths इत्यस्य आधारेण भवन्ति तथा च viewport इत्यस्य परिवर्तनेन अस्मान् elements scale up कर्तुं शक्नुवन्ति ।

Bootstrap मुख्यतया अस्माकं विन्यासस्य, जालप्रणाल्याः, घटकानां च कृते अस्माकं स्रोत Sass सञ्चिकासु निम्नलिखितमाध्यमप्रश्नपरिधिषु—अथवा breakpoints—उपयोगं करोति ।

// Extra small devices (portrait phones, less than 576px)
// No media query 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 मार्गेण उपलभ्यन्ते:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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) { ... }

न्यूनतमं अधिकतमं च ब्रेकपॉइण्ट् विस्तारं उपयुज्य स्क्रीन-आकारस्य एकस्य खण्डस्य लक्ष्यीकरणार्थं मीडिया-प्रश्नानि, मिक्सिन्-इत्यादीनि अपि सन्ति ।

// 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