अवलोकन कइल जाव

अपना बूटस्ट्रैप प्रोजेक्ट के बिछावे खातिर घटक आ विकल्प, जवना में रैपिंग कंटेनर, एगो शक्तिशाली ग्रिड सिस्टम, एगो लचीला मीडिया ऑब्जेक्ट, आ रिस्पांसिव यूटिलिटी क्लास शामिल बा।

कंटेनर के बा

बूटस्ट्रैप में कंटेनर सबसे बेसिक लेआउट तत्व ह आ हमनी के डिफ़ॉल्ट ग्रिड सिस्टम के इस्तेमाल करत घरी एकर जरूरत होला . रिस्पांसिव, फिक्स-विड्थ वाला कंटेनर (मने max-widthकि हर ब्रेकपॉइंट पर एकर बदलाव) या फ्लूइड-विड्थ (मने कि ई 100%हर समय चौड़ा होखे) में से चुनीं।

जबकि कंटेनर सभ के नेस्ट कइल जा सके ला, ज्यादातर लेआउट सभ में नेस्टेड कंटेनर के जरूरत ना पड़े ला।

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

पूरा चौड़ाई वाला कंटेनर खातिर इस्तेमाल करीं .container-fluid, जवन व्यूपोर्ट के पूरा चौड़ाई में फइलल होखे।

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

रिस्पांसिव ब्रेकपॉइंट के बारे में बतावल गइल बा

चूँकि बूटस्ट्रैप के पहिले मोबाइल होखे खातिर विकसित कइल गइल बा, हमनी के अपना लेआउट आ इंटरफेस खातिर समझदार ब्रेकपॉइंट बनावे खातिर मुट्ठी भर मीडिया क्वेरी के इस्तेमाल करेनी जा। ई ब्रेकपॉइंट सभ ज्यादातर न्यूनतम व्यूपोर्ट चौड़ाई पर आधारित होलें आ हमनी के व्यूपोर्ट बदले के साथ तत्व सभ के स्केल अप करे के इजाजत देला।

बूटस्ट्रैप मुख्य रूप से हमनी के लेआउट, ग्रिड सिस्टम, आ घटक सभ खातिर हमनी के स्रोत Sass फाइल सभ में निम्नलिखित मीडिया क्वेरी रेंज सभ के इस्तेमाल करे ला-या ब्रेकपॉइंट सभ।

// 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) { ... }

चूँकि हमनी के आपन स्रोत CSS Sass में लिखेनी जा, हमनी के सभ मीडिया क्वेरी 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

एक बेर फेरु से, ई मीडिया क्वेरी सभ सास मिक्सिन के माध्यम से भी उपलब्ध बाड़ी सऽ:

@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) { ... }

ई मीडिया क्वेरी सभ सास मिक्सिन के माध्यम से भी उपलब्ध बाड़ी:

@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) { ... }

एकही स्क्रीन साइज रेंज के लक्ष्य बनावे खातिर सास मिक्सिन होई:

@include media-breakpoint-between(md, xl) { ... }

जेड-सूचकांक के बा

कई गो बूटस्ट्रैप घटक सभ के इस्तेमाल होला z-index, CSS गुण जे सामग्री के ब्यवस्था करे खातिर तीसरा अक्ष उपलब्ध करा के लेआउट के नियंत्रित करे में मदद करे ला। हमनी के बूटस्ट्रैप में एगो डिफ़ॉल्ट जेड-इंडैक्स पैमाना के उपयोग करेनी जा जवन नेविगेशन, टूलटिप आ पॉपओवर, मोडल, आ अउरी बहुत कुछ के सही तरीका से लेयर करे खातिर डिजाइन कइल गइल बा।

ई उच्च मान सभ के सुरुआत मनमाना संख्या से होला, उच्च आ पर्याप्त बिसेस रूप से कि आदर्श रूप से टकराव से बचल जा सके ला। हमनी के अपना परतदार घटक सभ में इनहन के एगो मानक सेट के जरूरत बा-टूलटिप, पोपोवर, नवबार, ड्रॉपडाउन, मोडल-ताकि हमनी के व्यवहार सभ में उचित रूप से सुसंगत हो सके लीं। कवनो कारण नइखे कि हमनी का 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आ डिफ़ॉल्ट , होवर, आ सक्रिय अवस्था सभ खातिर। होवर/फोकस/एक्टिव पर हमनी के एगो खास तत्व के सबसे अधिका मान के साथ सबसे आगे ले आवेनी जा ताकि भाई-बहिन के तत्वन पर आपन सीमा देखावल जा सके।123z-index