v5 میں منتقلی

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

اس صفحہ پر

انحصار

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

براؤزر سپورٹ

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

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

ہوم پیج، دستاویزات لے آؤٹ، اور فوٹر کو دوبارہ ڈیزائن کیا گیا۔
نیا پارسل گائیڈ شامل کیا گیا۔
نیا حسب ضرورت سیکشن شامل کیا گیا، v4 کے تھیمنگ صفحہ کی جگہ ، Sass، عالمی ترتیب کے اختیارات، رنگ سکیمیں، CSS متغیرات، اور مزید پر نئی تفصیلات کے ساتھ۔
تمام فارم دستاویزات کو نئے فارمز سیکشن میں دوبارہ ترتیب دیا، مواد کو مزید فوکس شدہ صفحات میں توڑ دیا۔
اسی طرح، لے آؤٹ سیکشن کو اپ ڈیٹ کیا ، تاکہ گرڈ کے مواد کو مزید واضح طور پر ظاہر کیا جا سکے۔
"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-checkاب .form-checkہے
- .custom-check.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 عنصر کو تبدیل کرکے ان لائن بنانے یا مدد کے متن کو بلاک کرنے کی اجازت دیتا ہے۔
توثیق کی شبیہیں اب <select>s کے ساتھ لاگو نہیں ہوتی ہیں multiple۔
scss/forms/ان پٹ گروپ اسٹائل سمیت، کے تحت سورس فائلوں کو دوبارہ ترتیب دیا گیا ۔

اجزاء

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

ایکارڈین

نئے accordion جزو شامل کر دیا گیا.

انتباہات

انتباہات میں اب شبیہیں کے ساتھ مثالیں موجود ہیں ۔
<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

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

بٹن بند کریں۔

توڑنےکم عام نام کے لیے نام تبدیل کر دیا .closeگیا ۔.btn-close
بند کریں بٹن اب HTML میں background-imagea کی بجائے (ایمبیڈڈ SVG) استعمال کرتے ہیں ×، جس سے آپ کے مارک اپ کو چھونے کی ضرورت کے بغیر آسانی سے تخصیص کی اجازت ملتی ہے۔
نیا .btn-close-whiteویرینٹ شامل کیا گیا جو filter: invert(1)گہرے پس منظر کے خلاف اعلی کنٹراسٹ برخاست آئیکنز کو فعال کرنے کے لیے استعمال کرتا ہے۔

گرنے

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

ڈراپ ڈاؤن

آن ڈیمانڈ ڈارک ڈراپ ڈاؤنز کے لیے نیا .dropdown-menu-darkمتغیر اور متعلقہ متغیرات شامل کیے گئے۔
کے لیے نیا متغیر شامل کیا گیا $dropdown-padding-x۔
بہتر کنٹراسٹ کے لیے ڈراپ ڈاؤن ڈیوائیڈر کو گہرا کر دیا۔
توڑنےڈراپ ڈاؤن کے لیے تمام ایونٹس اب ڈراپ ڈاؤن ٹوگل بٹن پر ٹرگر ہوتے ہیں اور پھر بنیادی عنصر تک ببل ہوتے ہیں۔
ڈراپ ڈاؤن مینو میں اب ایک data-bs-popper="static"خاصیت سیٹ ہوتی ہے جب ڈراپ ڈاؤن کی پوزیشننگ مستحکم ہوتی ہے اور data-bs-popper="none"جب ڈراپ ڈاؤن نیوبار میں ہوتا ہے۔ یہ ہمارے جاوا اسکرپٹ کے ذریعہ شامل کیا گیا ہے اور پوپر کی پوزیشننگ میں مداخلت کیے بغیر اپنی مرضی کے مطابق پوزیشن اسٹائل استعمال کرنے میں ہماری مدد کرتا ہے۔
توڑنےمقامی پوپر flipکنفیگریشن کے حق میں ڈراپ ڈاؤن پلگ ان کے لیے ڈراپ کردہ آپشن۔ اب آپ فلپ موڈیفائر fallbackPlacementsمیں آپشن کے لیے خالی صف پاس کر کے فلپنگ رویے کو غیر فعال کر سکتے ہیں ۔
ڈراپ ڈاؤن مینو اب آٹو کلوز رویےautoClose کو ہینڈل کرنے کے لیے ایک نئے آپشن کے ساتھ کلک کے قابل ہو سکتا ہے ۔ آپ ڈراپ ڈاؤن مینو کے اندر یا باہر کلک کو قبول کرنے کے لیے اس اختیار کو استعمال کر سکتے ہیں تاکہ اسے انٹرایکٹو بنایا جا سکے۔
ڈراپ ڈاؤن اب .dropdown-items میں لپیٹے ہوئے کو سپورٹ کرتے <li>ہیں۔

جمبوٹرون

توڑنےجمبوٹرون جزو کو گرا دیا کیونکہ اسے افادیت کے ساتھ نقل کیا جا سکتا ہے۔ ڈیمو کے لیے ہماری نئی جمبوٹرون مثال دیکھیں۔

فہرست گروپ

فہرست گروپوں میں نیا .list-group-numberedترمیم کنندہ شامل کیا گیا۔

Navs اور ٹیبز

, , , اور کلاس میں نئے nullمتغیرات شامل کیے گئے ۔font-sizefont-weightcolor:hover color.nav-link

نوبارس

توڑنےNavbars کو اب اندر ایک کنٹینر کی ضرورت ہوتی ہے (اسپیسنگ کی ضروریات اور CSS کی ضرورت کو بڑی حد تک آسان بنانے کے لیے)۔

آف کینوس

نیا آف کینوس جزو شامل کیا گیا ۔

صفحہ بندی

صفحہ بندی کے لنکس اب حسب ضرورت 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 سلیکٹر پاس کر سکتے ہیں:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigایک فنکشن کے طور پر پاس کیا جا سکتا ہے جو بوٹسٹریپ کی ڈیفالٹ پوپر کنفیگریشن کو بطور دلیل قبول کرتا ہے، تاکہ آپ اس ڈیفالٹ کنفیگریشن کو اپنے طریقے سے ضم کر سکیں۔ ڈراپ ڈاؤن، پاپ اوور، اور ٹول ٹپس پر لاگو ہوتا ہے۔
Popper عناصر کی بہتر جگہ کے لیے پہلے سے طے شدہ قدر کو fallbackPlacementsتبدیل کر دیا گیا ہے ۔ ڈراپ ڈاؤن، پاپ اوور، اور ٹول ٹپس پر لاگو ہوتا ہے۔['top', 'right', 'bottom', 'left']
عوامی جامد طریقوں سے انڈر سکور کو ہٹا دیا گیا جیسے _getInstance()→ getInstance()۔