اوسر

توهان جي بوٽ اسٽريپ پروجيڪٽ کي ترتيب ڏيڻ لاءِ اجزاء ۽ آپشنز، بشمول ريپنگ ڪنٽينرز، هڪ طاقتور گرڊ سسٽم، هڪ لچڪدار ميڊيا اعتراض، ۽ جوابي يوٽيلٽي ڪلاسز.

ڪنٽينر

ڪنٽينر بوٽ اسٽريپ ۾ سڀ کان وڌيڪ بنيادي ترتيب واري عنصر آهن ۽ اسان جي ڊفالٽ گرڊ سسٽم کي استعمال ڪرڻ وقت گهربل آهن . ڪنٽينر استعمال ڪيا ويندا آهن، پيڊ، ۽ (ڪڏهن ڪڏهن) انهن جي اندر مواد کي مرڪز ڪرڻ لاء. جڏهن ته ڪنٽينر nested ٿي سگهن ٿا، اڪثر layouts هڪ nested ڪنٽينر جي ضرورت نه ڪندا آھن.

بوٽ اسٽراپ ٽن مختلف ڪنٽينرز سان گڏ اچي ٿو:

• .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>

جوابدار

جوابي ڪنٽينرز بوٽ اسٽراپ 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 پهريون ڀيرو موبائيل ٿيڻ لاءِ ترقي ڪئي وئي آهي، اسان پنهنجي ترتيب ۽ انٽرفيس لاءِ سمجھدار بريڪ پوائنٽس ٺاهڻ لاءِ ميڊيا جا ڪجهه سوال استعمال ڪندا آهيون. اهي بريڪ پوائنٽ اڪثر ڪري گهٽ ۾ گهٽ ڏيک جي ويڪرائي تي ٻڌل آهن ۽ اسان کي اجازت ڏين ٿا ته عناصر کي ماپڻ جي طور تي وييو پورٽ جي تبديلين.

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

ساڳئي اسڪرين سائيز جي حد کي ھدف ڪرڻ لاء ساس ميڪسين ھوندو:

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

Z-انڊيڪس

ڪيترائي بوٽ اسٽريپ اجزاء استعمال ڪن ٿا z-index، سي ايس ايس ملڪيت جيڪا مواد کي ترتيب ڏيڻ لاء ٽيون محور مهيا ڪندي ڪنٽرول ترتيب ۾ مدد ڪري ٿي. اسان بوٽ اسٽريپ ۾ ڊفالٽ z-انڊيڪس اسڪيل استعمال ڪريون ٿا جيڪو مناسب طريقي سان نيويگيشن، ٽول ٽائپس ۽ پاپ اوور، ماڊلز ۽ وڌيڪ ڪرڻ لاءِ ٺاهيو ويو آهي.

اهي اعليٰ قدر هڪ صوابديدي نمبر تي شروع ٿين ٿا، اعليٰ ۽ خاص طور تي تڪرار کان بچڻ لاءِ ڪافي. اسان کي انھن جي ھڪڙي معياري سيٽ جي ضرورت آھي اسان جي پرت ٿيل حصن ۾ - ٽول ٽائپس، پاپ اوور، نيوبارز، ڊراپ ڊائونز، ماڊل- تنھنڪري اسان رويي ۾ معقول طور تي مطابقت رکي سگھون ٿا. ڪو به سبب ناهي ته اسان 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قيمتون 1، 2, ۽ 3ڊفالٽ، هور، ۽ فعال رياستن لاءِ. هوور/فوڪس/فعال تي، اسان هڪ خاص عنصر کي اڳيان آڻيون ٿا هڪ اعليٰ z-indexقدر سان گڏ انهن جي سرحد کي ڀائرن جي عنصرن تي ڏيکارڻ لاءِ.