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

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

कंटेनर के बा

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

बूटस्ट्रैप तीन अलग-अलग कंटेनर के संगे आवेला:

• .containermax-width, जवन हर प्रतिक्रियाशील ब्रेकपॉइंट पर एगो सेट करेला
• .container-fluid, जवन कि width: 100%हर ब्रेकपॉइंट पर बा
• .container-{breakpoint}, जवन width: 100%निर्दिष्ट ब्रेकपॉइंट तक होला

नीचे दिहल तालिका में देखावल गइल बा कि हर कंटेनर के max-widthमूल से .containerआ .container-fluidहर ब्रेकपॉइंट के पार कइसे तुलना कइल जाला।

इनहन के एक्शन में देखीं आ हमनी के ग्रिड उदाहरण में तुलना करीं .

ऑल-इन-वन के बा

हमनी के डिफ़ॉल्ट .containerक्लास एगो रिस्पांसिव, फिक्स-विड्थ कंटेनर हवे, मतलब max-widthहर ब्रेकपॉइंट पर एकर बदलाव।

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

तरल

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

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

जवाबदेह बा

बूटस्ट्रैप v4.4 में रिस्पांसिव कंटेनर नया बा। max-widthइ लोग रउआ के एगो क्लास निर्दिष्ट करे के अनुमति देला जवन 100% चौड़ा होखे जब तक कि निर्दिष्ट ब्रेकपॉइंट तक ना पहुंच जाला, ओकरा बाद हमनी के हर उच्च ब्रेकपॉइंट खातिर 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>

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

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

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

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

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

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

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

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

@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