بريڪ پوائنٽس

بنيادي تصورات

• بريڪ پوائنٽس جوابي ڊيزائن جا بلڊنگ بلاڪ آهن. انهن کي ڪنٽرول ڪرڻ لاءِ استعمال ڪريو جڏهن توهان جي ترتيب کي ڪنهن خاص ڏيئو پورٽ يا ڊيوائس جي سائيز تي ترتيب ڏئي سگهجي ٿي.

• بريڪ پوائنٽ ذريعي توهان جي CSS کي آرڪيٽيڪيٽ ڪرڻ لاءِ ميڊيا جا سوال استعمال ڪريو. ميڊيا جا سوال CSS جي هڪ خصوصيت آهن جيڪي توهان کي مشروط طور تي برائوزر ۽ آپريٽنگ سسٽم جي پيٽرولن جي سيٽ تي ٻڌل انداز لاڳو ڪرڻ جي اجازت ڏين ٿيون. اسان عام طور min-widthتي اسان جي ميڊيا جي سوالن ۾ استعمال ڪندا آهيون.

• موبائل پهريون، جوابي ڊيزائن مقصد آهي. بوٽ اسٽريپ جي سي ايس ايس جو مقصد ننڍي کان ننڍي بريڪ پوائنٽ تي لي آئوٽ ڪم ڪرڻ لاءِ گهٽ ۾ گهٽ اسٽائل لاڳو ڪرڻ آهي، ۽ پوءِ وڏين ڊوائيسز لاءِ ان ڊيزائن کي ترتيب ڏيڻ لاءِ اسلوب تي پرتون. اهو توهان جي CSS کي بهتر بڻائي ٿو، رينڊرنگ وقت کي بهتر بڻائي ٿو، ۽ توهان جي سنڌين لاءِ هڪ بهترين تجربو مهيا ڪري ٿو.

دستياب وقفي پوائنٽون

بوٽ اسٽريپ ۾ ڇهه ڊفالٽ بريڪ پوائنٽس شامل آهن، ڪڏهن ڪڏهن حوالو ڏنو ويندو آهي گرڊ ٽائر ، جوابي طور تي تعمير ڪرڻ لاءِ. اهي وقفي پوائنٽون ترتيب ڏئي سگهجن ٿيون جيڪڏهن توهان استعمال ڪري رهيا آهيو اسان جو ذريعو Sass فائلون.

ھر بريڪ پوائنٽ کي چونڊيو ويو ھو آرام سان ڪنٽينرز کي رکڻ لاءِ جن جي ويڪر 12 کان ملٽيز ھوندي آھي. بريڪ پوائنٽس عام ڊيوائس جي سائزن ۽ ويوپورٽ جي طول و عرض جي ذيلي سيٽ جا به نمائندا آھن- اھي خاص طور تي ھر استعمال جي صورت يا ڊوائيس کي ھدف نه ڪندا آھن. ان جي بدران، حدون تقريبا ڪنهن به ڊوائيس لاء تعمير ڪرڻ لاء مضبوط ۽ مسلسل بنياد فراهم ڪن ٿيون.

اهي وقفي پوائنٽون Sass ذريعي ترتيب ڏئي سگهجن ٿيون- توهان انهن کي اسان جي _variables.scssاسٽائل شيٽ ۾ Sass نقشي ۾ ڳوليندا.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

اسان جي Sass نقشن ۽ متغيرن کي ڪيئن تبديل ڪرڻ بابت وڌيڪ معلومات ۽ مثالن لاءِ، مھرباني ڪري ڏسو گرڊ دستاويزن جي ساس سيڪشن .

ميڊيا جا سوال

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

منٽ ويڪر

Bootstrap بنيادي طور تي ھيٺين ميڊيا سوالن جي حدن کي استعمال ڪري ٿو- يا بريڪ پوائنٽس- اسان جي ماخذ Sass فائلن ۾ اسان جي ترتيب، گرڊ سسٽم، ۽ اجزاء لاء.

// Source 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) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// 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;
  }
}

اهي Sass mixins اسان جي مرتب ڪيل CSS ۾ اسان جي Sass متغير ۾ بيان ڪيل قدرن کي استعمال ڪندي ترجمو ڪن ٿا. مثال طور:

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

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

وڌ ۾ وڌ ويڪر

اسان ڪڏهن ڪڏهن ميڊيا جي سوالن کي استعمال ڪندا آهيون جيڪي ٻئي طرف وڃو (ڏيل اسڪرين سائيز يا ننڍو ):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

اهي ميلاپ انهن اعلانيل وقفي پوائنٽن کي وٺي، .02pxانهن مان ڪڍي ڇڏيندا آهن، ۽ انهن کي اسان جي max-widthقدرن طور استعمال ڪندا آهن. مثال طور:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

اڪيلو وقفو

اتي پڻ ميڊيا سوالن ۽ ميڪسينز آھن ھڪڙي ھڪڙي حصي کي ھدف ڪرڻ لاءِ اسڪرين سائيز جي گھٽ ۾ گھٽ ۽ وڌ کان وڌ بريڪ پوائنٽ چوٿون استعمال ڪندي.

@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) { ... }
@include media-breakpoint-only(xxl) { ... }

مثال طور، @include media-breakpoint-only(md) { ... }نتيجو ٿيندو:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

وقفي پوائنٽن جي وچ ۾

ساڳئي طرح، ميڊيا سوالن کي ڪيترن ئي وقفي پوائنٽ جي چوٽي تي وڌائي سگھي ٿو:

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

جنهن جا نتيجا:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }