مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

v5 میں منتقلی

بوٹسٹریپ سورس فائلوں، دستاویزات، اور اجزاء میں تبدیلیوں کو ٹریک کریں اور ان کا جائزہ لیں تاکہ آپ کو v4 سے v5 میں منتقل کرنے میں مدد ملے۔

اس صفحہ پر

v5.2.0

تازہ کاری شدہ ڈیزائن

بوٹسٹریپ v5.2.0 پورے پروجیکٹ میں مٹھی بھر اجزاء اور خصوصیات کے لیے ایک لطیف ڈیزائن اپ ڈیٹ کی خصوصیات رکھتا ہے، خاص طور border-radiusپر بٹنوں اور فارم کنٹرولز پر بہتر اقدار کے ذریعے ۔ ہماری دستاویزات کو ایک نئے ہوم پیج کے ساتھ بھی اپ ڈیٹ کیا گیا ہے، دستاویزات کی آسان ترتیب جو سائڈبار کے سیکشنز کو مزید نہیں گراتی ہے، اور بوٹسٹریپ آئیکنز کی مزید نمایاں مثالیں ۔

مزید CSS متغیرات

CSS متغیرات کو استعمال کرنے کے لیے ہم نے اپنے تمام اجزاء کو اپ ڈیٹ کر دیا ہے۔ جبکہ Sass اب بھی ہر چیز کو زیر کرتا ہے، ہر جزو کو اپ ڈیٹ کر دیا گیا ہے تاکہ اجزاء کی بیس کلاسز پر CSS متغیرات کو شامل کیا جا سکے (مثال کے طور پر، .btn) بوٹسٹریپ کو مزید حقیقی وقت میں حسب ضرورت بنانے کی اجازت دیتا ہے۔ بعد کی ریلیزز میں، ہم اپنے لے آؤٹ، فارمز، مددگاروں اور یوٹیلیٹیز میں CSS متغیرات کے اپنے استعمال کو بڑھانا جاری رکھیں گے۔ ان کے متعلقہ دستاویزات کے صفحات پر ہر جزو میں CSS متغیرات کے بارے میں مزید پڑھیں۔

بوٹسٹریپ 6 تک ہمارا سی ایس ایس متغیر استعمال کچھ حد تک نامکمل رہے گا۔ اگرچہ ہم ان کو پورے بورڈ میں لاگو کرنا پسند کریں گے، لیکن ان میں تبدیلیاں پیدا ہونے کا خطرہ ہوتا ہے۔ مثال کے طور پر، اگر آپ کسی وجہ سے $alert-border-width: var(--bs-border-width)کر رہے تھے تو ہمارے سورس کوڈ میں سیٹنگ آپ کے اپنے کوڈ میں ممکنہ Sass کو توڑ دیتی ہے۔$alert-border-width * 2

اس طرح، جہاں بھی ممکن ہو، ہم مزید CSS متغیرات کی طرف بڑھتے رہیں گے، لیکن براہ کرم تسلیم کریں کہ ہمارا نفاذ v5 میں قدرے محدود ہو سکتا ہے۔

نئی_maps.scss

بوٹسٹریپ v5.2.0 نے ایک نئی Sass فائل متعارف کرائی ہے _maps.scss۔ یہ اس مسئلے کو حل کرنے کے لیے کئی ساس نقشے نکالتا ہے _variables.scssجہاں ثانوی نقشوں پر اصل نقشے کی اپ ڈیٹس کا اطلاق نہیں ہوتا تھا جو ان میں توسیع کرتے ہیں۔ مثال کے طور پر، کی اپ ڈیٹس کو دوسرے تھیم نقشوں پر لاگو نہیں کیا جا رہا تھا جو کلیدی حسب ضرورت ورک فلو کو توڑتے ہوئے، $theme-colorsپر انحصار کرتے تھے۔ $theme-colorsمختصراً، ساس کی ایک حد ہوتی ہے جہاں ایک بار ڈیفالٹ متغیر یا نقشہ استعمال ہو جاتا ہے ، اسے اپ ڈیٹ نہیں کیا جا سکتا۔ CSS متغیرات کے ساتھ بھی اسی طرح کی کمی ہے جب وہ دوسرے CSS متغیرات کو تحریر کرنے کے لیے استعمال ہوتے ہیں۔

یہی وجہ ہے کہ بوٹسٹریپ میں متغیر تخصیصات کو بعد میں آنا پڑتا ہے @import "functions"، لیکن اس سے پہلے @import "variables"اور ہمارے باقی امپورٹ اسٹیک۔ ساس نقشوں پر بھی یہی لاگو ہوتا ہے — آپ کو ڈیفالٹس کو استعمال کرنے سے پہلے اوور رائڈ کرنا چاہیے۔ درج ذیل نقشوں کو نئے میں منتقل کر دیا گیا ہے _maps.scss:

  • $theme-colors-rgb
  • $utilities-colors
  • $utilities-text
  • $utilities-text-colors
  • $utilities-bg
  • $utilities-bg-colors
  • $negative-spacers
  • $gutters

آپ کی حسب ضرورت بوٹسٹریپ سی ایس ایس کی تعمیرات اب ایک علیحدہ نقشے کی درآمد کے ساتھ کچھ اس طرح نظر آنی چاہئیں۔

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

نئی افادیت

  • سیمبولڈ فونٹس کے لیے شامل کرنے کے لیے توسیع شدہ font-weightافادیت ۔.fw-semibold
  • مزید اختیارات کے لیے دو نئے سائز، اور مزید اختیارات کو شامل کرنے کے لیے توسیع شدہ border-radiusیوٹیلیٹیز ۔.rounded-4.rounded-5

اضافی تبدیلیاں

  • $enable-container-classesنیا آپشن متعارف کرایا ۔ — اب تجرباتی CSS گرڈ لے آؤٹ میں آپٹ کرتے وقت، .container-*کلاسز اب بھی مرتب ہوں گی، جب تک کہ یہ آپشن پر سیٹ نہ ہو false۔ کنٹینرز بھی اب اپنے گٹر کی قدر رکھتے ہیں۔

  • آف کینوس جزو میں اب جوابی تغیرات ہیں۔ اصل .offcanvasکلاس میں کوئی تبدیلی نہیں کی گئی — یہ تمام ویو پورٹس میں مواد کو چھپاتا ہے۔ اسے جوابدہ بنانے کے لیے، اس .offcanvasکلاس کو کسی بھی .offcanvas-{sm|md|lg|xl|xxl}کلاس میں تبدیل کریں۔

  • موٹے ٹیبل ڈیوائیڈرز اب آپٹ ان ہیں۔ - ہم نے ٹیبل گروپس کے درمیان بارڈر کو اوور رائڈ کرنے کے لیے موٹی اور زیادہ مشکل کو ہٹا دیا ہے اور اسے ایک اختیاری کلاس میں منتقل کر دیا ہے جس کو آپ درخواست دے سکتے ہیں .table-group-divider، مثال کے طور پر ٹیبل دستاویزات دیکھیں۔

  • Intersection Observer API کو استعمال کرنے کے لیے Scrollspy کو دوبارہ لکھا گیا ہے ، جس کا مطلب ہے کہ آپ کو رشتہ دار پیرنٹ ریپرز، فرسودہoffsetکنفیگرز، اور مزید کی ضرورت نہیں ہے۔ اپنے اسکرول اسپی کے نفاذ کو تلاش کریں تاکہ ان کی نیوی ہائی لائٹنگ میں زیادہ درست اور مستقل ہوں۔

  • پاپ اوور اور ٹول ٹپس اب CSS متغیرات استعمال کرتے ہیں۔ متغیرات کی تعداد کو کم کرنے کے لیے کچھ CSS متغیرات کو ان کے Sass ہم منصبوں سے اپ ڈیٹ کیا گیا ہے۔ نتیجے کے طور پر، اس ریلیز میں تین متغیرات کو فرسودہ کر دیا گیا ہے: $popover-arrow-color, $popover-arrow-outer-color, اور $tooltip-arrow-color.

  • نئے .text-bg-{color}مددگار شامل کیے گئے۔ انفرادی .text-*اور .bg-*افادیت کو ترتیب دینے کے بجائے، اب آپ متضاد پیش منظر کے ساتھ سیٹ کرنے کے لیے .text-bg-*مددگاروں کا استعمال کر سکتے ہیں ۔background-colorcolor

  • .form-check-reverseلیبلز اور متعلقہ چیک باکسز/ریڈیو کے آرڈر کو پلٹانے کے لیے موڈیفائر شامل کیا گیا۔

  • نئی کلاس کے ذریعے ٹیبلز میں شامل دھاری دار کالم سپورٹ۔.table-striped-columns

تبدیلیوں کی مکمل فہرست کے لیے، GitHub پر v5.2.0 پروجیکٹ دیکھیں ۔

v5.1.0

  • CSS گرڈ لے آؤٹ کے لیے تجرباتی تعاون شامل کیا گیا ۔ — یہ ایک کام جاری ہے، اور ابھی تک پروڈکشن کے استعمال کے لیے تیار نہیں ہے، لیکن آپ Sass کے ذریعے نئی خصوصیت کا انتخاب کر سکتے ہیں۔ اسے فعال کرنے کے لیے، ترتیب دے کر ڈیفالٹ گرڈ کو غیر فعال کریں اور سیٹنگ $enable-grid-classes: falseکے ذریعے CSS گرڈ کو فعال کریں $enable-cssgrid: true۔

  • آف کینوس کو سپورٹ کرنے کے لیے اپ ڈیٹ کردہ navbars۔ - ریسپانسیو کلاسز اور کچھ آف کینوس مارک اپ کے ساتھ کسی بھی نیوبار میں آف کینوس دراز شامل کریں ۔.navbar-expand-*

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

  • کولپس پلگ ان اب افقی گرنے کی حمایت کرتا ہے۔ - کی بجائے کو ختم .collapse-horizontalکرنے کے لیے اپنے میں شامل کریں ۔ یا سیٹ کرکے براؤزر کو دوبارہ پینٹ کرنے سے گریز کریں۔.collapsewidthheightmin-heightheight

  • نئے اسٹیک اور عمودی اصول کے مددگار شامل کیے گئے۔ - سٹیکس کے ساتھ اپنی مرضی کے مطابق لے آؤٹ بنانے کے لیے فوری طور پر متعدد فلیکس باکس پراپرٹیز کا اطلاق کریں ۔ افقی ( .hstack) اور عمودی ( .vstack) ڈھیروں میں سے انتخاب کریں۔ نئے مددگار<hr> کے ساتھ عناصر کی طرح عمودی تقسیم شامل کریں ۔.vr

  • نئے عالمی :rootسی ایس ایس متغیرات کو شامل کیا گیا۔ - اسٹائل :rootکو کنٹرول کرنے کے لیے لیول میں کئی نئے CSS متغیرات شامل کیے گئے ۔ <body>ہماری افادیت اور اجزاء سمیت مزید کام جاری ہیں، لیکن فی الحال حسب ضرورت سیکشن میں CSS متغیرات کو پڑھیں ۔

  • CSS متغیرات کو استعمال کرنے کے لیے رنگ اور بیک گراؤنڈ یوٹیلیٹیز کو اوور ہال کیا گیا، اور نئی ٹیکسٹ اوپیسٹی اور بیک گراؤنڈ اوپیسٹی یوٹیلیٹیز کو شامل کیا۔ — .text-* اور .bg-*افادیتیں اب CSS متغیرات اور rgba()رنگ کی قدروں کے ساتھ بنائی گئی ہیں، جس سے آپ آسانی سے کسی بھی یوٹیلیٹی کو نئی دھندلاپن افادیت کے ساتھ اپنی مرضی کے مطابق بنا سکتے ہیں۔

  • ہمارے اجزاء کو کس طرح اپنی مرضی کے مطابق بنانا ہے یہ دکھانے کے لیے نئے ٹکڑوں کی مثالیں شامل کی گئیں۔ — ہماری نئی ٹکڑوں کی مثالوں کے ساتھ حسب ضرورت اجزاء اور دیگر عام ڈیزائن پیٹرن استعمال کرنے کے لیے تیار ہوں ۔ فوٹر ، ڈراپ ڈاؤن ، فہرست گروپس ، اور ماڈلز شامل ہیں۔

  • پاپ اوور اور ٹول ٹپس سے غیر استعمال شدہ پوزیشننگ اسٹائل کو ہٹا دیا گیا ہے کیونکہ یہ مکمل طور پر پوپر کے ذریعہ ہینڈل کیے جاتے ہیں۔ $tooltip-marginفرسودہ کر دیا گیا ہے اور nullعمل میں مقرر کیا گیا ہے۔

مزید معلومات چاہتے ہیں؟ v5.1.0 بلاگ پوسٹ پڑھیں۔

ارے وہاں! Bootstrap 5، v5.0.0 کی ہماری پہلی بڑی ریلیز میں تبدیلیاں ذیل میں دستاویزی ہیں۔ وہ اوپر دکھائی گئی اضافی تبدیلیوں کی عکاسی نہیں کرتے ہیں۔

انحصار

  • jQuery کو گرا دیا گیا۔
  • Popper v1.x سے Popper v2.x میں اپ گریڈ کیا گیا۔
  • Libsass کو Dart Sass سے تبدیل کر دیا گیا کیونکہ ہمارے Sass مرتب کرنے والے Libsass کو فرسودہ کر دیا گیا تھا۔
  • ہماری دستاویزات بنانے کے لیے جیکیل سے ہیوگو منتقل ہوئے۔

براؤزر سپورٹ

  • انٹرنیٹ ایکسپلورر 10 اور 11 کو چھوڑ دیا گیا۔
  • ڈراپ مائیکروسافٹ ایج <16 (لیگیسی ایج)
  • فائر فاکس <60 کو چھوڑ دیا گیا۔
  • گرا دیا گیا سفاری <12
  • iOS Safari <12 کو چھوڑ دیا گیا۔
  • کروم <60 کو چھوڑ دیا گیا۔

دستاویزی تبدیلیاں

  • ہوم پیج، دستاویزات لے آؤٹ، اور فوٹر کو دوبارہ ڈیزائن کیا گیا۔
  • نیا پارسل گائیڈ شامل کیا گیا۔
  • Sass، عالمی ترتیب کے اختیارات، رنگ سکیمیں، CSS متغیرات، اور مزید پر نئی تفصیلات کے ساتھ، v4 کے تھیمنگ صفحہ کو تبدیل کرتے ہوئے، نیا حسب ضرورت سیکشن شامل کیا گیا۔
  • تمام فارم دستاویزات کو نئے فارمز سیکشن میں دوبارہ ترتیب دیا، مواد کو مزید فوکس شدہ صفحات میں توڑ دیا۔
  • اسی طرح، لے آؤٹ سیکشن کو اپ ڈیٹ کیا ، تاکہ گرڈ کے مواد کو مزید واضح طور پر ظاہر کیا جا سکے۔
  • "Navs" جزو والے صفحہ کا نام بدل کر "Navs اور Tabs" رکھ دیا گیا۔
  • "چیکز" صفحہ کا نام بدل کر "چیک اور ریڈیوز" رکھ دیا گیا۔
  • navbar کو دوبارہ ڈیزائن کیا اور ایک نیا subnav شامل کیا تاکہ ہماری سائٹس اور دستاویزات کے ورژن کے ارد گرد جانا آسان ہو جائے۔
  • تلاش کے میدان کے لیے نیا کی بورڈ شارٹ کٹ شامل کیا گیا: Ctrl + /.

سس

  • فالتو اقدار کو ہٹانا آسان بنانے کے لیے ہم نے ڈیفالٹ ساس میپ انضمام کو ختم کر دیا ہے۔ ذہن میں رکھیں کہ اب آپ کو ساس نقشوں میں تمام اقدار کی وضاحت کرنی ہوگی $theme-colors۔ Sass نقشوں سے نمٹنے کا طریقہ دیکھیں ۔

  • توڑنےcolor-yiq()فنکشن اور متعلقہ متغیرات کا نام تبدیل کر دیا color-contrast()کیونکہ اب یہ YIQ کلر اسپیس سے متعلق نہیں ہے۔ ملاحظہ کریں نمبر 30168۔

    • $yiq-contrasted-thresholdکا نام تبدیل کر دیا گیا ہے $min-contrast-ratio۔
    • $yiq-text-darkاور $yiq-text-lightبالترتیب نام بدل کر $color-contrast-darkاور رکھا گیا ہے $color-contrast-light۔

  • توڑنےزیادہ منطقی نقطہ نظر کے لیے میڈیا کے استفسار کے مکسنس کے پیرامیٹرز تبدیل ہو گئے ہیں۔

    • media-breakpoint-down()media-breakpoint-down(lg)اگلے بریک پوائنٹ کی بجائے خود بریک پوائنٹ کا استعمال کرتا ہے (مثال کے طور پر، media-breakpoint-down(md)ٹارگٹ ویو پورٹ سے چھوٹے lg)۔
    • اسی طرح، میں دوسرا پیرامیٹر media-breakpoint-between()بھی اگلے بریک پوائنٹ کی بجائے خود بریک پوائنٹ کا استعمال کرتا ہے (مثلاً اور کے درمیان ویو پورٹس کو ٹارگٹ media-between(sm, lg)کرنے کی بجائے )۔media-breakpoint-between(sm, md)smlg

  • توڑنے$enable-print-stylesپرنٹ شیلیوں اور متغیر کو ہٹا دیا گیا ۔ پرنٹ ڈسپلے کلاسز اب بھی آس پاس ہیں۔ ملاحظہ کریں نمبر 28339

  • توڑنےمتغیر کے حق میں color()ڈراپ، اور theme-color()افعال ۔ ملاحظہ کریں نمبر 29083gray()

  • توڑنےtheme-color-level()فنکشن کا نام تبدیل کر دیا گیا color-level()اور اب صرف $theme-colorرنگوں کی بجائے کسی بھی رنگ کو قبول کرتا ہے۔ دیکھیں #29083 دھیان سے: color-level() بعد میں ڈراپ کیا گیا تھا v5.0.0-alpha3۔

  • توڑنےنام تبدیل کر دیا گیا $enable-prefers-reduced-motion-media-queryاور اختصار کے لیے ۔$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers

  • توڑنےمکسچر کو ہٹا دیا bg-gradient-variant()۔ تیار کردہ کلاسوں .bg-gradientکے بجائے عناصر میں گریڈینٹ شامل کرنے کے لیے کلاس کا استعمال کریں ۔.bg-gradient-*

  • توڑنے پہلے سے فرسودہ مکسنس کو ہٹا دیا گیا:

    • hover،،،، اور hover-focus_plain-hover-focushover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(متعلقہ یوٹیلیٹی کلاس کو بھی گرا دیا، .text-hide)
    • visibility()
    • form-control-focus()

  • توڑنےSass کے اپنے کلر اسکیلنگ فنکشن کے ساتھ ٹکراؤ سے بچنے کے لیے scale-color()فنکشن کا نام تبدیل کر دیا گیا۔shift-color()

  • box-shadowmixins اب قدروں کی اجازت دیتے ہیں اور متعدد دلائل سے nullڈراپ کرتے ہیں۔ ملاحظہ کریں نمبر 30394none

  • مکسین کی border-radius()اب ڈیفالٹ ویلیو ہے۔

رنگین نظام

  • کلر سسٹم جس کے ساتھ کام کیا گیا تھا color-level()اور $theme-color-intervalاسے ایک نئے رنگ سسٹم کے حق میں ہٹا دیا گیا تھا۔ ہمارے کوڈبیس میں تمام lighten()اور فنکشنز کو اور سے بدل دیا گیا ہے۔ یہ فنکشنز رنگ کو ایک مقررہ مقدار میں ہلکا پن تبدیل کرنے کے بجائے سفید یا سیاہ کے ساتھ ملا دیں گے۔ یا تو رنگ کو رنگ یا سایہ دے گا اس پر منحصر ہے کہ آیا اس کا وزن پیرامیٹر مثبت ہے یا منفی۔ مزید تفصیلات کے لیے #30622 دیکھیں ۔darken()tint-color()shade-color()shift-color()

  • ہر رنگ کے لیے نئے ٹنٹ اور شیڈز شامل کیے گئے، ہر بنیادی رنگ کے لیے نو الگ الگ رنگ فراہم کیے گئے، بطور نئے Sass متغیرات۔

  • بہتر رنگ کے برعکس۔ WCAG 2.1 AA کنٹراسٹ کو یقینی بنانے کے لیے 3:1 سے 4.5:1 تک رنگین کنٹراسٹ ریشو کو ٹکرایا اور نیلے، سبز، سیان، اور گلابی رنگوں کو اپ ڈیٹ کیا گیا۔ ہمارے رنگ کے برعکس رنگ کو سے میں تبدیل کر $gray-900دیا $black۔

  • اپنے رنگوں کے نظام کو سپورٹ کرنے کے لیے، ہم نے اپنے رنگوں کو مناسب طریقے سے مکس کرنے کے لیے نئی حسب ضرورت tint-color()اور افعال شامل کیے ہیں۔shade-color()

گرڈ اپ ڈیٹس

  • نیا بریک پوائنٹ! کے لیے اور اوپر نیا xxlبریک پوائنٹ شامل 1400pxکیا گیا۔ دیگر تمام بریک پوائنٹس میں کوئی تبدیلی نہیں۔

  • بہتر گٹر۔ گٹر اب ریمز میں سیٹ ہیں، اور v4 ( 1.5rem، یا تقریبا 24px، نیچے سے 30px) سے تنگ ہیں۔ یہ ہمارے گرڈ سسٹم کے گٹروں کو ہماری وقفہ کاری کی افادیت کے ساتھ سیدھ میں کرتا ہے۔

    • افقی/عمودی گٹروں، افقی گٹروں، اور عمودی گٹروں کو کنٹرول کرنے کے لیے نئی گٹر کلاس ( .g-*, .gx-*, and ) شامل کی گئی۔.gy-*
    • توڑنےگٹر کی نئی افادیت سے ملنے کے لیے نام تبدیل کر دیا .no-guttersگیا ۔.g-0

  • کالمز اب position: relativeلاگو نہیں ہوئے ہیں، لہذا آپ کو .position-relativeاس رویے کو بحال کرنے کے لیے کچھ عناصر شامل کرنے پڑ سکتے ہیں۔

  • توڑنے.order-*کئی کلاسوں کو گرا دیا جو اکثر غیر استعمال شدہ ہوتے ہیں۔ اب ہم صرف آؤٹ آف دی باکس فراہم .order-1کرتے ہیں۔.order-5

  • توڑنےجزو کو گرا دیا .mediaکیونکہ یہ آسانی سے افادیت کے ساتھ نقل کیا جا سکتا ہے. مثال کے لیے #28265 اور فلیکس یوٹیلیٹیز صفحہ دیکھیں ۔

  • توڑنے bootstrap-grid.cssbox-sizing: border-boxاب عالمی باکس کے سائز کو دوبارہ ترتیب دینے کے بجائے صرف کالم پر لاگو ہوتا ہے۔ اس طرح، ہمارے گرڈ اسٹائل کو بغیر کسی مداخلت کے زیادہ جگہوں پر استعمال کیا جا سکتا ہے۔

  • $enable-grid-classesکنٹینر کلاسز کی نسل کو مزید غیر فعال نہیں کرتا ہے۔ دیکھیے نمبر 29146۔

  • make-colمکسین کو بغیر کسی مخصوص سائز کے برابر کالموں میں ڈیفالٹ میں اپ ڈیٹ کیا ۔

مواد، ریبوٹ، وغیرہ

  • RFS اب بطور ڈیفالٹ فعال ہے۔ مکسین کا استعمال کرتے ہوئے سرخیاںکے ساتھ اپنے پیمانے پرfont-size()ایڈجسٹ ہو جائیں گییہ خصوصیت پہلے v4 کے ساتھ آپٹ ان تھی۔font-size

  • توڑنے$display-*ہمارے متغیرات کو تبدیل کرنے اور $display-font-sizesساس نقشہ کے ساتھ ہماری ڈسپلے ٹائپوگرافی کو اوور ہال کیا ۔ ایک واحد اور ایڈجسٹ s $display-*-weightکے لیے انفرادی متغیرات کو بھی ہٹا دیا ۔$display-font-weightfont-size

  • .display-*سرخی کے دو نئے سائز شامل کیے گئے ، .display-5اور .display-6.

  • لنکس کو بطور ڈیفالٹ انڈر لائن کیا جاتا ہے (صرف ہوور پر نہیں)، جب تک کہ وہ مخصوص اجزاء کا حصہ نہ ہوں۔

  • ٹیبلز کو ان کے اسٹائل کو ریفریش کرنے کے لیے دوبارہ ڈیزائن کیا گیا اور اسٹائلنگ پر مزید کنٹرول کے لیے انہیں CSS متغیرات کے ساتھ دوبارہ بنایا گیا۔

  • توڑنےنیسٹڈ ٹیبلز اب سٹائلز کا وارث نہیں ہیں۔

  • توڑنے .thead-lightاور مختلف قسم کی کلاسوں .thead-darkکے حق میں چھوڑ دیا گیا ہے .table-*جو تمام ٹیبل عناصر ( thead, tbody, tfoot, tr, thand td) کے لیے استعمال کیا جا سکتا ہے۔

  • توڑنےtable-row-variant()مکسین کا نام تبدیل کر دیا گیا ہے اور table-variant()صرف 2 پیرامیٹرز کو قبول کرتا ہے: $color(رنگ کا نام) اور $value(رنگ کوڈ)۔ بارڈر کا رنگ اور لہجے کے رنگ خود بخود ٹیبل فیکٹر متغیر کی بنیاد پر شمار کیے جاتے ہیں۔

  • ٹیبل سیل پیڈنگ متغیر کو -yاور میں تقسیم کریں -x۔

  • توڑنےکلاس چھوڑ .pre-scrollableدی۔ دیکھیے نمبر 29135

  • توڑنے .text-*یوٹیلیٹیز اب لنکس میں ہوور اور فوکس سٹیٹس کو شامل نہیں کرتی ہیں۔ .link-*اس کے بجائے مددگار کلاسز استعمال کی جا سکتی ہیں۔ دیکھیے نمبر 29267

  • توڑنےکلاس چھوڑ .text-justifyدی۔ دیکھیے نمبر 29793

  • توڑنے <hr>عناصر اب انتساب کی بہتر حمایت کرنے heightکے بجائے استعمال کرتے ہیں۔ یہ پیڈنگ یوٹیلیٹیز کے استعمال کے قابل بناتا ہے تاکہ موٹے ڈیوائیڈرز بنائے جائیں (مثلاً، )۔bordersize<hr class="py-1">

  • ڈیفالٹ افقی padding-leftآن <ul>اور <ol>عناصر کو براؤزر ڈیفالٹ سے 40pxری سیٹ کریں 2rem۔

  • شامل $enable-smooth-scrollکیا گیا، جو عالمی سطح پر لاگو ہوتا ہے—سوائے ان صارفین کے جو میڈیا کے استفسار scroll-behavior: smoothکے ذریعے کم حرکت کا مطالبہ کرتے ہیں ۔ دیکھیں نمبر 31877prefers-reduced-motion

RTL

  • افقی سمت کے مخصوص متغیرات، یوٹیلیٹیز، اور مکسنز کا نام تبدیل کر دیا گیا ہے تاکہ منطقی خصوصیات کو استعمال کیا جا سکے جیسا کہ فلیکس باکس لے آؤٹ میں پایا جاتا ہے—جیسے، startاور اور کے endبدلے میں ۔leftright

فارمز

  • نئی تیرتی شکلیں شامل کی گئیں! ہم نے فلوٹنگ لیبلز کی مثال کو مکمل طور پر تعاون یافتہ فارم کے اجزاء میں فروغ دیا ہے۔ نئے فلوٹنگ لیبلز کا صفحہ دیکھیں۔

  • توڑنے مقامی اور اپنی مرضی کے مطابق فارم عناصر کو یکجا کیا گیا ہے۔ چیک باکسز، ریڈیوز، سلیکٹس، اور دیگر ان پٹس جن کی v4 میں مقامی اور حسب ضرورت کلاسز تھیں ان کو اکٹھا کر دیا گیا ہے۔ اب ہمارے تقریباً تمام فارم عناصر مکمل طور پر حسب ضرورت ہیں، زیادہ تر حسب ضرورت HTML کی ضرورت کے بغیر۔

    • .custom-control.custom-checkboxاب .form-checkہے
    • .custom-control.custom-custom-radioاب .form-checkہے
    • .custom-control.custom-switchاب .form-check.form-switchہے
    • .custom-selectاب .form-selectہے
    • .custom-fileاور .form-fileاس کے اوپر اپنی مرضی کے انداز سے تبدیل کر دیا گیا ہے .form-control۔
    • .custom-rangeاب .form-rangeہے
    • دیسی .form-control-fileاور .form-control-range.

  • توڑنےگرا دیا .input-group-appendاور .input-group-prepend. اب آپ صرف بٹن اور .input-group-textان پٹ گروپس کے براہ راست بچوں کے طور پر شامل کر سکتے ہیں۔

  • توثیق کے تاثرات والے بگ کے ساتھ ان پٹ گروپ پر دیرینہ گم شدہ سرحدی رداس کو آخر کار توثیق کے ساتھ ان پٹ گروپس میں ایک اضافی .has-validationکلاس شامل کرکے ٹھیک کر دیا گیا ہے۔

  • توڑنے ہمارے گرڈ سسٹم کے لیے فارم کے لیے مخصوص لے آؤٹ کلاسز کو چھوڑ دیا گیا۔ ہماری گرڈ اور یوٹیلیٹیز کو , یا کے بجائے .form-groupاستعمال .form-rowکریں .form-inline۔

  • توڑنےفارم لیبلز کی اب ضرورت ہے .form-label۔

  • توڑنے .form-textاب سیٹ نہیں کرتا display، آپ کو صرف HTML عنصر کو تبدیل کرکے ان لائن بنانے یا مدد کے متن کو بلاک کرنے کی اجازت دیتا ہے۔

  • جب ممکن ہو تو فارم کنٹرولز فکسڈ استعمال نہیں کیے جاتے ہیں height، بجائے اس min-heightکے کہ دوسرے اجزاء کے ساتھ حسب ضرورت اور مطابقت کو بہتر بنانے کے لیے موخر کریں۔

  • توثیق کی شبیہیں اب <select>s کے ساتھ لاگو نہیں ہوتی ہیں multiple۔

  • scss/forms/ان پٹ گروپ اسٹائل سمیت، کے تحت سورس فائلوں کو دوبارہ ترتیب دیا گیا ۔

اجزاء

  • paddingانتباہات، بریڈ کرمبس، کارڈز، ڈراپ ڈاؤن، فہرست گروپس، ماڈلز، پاپ اوور، اور ٹول ٹپس کے لیے متحد اقدار جو ہمارے $spacerمتغیر پر مبنی ہوں۔ ملاحظہ کریں نمبر 30564

ایکارڈین

انتباہات

  • انتباہات میں اب شبیہیں کے ساتھ مثالیں موجود ہیں ۔

  • <hr>ہر الرٹ میں s کے لیے حسب ضرورت اسٹائل ہٹا دیے گئے ہیں کیونکہ وہ پہلے سے ہی استعمال کر رہے ہیں currentColor۔

بیجز

  • توڑنے.badge-*پس منظر کی افادیت کے لیے تمام کلر کلاسز کو گرا دیا گیا (مثال کے طور پر، .bg-primaryاس کے بجائے استعمال کریں .badge-primary)۔

  • توڑنےگرا ہوا — اس کے بجائے یوٹیلیٹی .badge-pillاستعمال کریں۔.rounded-pill

  • توڑنے<a>اور <button>عناصر کے لیے ہوور اور فوکس اسٹائل کو ہٹا دیا گیا ۔

  • .25em/ سے / .5emتک .35emبیجز کے .65emلیے ڈیفالٹ پیڈنگ میں اضافہ

  • padding, background-color, اور کو ہٹا کر بریڈ کرمبس کی ڈیفالٹ ظاہری شکل کو آسان بنایا border-radius۔

  • --bs-breadcrumb-dividerسی ایس ایس کو دوبارہ کمپائل کرنے کی ضرورت کے بغیر آسان حسب ضرورت کے لیے نئی سی ایس ایس کسٹم پراپرٹی شامل کی گئی۔

بٹن

  • توڑنے ٹوگل بٹن ، چیک باکسز یا ریڈیوز کے ساتھ، اب جاوا اسکرپٹ کی ضرورت نہیں ہے اور نیا مارک اپ ہے۔ ہمیں اب ریپنگ عنصر کی ضرورت نہیں ہے، میں شامل کریں.btn-check،<input>اور اسے کسی بھی.btnکلاس<label>۔ ملاحظہ کریں نمبر 30650 اس کے لیے دستاویزات ہمارے بٹن صفحہ سے نئے فارم سیکشن میں منتقل ہو گئی ہیں۔

  • توڑنے .btn-blockافادیت کے لیے گرا دیا گیا۔ .btn-blockپر استعمال کرنے کے بجائے ، اپنے بٹنوں کو ضرورت کے مطابق جگہ دینے کے لیے اپنے بٹنوں کو .btnلپیٹ دیں۔ ان پر مزید کنٹرول کے لیے ریسپانسیو کلاسز پر جائیں۔ کچھ مثالوں کے لیے دستاویزات پڑھیں۔.d-grid.gap-*

  • اضافی پیرامیٹرز کو سپورٹ کرنے کے لیے ہمارے button-variant()اور مکسز کو اپ ڈیٹ کیا۔button-outline-variant()

  • ہوور اور فعال حالتوں میں بڑھتے ہوئے تضاد کو یقینی بنانے کے لیے بٹنوں کو اپ ڈیٹ کیا گیا۔

  • غیر فعال بٹن اب ہیں pointer-events: none;.

کارڈ

  • توڑنے.card-deckہمارے گرڈ کے حق میں گرا دیا . اپنے کارڈز کو کالم کلاسوں میں لپیٹیں اور کارڈ ڈیک کو دوبارہ بنانے کے لیے پیرنٹ .row-cols-*کنٹینر شامل کریں (لیکن ریسپانسیو الائنمنٹ پر زیادہ کنٹرول کے ساتھ)۔

  • توڑنے.card-columnsمعمار کے حق میں گرا دیا ۔ ملاحظہ کریں نمبر 28922

  • توڑنے.cardپر مبنی ایکارڈین کو ایک نئے ایکارڈین جزو سے بدل دیا گیا ۔

  • گہرے متن، کنٹرولز، اور اشارے کے لیے نئی .carousel-darkقسم شامل کی گئی (ہلکے پس منظر کے لیے بہترین)۔

  • بوٹسٹریپ آئیکنز سے نئے SVGs کے ساتھ carousel کنٹرولز کے لیے شیوران آئیکنز کو تبدیل کیا گیا ۔

بٹن بند کریں۔

  • توڑنےکم عام نام کے لیے نام تبدیل کر دیا .closeگیا ۔.btn-close

  • بند کریں بٹن اب HTML میں background-imagea کی بجائے (ایمبیڈڈ SVG) استعمال کرتے ہیں &times;، جس سے آپ کے مارک اپ کو چھونے کی ضرورت کے بغیر آسانی سے تخصیص کی اجازت ملتی ہے۔

  • نیا .btn-close-whiteویرینٹ شامل کیا گیا جو filter: invert(1)گہرے پس منظر کے خلاف اعلی کنٹراسٹ برخاست آئیکنز کو فعال کرنے کے لیے استعمال کرتا ہے۔

گرنے

  • accordions کے لیے اسکرول اینکرنگ کو ہٹا دیا گیا۔

  • آن ڈیمانڈ ڈارک ڈراپ ڈاؤنز کے لیے نئے .dropdown-menu-darkویریئنٹ اور متعلقہ متغیرات شامل کیے گئے۔

  • کے لیے نیا متغیر شامل کیا گیا $dropdown-padding-x۔

  • بہتر کنٹراسٹ کے لیے ڈراپ ڈاؤن ڈیوائیڈر کو گہرا کر دیا۔

  • توڑنےڈراپ ڈاؤن کے لیے تمام ایونٹس اب ڈراپ ڈاؤن ٹوگل بٹن پر ٹرگر ہوتے ہیں اور پھر بنیادی عنصر تک ببل ہوتے ہیں۔

  • ڈراپ ڈاؤن مینو میں اب ایک data-bs-popper="static"خاصیت سیٹ ہوتی ہے جب ڈراپ ڈاؤن کی پوزیشننگ مستحکم ہو، یا ڈراپ ڈاؤن نیوبار میں ہو۔ یہ ہمارے جاوا اسکرپٹ کے ذریعہ شامل کیا گیا ہے اور پوپر کی پوزیشننگ میں مداخلت کیے بغیر اپنی مرضی کے مطابق پوزیشن اسٹائل استعمال کرنے میں ہماری مدد کرتا ہے۔

  • توڑنےمقامی پوپر flipکنفیگریشن کے حق میں ڈراپ ڈاؤن پلگ ان کے لیے ڈراپ کردہ آپشن۔ اب آپ فلپ موڈیفائر fallbackPlacementsمیں آپشن کے لیے خالی صف کو پاس کر کے فلپنگ رویے کو غیر فعال کر سکتے ہیں ۔

  • ڈراپ ڈاؤن مینو اب آٹو کلوز رویےautoClose کو ہینڈل کرنے کے لیے ایک نئے آپشن کے ساتھ کلک کے قابل ہو سکتا ہے ۔ آپ ڈراپ ڈاؤن مینو کے اندر یا باہر کلک کو قبول کرنے کے لیے اس اختیار کو استعمال کر سکتے ہیں تاکہ اسے انٹرایکٹو بنایا جا سکے۔

  • ڈراپ ڈاؤن اب .dropdown-items میں لپیٹے ہوئے کو سپورٹ کرتے <li>ہیں۔

جمبوٹرون

فہرست گروپ

  • , , , اور کلاس میں نئے nullمتغیرات شامل کیے گئے ۔font-sizefont-weightcolor:hover color.nav-link
  • توڑنےNavbars کو اب اندر ایک کنٹینر کی ضرورت ہوتی ہے (اسپیسنگ کی ضروریات اور CSS کی ضرورت کو بڑی حد تک آسان بنانے کے لیے)۔
  • توڑنےکلاس کو .activeاب s پر لاگو نہیں کیا جا سکتا .nav-item، اس کا اطلاق براہ راست s پر ہونا چاہیے .nav-link۔

آف کینوس

صفحہ بندی

  • صفحہ بندی کے لنکس اب حسب ضرورت margin-leftہیں جو ایک دوسرے سے الگ ہونے پر تمام کونوں پر متحرک طور پر گول ہوتے ہیں۔

  • transitionصفحہ بندی کے لنکس میں s کو شامل کیا گیا۔

پاپورز

  • توڑنےہمارے ڈیفالٹ پاپ اوور ٹیمپلیٹ میں نام تبدیل کر دیا .arrowگیا ۔.popover-arrow

  • whiteListآپشن کا نام تبدیل کر دیا گیا allowList۔

اسپنرز

  • اسپنرز اب prefers-reduced-motion: reduceمتحرک تصاویر کو کم کرکے عزت دیتے ہیں۔ ملاحظہ کریں نمبر 31882

  • بہتر اسپنر عمودی سیدھ.

ٹوسٹس

  • ٹوسٹ کو اب پوزیشننگ یوٹیلیٹیز.toast-container کی مدد سے ایک میں رکھا جا سکتا ہے ۔

  • ڈیفالٹ ٹوسٹ کا دورانیہ 5 سیکنڈ میں تبدیل کر دیا گیا۔

  • overflow: hiddentoasts سے ہٹا دیا اور افعال کے ساتھ مناسب border-radiuss کے ساتھ تبدیل کر دیا.calc()

ٹول ٹپس

  • توڑنےہمارے ڈیفالٹ ٹول ٹپ ٹیمپلیٹ میں نام تبدیل کر دیا .arrowگیا ۔.tooltip-arrow

  • توڑنےپاپر عناصر کی بہتر جگہ کے لیے پہلے سے طے شدہ قدر کو fallbackPlacementsتبدیل کر دیا گیا ہے ۔['top', 'right', 'bottom', 'left']

  • توڑنےwhiteListآپشن کا نام تبدیل کر دیا گیا allowList۔

افادیت

  • توڑنےRTL سپورٹ کے اضافے کے ساتھ دشاتمک ناموں کے بجائے منطقی پراپرٹی کے ناموں کو استعمال کرنے کے لیے کئی یوٹیلیٹیز کا نام تبدیل کر دیا گیا:

    • نام تبدیل کر دیا گیا .left-*اور اور .right-*سے ۔.start-*.end-*
    • نام تبدیل کر دیا گیا .float-leftاور اور .float-rightسے ۔.float-start.float-end
    • نام تبدیل کر دیا گیا .border-leftاور اور .border-rightسے ۔.border-start.border-end
    • نام تبدیل کر دیا گیا .rounded-leftاور اور .rounded-rightسے ۔.rounded-start.rounded-end
    • نام تبدیل کر دیا گیا .ml-*اور اور .mr-*سے ۔.ms-*.me-*
    • نام تبدیل کر دیا گیا .pl-*اور اور .pr-*سے ۔.ps-*.pe-*
    • نام تبدیل کر دیا گیا .text-leftاور اور .text-rightسے ۔.text-start.text-end

  • توڑنےمنفی مارجن کو بطور ڈیفالٹ غیر فعال کر دیا گیا۔

  • اضافی عناصر کے پس منظر کو تیزی سے ترتیب دینے کے لیے نئی .bg-bodyکلاس شامل کی گئی۔<body>

  • , , , اور کے لیے نئی پوزیشن کی افادیتیں شامل کی گئیں ۔ قدروں میں شامل ہیں ، اور ہر پراپرٹی کے لیے۔toprightbottomleft050%100%

  • افقی یا عمودی طور پر مرکز مطلق/فکسڈ پوزیشن والے عناصر میں نئی .translate-middle-x​​اور افادیتیں شامل کی گئیں۔.translate-middle-y

  • نئی border-widthافادیتیں شامل کی گئیں ۔

  • توڑنےنام بدل کر رکھ دیا .text-monospaceگیا .font-monospace۔

  • توڑنےہٹا دیا گیا .text-hideکیونکہ یہ متن کو چھپانے کا ایک قدیم طریقہ ہے جسے اب استعمال نہیں کیا جانا چاہیے۔

  • .fs-*افادیت کے لیے یوٹیلیٹیز شامل کی font-sizeگئی (RFS فعال کے ساتھ)۔ یہ وہی پیمانہ استعمال کرتے ہیں جیسا کہ HTML کے پہلے سے طے شدہ عنوانات (1-6، بڑے سے چھوٹے)، اور ساس نقشہ کے ذریعے ترمیم کی جا سکتی ہے۔

  • توڑنےاختصار اور مستقل مزاجی کے لیے .font-weight-*یوٹیلیٹیز کا نام تبدیل کر دیا گیا۔.fw-*

  • توڑنےاختصار اور مستقل مزاجی کے لیے .font-style-*یوٹیلیٹیز کا نام تبدیل کر دیا گیا۔.fst-*

  • CSS گرڈ اور flexbox لے آؤٹ کے لیے .d-gridافادیت اور نئی gapافادیت ( ) کو ڈسپلے کرنے کے لیے شامل کیا گیا۔.gap

  • توڑنےہٹا دیا .rounded-smاور rounded-lg، اور کلاسوں کا ایک نیا پیمانہ متعارف کرایا، .rounded-0میں .rounded-3۔ ملاحظہ کریں نمبر 31687

  • نئی line-heightافادیتیں شامل کی گئیں: .lh-1, .lh-sm, .lh-baseand .lh-lg. یہاں دیکھیں ۔

  • .d-noneدیگر ڈسپلے یوٹیلیٹیز پر زیادہ وزن دینے کے لیے ہماری CSS میں افادیت کو منتقل کیا ۔

  • کنٹینرز پر بھی کام کرنے کے لیے .visually-hidden-focusableمددگار کو بڑھایا، استعمال کرتے ہوئے :focus-within۔

مددگار

  • توڑنے ریسپانسیو ایمبیڈ ہیلپرز کا نام بدل کر ریشو ہیلپرز رکھ دیا گیا ہے جس میں کلاس کے نئے ناموں اور بہتر طرز عمل کے ساتھ ساتھ ایک مددگار CSS متغیر بھی ہے۔

    • پہلوؤں کے تناسب میں تبدیل کرنے byکے لیے کلاسوں کا نام تبدیل کر دیا گیا ہے۔ xمثال کے طور پر، .ratio-16by9اب ہے .ratio-16x9.
    • ہم نے .embed-responsive-itemاور عنصر گروپ سلیکٹر کو ایک آسان .ratio > *سلیکٹر کے حق میں چھوڑ دیا ہے۔ مزید کلاس کی ضرورت نہیں ہے، اور تناسب مددگار اب کسی بھی HTML عنصر کے ساتھ کام کرتا ہے۔
    • $embed-responsive-aspect-ratiosساس نقشہ کا نام تبدیل کر دیا گیا ہے اور $aspect-ratiosکلاس کا نام اور فیصد کو key: valueبطور جوڑے شامل کرنے کے لیے اس کی اقدار کو آسان بنایا گیا ہے۔
    • CSS متغیرات اب تیار کیے گئے ہیں اور Sass نقشے میں ہر قدر کے لیے شامل کیے گئے ہیں۔ کوئی بھی حسب ضرورت پہلو تناسب بنانے --bs-aspect-ratioکے لیے پر متغیر میں ترمیم کریں ۔.ratio

  • توڑنے "اسکرین ریڈر" کلاسز اب "ضعیف طور پر پوشیدہ" کلاسز ہیں ۔

    • Sass فائل کو سے میں تبدیل کر دیا scss/helpers/_screenreaders.scss۔scss/helpers/_visually-hidden.scss
    • نام تبدیل کر دیا گیا .sr-onlyاور اور.sr-only-focusable.visually-hidden.visually-hidden-focusable
    • نام تبدیل کر کے sr-only()اور میں ملا sr-only-focusable()دیتا visually-hidden()ہے visually-hidden-focusable()۔

  • bootstrap-utilities.cssاب ہمارے مددگار بھی شامل ہیں۔ مدد کرنے والوں کو اب اپنی مرضی کے مطابق تعمیرات میں درآمد کرنے کی ضرورت نہیں ہے۔

جاوا اسکرپٹ

  • jQuery انحصار کو ختم کر دیا گیا اور باقاعدہ جاوا اسکرپٹ میں پلگ ان کو دوبارہ لکھا گیا۔

  • توڑنےتمام JavaScript پلگ انز کے لیے ڈیٹا انتساب اب نام کی جگہ پر رکھا گیا ہے تاکہ بوٹسٹریپ کی فعالیت کو فریق ثالث اور آپ کے اپنے کوڈ سے ممتاز کیا جا سکے۔ مثال کے طور پر، ہم data-bs-toggleاس کے بجائے استعمال کرتے ہیں data-toggle۔

  • تمام پلگ ان اب سی ایس ایس سلیکٹر کو پہلی دلیل کے طور پر قبول کر سکتے ہیں۔ آپ پلگ ان کی ایک نئی مثال بنانے کے لیے یا تو DOM عنصر یا کوئی درست CSS سلیکٹر پاس کر سکتے ہیں:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfigایک فنکشن کے طور پر پاس کیا جا سکتا ہے جو بوٹسٹریپ کی ڈیفالٹ پوپر کنفیگریشن کو بطور دلیل قبول کرتا ہے، تاکہ آپ اس ڈیفالٹ کنفیگریشن کو اپنے طریقے سے ضم کر سکیں۔ ڈراپ ڈاؤن، پاپ اوور، اور ٹول ٹپس پر لاگو ہوتا ہے۔

  • Popper عناصر کی بہتر جگہ کے لیے پہلے سے طے شدہ قدر کو fallbackPlacementsتبدیل کر دیا گیا ہے ۔ ڈراپ ڈاؤن، پاپ اوور، اور ٹول ٹپس پر لاگو ہوتا ہے۔['top', 'right', 'bottom', 'left']

  • عوامی جامد طریقوں سے انڈر سکور کو ہٹا دیا گیا جیسے _getInstance()→ getInstance()۔