नियाळ

तुमचो Bootstrap प्रकल्प मांडपाखातीर घटक आनी पर्याय, जातूंत रॅपिंग कंटेनर, एक बळिश्ट ग्रिड प्रणाली, एक लवचीक माध्यम वस्तू, आनी प्रतिसाद दिवपी उपयुक्तताय वर्ग आसपावीत आसात.

पात्रां

कंटेनर हे बूटस्ट्रॅपांतले सगळ्यांत मुळावे मांडावळ घटक आसात आनी आमची मुलभूत ग्रिड प्रणाली वापरतना तांकां जाय पडटात . कंटेनरांचो उपेग तातूंत आशय दवरपाखातीर, पॅड करपाखातीर आनी (केन्ना केन्नाय) केंद्रीत करपाखातीर करतात. कंटेनरांक नेस्ट करूं येता, जाल्यार चडशा मांडावळींक नेस्टेड कंटेनराची गरज नासता.

बूटस्ट्रॅप तीन वेगवेगळ्या कंटेनरां वांगडा येता:

• .container, जें max-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>

प्रतिसाद दिवपी

Bootstrap v4.4 त प्रतिसाद दिवपी कंटेनर नवे आसात. ते तुमकां निर्दिश्ट केल्लो ब्रेकपॉइंट मेरेन पावमेरेन 100% रुंद आशिल्लो वर्ग निर्देशीत करपाक परवानगी दितात, ताचे उपरांत आमी max-widthदर एका उंचेल्या ब्रेकपॉइंटाक 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 पयली मोबायल जावपाक विकसीत केल्ल्यान, आमी आमच्या मांडावळी आनी संवादां खातीर समजदार ब्रेकपॉइंट तयार करपाक मुठीभर माध्यम क्वेरी वापरतात. हे ब्रेकपॉइंट चड करून किमान व्ह्यूपोर्ट रुंदायेचेर आदारीत आसतात आनी व्ह्यूपोर्ट बदलत वता तशें आमकां घटकांक स्केल करपाक परवानगी दितात.

बूटस्ट्रॅप मुखेलपणान आमच्या मांडावळ, ग्रिड प्रणाली, आनी घटकांखातीर आमच्या स्त्रोत 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

परत एक फावट, ह्यो मिडिया क्वेरी 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) { ... }

झॅड-सूचकांक

कितलेशेच Bootstrap घटक वापरतात z-index, CSS गुणधर्म जो सामुग्री वेवस्था करपाक तिसरो अक्ष पुरवण करून मांडावळ नियंत्रीत करपाक मदत करता. आमी Bootstrap त मुलभूत z-index प्रमाण वापरतात जें नेव्हिगेशन, टूलटिप्स आनी पॉपओव्हर, मोडल, आनी हेर योग्य रितीन थर घालपाक तयार केलां.

हीं चड मोलां मनमानी संख्येन सुरू जातात, चड आनी विशिश्टपणान संघर्श टाळपाइतले. आमकां आमच्या थरयल्ल्या घटकां मदीं हांचो मानक संच जाय-टूलटिप्स, पोपोव्हर्स, नावबार, ड्रॉपडावन, मोडल-म्हणून आमी वर्तनांनी वाजवी रितीन सुसंगत आसूं येता. 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