بریک پوائنٹس

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

• بریک پوائنٹس ریسپانسیو ڈیزائن کے بلڈنگ بلاکس ہیں۔ ان کو کنٹرول کرنے کے لیے استعمال کریں جب آپ کے لے آؤٹ کو کسی خاص ویو پورٹ یا ڈیوائس کے سائز میں موافق بنایا جا سکتا ہے۔

• بریک پوائنٹ کے ذریعے اپنے CSS کو آرکیٹیکٹ کرنے کے لیے میڈیا کے سوالات کا استعمال کریں۔ میڈیا کے سوالات CSS کی ایک خصوصیت ہیں جو آپ کو براؤزر اور آپریٹنگ سسٹم کے پیرامیٹرز کے سیٹ پر مبنی اسٹائلز کو مشروط طور پر لاگو کرنے کی اجازت دیتی ہیں۔ min-widthہم اپنے میڈیا سوالات میں سب سے زیادہ استعمال کرتے ہیں ۔

• موبائل سب سے پہلے، ذمہ دار ڈیزائن مقصد ہے. بوٹسٹریپ کے سی ایس ایس کا مقصد چھوٹے بریک پوائنٹ پر لے آؤٹ کو کام کرنے کے لیے کم سے کم اسٹائلز کو لاگو کرنا ہے، اور پھر بڑے آلات کے لیے اس ڈیزائن کو ایڈجسٹ کرنے کے لیے اسٹائلز پر پرتیں لگانا ہے۔ یہ آپ کے سی ایس ایس کو بہتر بناتا ہے، رینڈرنگ کے وقت کو بہتر بناتا ہے، اور آپ کے مہمانوں کو ایک بہترین تجربہ فراہم کرتا ہے۔

دستیاب بریک پوائنٹس

بوٹسٹریپ میں چھ ڈیفالٹ بریک پوائنٹس شامل ہیں، جنہیں بعض اوقات گرڈ ٹائرز کہا جاتا ہے، جوابی طور پر تعمیر کرنے کے لیے۔ اگر آپ ہماری سورس Sass فائلیں استعمال کر رہے ہیں تو ان بریک پوائنٹس کو حسب ضرورت بنایا جا سکتا ہے۔

ہر بریک پوائنٹ کا انتخاب کنٹینرز کو آرام سے رکھنے کے لیے کیا گیا تھا جن کی چوڑائی 12 کے ملٹیلز ہیں۔ بریک پوائنٹس عام ڈیوائس کے سائز اور ویو پورٹ کے طول و عرض کے ذیلی سیٹ کے بھی نمائندہ ہوتے ہیں- وہ خاص طور پر استعمال کے ہر کیس یا ڈیوائس کو نشانہ نہیں بناتے ہیں۔ اس کے بجائے، رینجز تقریباً کسی بھی ڈیوائس کے لیے مضبوط اور مستقل بنیاد فراہم کرتی ہیں۔

یہ بریک پوائنٹس ساس کے ذریعے حسب ضرورت ہیں — آپ انہیں ہماری اسٹائل شیٹ میں ایک ساس نقشہ میں تلاش کریں گے _variables.scss۔

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

ہمارے Sass نقشوں اور متغیرات میں ترمیم کرنے کے طریقے کے بارے میں مزید معلومات اور مثالوں کے لیے، براہ کرم گرڈ دستاویزات کے Sass سیکشن سے رجوع کریں ۔

میڈیا کے سوالات

چونکہ بوٹسٹریپ پہلے موبائل بننے کے لیے تیار کیا گیا ہے، اس لیے ہم اپنے لے آؤٹ اور انٹرفیس کے لیے سمجھدار بریک پوائنٹس بنانے کے لیے میڈیا کے کچھ سوالات استعمال کرتے ہیں۔ یہ بریک پوائنٹ زیادہ تر کم از کم ویو پورٹ کی چوڑائی پر مبنی ہوتے ہیں اور ویو پورٹ میں تبدیلی کے ساتھ ہی ہمیں عناصر کو بڑھانے کی اجازت دیتے ہیں۔

کم سے کم چوڑائی

بوٹسٹریپ بنیادی طور پر ہمارے لے آؤٹ، گرڈ سسٹم، اور اجزاء کے لیے ہمارے سورس 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 مکسین ہمارے Sass متغیرات میں اعلان کردہ اقدار کا استعمال کرتے ہوئے ہمارے مرتب کردہ CSS میں ترجمہ کرتے ہیں۔ مثال کے طور پر:

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