Source

اوسر

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

ڪنٽينر

ڪنٽينر بوٽ اسٽريپ ۾ سڀ کان وڌيڪ بنيادي ترتيب واري عنصر آهن ۽ اسان جي ڊفالٽ گرڊ سسٽم کي استعمال ڪرڻ وقت گهربل آهن . هڪ جوابي، مقرر-چوڏهين ڪنٽينر مان چونڊيو (مطلب max-widthهر بريڪ پوائنٽ تي ان جي تبديلين) يا فلوڊ-چوڪ (مطلب اهو 100%هر وقت وسيع آهي).

جڏهن ته ڪنٽينر nested ٿي سگهن ٿا، اڪثر layouts هڪ nested ڪنٽينر جي ضرورت نه ڪندا آھن.

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

مڪمل ويڪر ڪنٽينر لاءِ استعمال ڪريو .container-fluid، ويوپورٽ جي پوري چوٽي تائين.

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

جوابي وقفي پوائنٽون

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

Bootstrap بنيادي طور تي ھيٺين ميڊيا سوالن جي حدن کي استعمال ڪري ٿو- يا بريڪ پوائنٽس- اسان جي ماخذ 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

نوٽ ڪريو ته جيئن برائوزر في الحال رينج جي حوالي سان سوالن کي سپورٽ نٿا ڪن ، اسان ڪم ڪريون ٿا حدن min-۽ max-اڳياڙين ۽ ويو پورٽس جي حدن جي وچ ۾ جزوي ويڪر سان (جيڪي ڪجهه حالتن ۾ ٿي سگهن ٿيون هاءِ ڊي پي آئي ڊوائيسز تي، مثال طور) انهن موازن لاءِ اعليٰ درستگي سان قدر استعمال ڪندي. .

هڪ ڀيرو ٻيهر، اهي ميڊيا سوال پڻ موجود آهن 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) { ... }

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

@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قدر سان گڏ انهن جي سرحد کي ڀائرن جي عنصرن تي ڏيکارڻ لاءِ.