لڏپلاڻ ڪرڻ v5

v5.2.0

تازو ٿيل ڊيزائن

Bootstrap v5.2.0 پوري پراجيڪٽ ۾ ڪجھ حصن ۽ ملڪيتن لاءِ ھڪ ذيلي ڊيزائن اپڊيٽ جي خصوصيت رکي ٿو، خاص طور border-radiusتي بٽڻن ۽ فارم ڪنٽرولن تي سڌريل قدرن جي ذريعي . اسان جي دستاويزن کي پڻ اپڊيٽ ڪيو ويو آهي نئين هوم پيج سان، آسان ڊڪس لي آئوٽ جيڪو هاڻي سائڊبار جي حصن کي ڪليپ نه ڪندو آهي، ۽ بوٽ اسٽريپ آئڪن جا وڌيڪ نمايان مثال .

وڌيڪ CSS متغير

اسان CSS متغير استعمال ڪرڻ لاء اسان جي سڀني حصن کي اپڊيٽ ڪيو آهي. جڏهن ته ساس اڃا تائين هر شي کي هيٺ رکي ٿو، هر جزو کي اپڊيٽ ڪيو ويو آهي سي ايس ايس متغير شامل ڪرڻ لاءِ جزو جي بنيادي ڪلاسن تي (مثال طور، .btn)، بوٽ اسٽريپ جي وڌيڪ حقيقي وقت جي ڪسٽمائيزيشن جي اجازت ڏئي ٿي. ايندڙ رليز ۾، اسان اسان جي ترتيب، فارم، مددگار، ۽ افاديت ۾ CSS متغيرن جي استعمال کي وڌائڻ جاري رکون ٿا. CSS متغير بابت وڌيڪ پڙهو هر جزو ۾ انهن جي لاڳاپيل دستاويزي صفحن تي.

Bootstrap 6 تائين اسان جو CSS متغير استعمال ڪجهه نامڪمل هوندو. جڏهن ته اسان انهن کي پوري بورڊ تي لاڳو ڪرڻ چاهينداسين، پر اهي تبديلين جي ڀڃڪڙي ڪرڻ جو خطرو هلائيندا آهن. مثال طور، $alert-border-width: var(--bs-border-width)اسان جي ماخذ ڪوڊ ۾ سيٽنگ توهان جي پنهنجي ڪوڊ ۾ امڪاني ساس کي ٽوڙي ٿو جيڪڏهن توهان $alert-border-width * 2ڪجهه سببن لاء ڪري رهيا آهيو.

جيئن ته، جتي به ممڪن هجي، اسان اڳتي وڌندا رهنداسين وڌيڪ CSS متغيرن ڏانهن، پر مهرباني ڪري سمجهو ته اسان جي عمل درآمد ٿي سگهي ٿي v5 ۾ ٿورو محدود.

نئون_maps.scss

Bootstrap 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

توهان جي ڪسٽم بوٽ اسٽريپ CSS تعميرات کي هاڻي ڪجهه ڏسڻ گهرجي اهڙي طرح هڪ الڳ نقشن جي درآمد سان.

  // 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طبقي کي ڪنهن به .offcanvas-{sm|md|lg|xl|xxl}طبقي ۾ تبديل ڪريو.

• ٿلهي ٽيبل ورهائيندڙ هاڻي آپٽ-ان آهن. - اسان ٽيبل گروپن جي وچ ۾ بارڊر کي اوور رائڊ ڪرڻ لاءِ ٿلهي ۽ وڌيڪ مشڪل کي هٽائي ڇڏيو آهي ۽ ان کي اختياري طبقي ۾ منتقل ڪيو آهي جيڪو توهان لاڳو ڪري سگهو ٿا، .table-group-divider. مثال لاءِ ٽيبل دستاويز ڏسو.

• Scrollspy کي استعمال ڪرڻ لاءِ ٻيهر لکيو ويو آهي Intersection Observer API ، جنهن جو مطلب آهي ته توهان کي هاڻي ضرورت نه آهي لاڳاپا والدين ريپرز، deprecatesoffsetconfig، ۽ وڌيڪ. توھان جي اسڪالرسپي لاڳو ڪرڻ لاءِ ڏسو وڌيڪ صحيح ۽ مسلسل انھن جي نيون نمايان ڪرڻ ۾.

• Popovers ۽ tooltips هاڻي CSS متغير استعمال ڪندا آهن. ڪجھ CSS متغيرن کي اپ ڊيٽ ڪيو ويو آھي انھن جي Sass هم منصبن کان متغيرن جو تعداد گھٽائڻ لاءِ. نتيجي طور، ھن رليز ۾ ٽي متغير ختم ڪيا ويا آھن: $popover-arrow-color, $popover-arrow-outer-color, and $tooltip-arrow-color.

• نوان .text-bg-{color}مددگار شامل ڪيا ويا. .text-*انفرادي ۽ افاديت کي ترتيب ڏيڻ جي بدران .bg-*، توھان ھاڻي استعمال ڪري سگھو ٿا مددگار .text-bg-*مقرر ڪرڻ لاءِ background-colorمتضاد پيش منظر سان color.

• .form-check-reverseليبلز ۽ لاڳاپيل چيڪ بڪسز/ريڊيوز جي آرڊر کي فلپ ڪرڻ لاءِ شامل ڪيو ويو.

• شامل ٿيل پٽي ٿيل ڪالمن.table-striped-columns کي نئين ڪلاس ذريعي جدولن جي حمايت .

تبديلين جي مڪمل فهرست لاءِ، ڏسو v5.2.0 پروجيڪٽ GitHub تي .

v5.1.0

• CSS گرڊ ترتيب لاءِ تجرباتي سپورٽ شامل ڪئي وئي . — ھي ڪم جاري آھي، ۽ اڃا تائين پيداوار جي استعمال لاءِ تيار نه آھي، پر توھان اختيار ڪري سگھوٿا نئين خصوصيت کي Sass ذريعي. ان کي فعال ڪرڻ لاءِ، ڊفالٽ گرڊ کي غير فعال ڪريو، سيٽنگ ڪندي $enable-grid-classes: false۽ سيٽنگ ذريعي CSS گرڊ کي فعال ڪريو $enable-cssgrid: true.

• آفڪينوس کي سپورٽ ڪرڻ لاءِ نيوبارز کي اپڊيٽ ڪيو ويو. - جوابي ڪلاسن ۽ ڪجهه آفڪينوس مارڪ اپ سان ڪنهن به نيوبار ۾ آف ڪينوس دراز شامل ڪريو ..navbar-expand-*

• نئون جڳه دار حصو شامل ڪيو ويو. - اسان جو نئون حصو، حقيقي مواد جي بدلي ۾ عارضي بلاڪ مهيا ڪرڻ جو هڪ طريقو اهو ظاهر ڪرڻ ۾ مدد ڏيڻ لاء ته ڪجهه اڃا تائين توهان جي سائيٽ يا ايپ ۾ لوڊ ٿي رهيو آهي.

• کولاپس پلگ ان ھاڻي افقي کولڻ کي سپورٽ ڪري ٿو . - شامل ڪريو .collapse-horizontalتوھان جي بدران .collapseختم ڪرڻ لاءِ . سيٽنگ ڪندي برائوزر کي ٻيهر رنگائڻ کان پاسو ڪريو يا .widthheightmin-heightheight

• شامل ڪيو ويو نئون اسٽيڪ ۽ عمودي اصول مددگار. - جلدي لاڳو ڪريو گھڻن فليڪس باڪس پراپرٽيز کي تيزيءَ سان ترتيب ڏيڻ لاءِ اسٽيڪ سان . .hstackافقي ( ) ۽ عمودي ( .vstack) اسٽيڪ مان چونڊيو . شامل ڪريو عمودي ورهائيندڙ <hr>عناصر سان ملندڙ جلندڙ نون .vrمددگارن سان .

• نئون عالمي :rootCSS متغير شامل ڪيو ويو. - ڪنٽرولنگ اسٽائلز :rootلاءِ سطح تي ڪيترائي نوان CSS متغير شامل ڪيا ويا . <body>وڌيڪ ڪم ۾ آهن، بشمول اسان جي يوٽيلٽيز ۽ اجزاء سميت، پر ھاڻي پڙھو CSS متغيرات کي ڪسٽمائيز سيڪشن ۾ .

• CSS متغير استعمال ڪرڻ لاءِ رنگ ۽ پس منظر جي افاديت کي ختم ڪيو ويو، ۽ نئين ٽيڪسٽ اوپيسيٽي ۽ پس منظر جي اوپيسيٽي يوٽيلٽيز شامل ڪئي وئي. - .text-* ۽ .bg-*يوٽيلٽيز هاڻي CSS متغيرن ۽ rgba()رنگن جي قدرن سان ٺهيل آهن، توهان کي اجازت ڏئي ٿي ته توهان آساني سان ڪنهن به افاديت کي نئين اوپيسيٽي يوٽيلٽيز سان ترتيب ڏئي سگھو ٿا.

• شامل ڪيا ويا نوان نمونا مثالن جي بنياد تي ڏيکاريو ته اسان جي اجزاء کي ڪيئن ترتيب ڏيو. - اسان جي نئين Snippets مثالن سان ڪسٽمائيز اجزاء ۽ ٻين عام ڊيزائن جي نمونن کي استعمال ڪرڻ لاءِ تيار ڪريو . فوٽر ، ڊراپ ڊائونز ، لسٽ گروپ ، ۽ ماڊل شامل آهن.

• پاپور ۽ ٽول ٽائپس مان غير استعمال ٿيل پوزيشننگ اسلوب کي هٽايو ويو آهي جيئن اهي صرف پوپر طرفان هٿ ڪيا ويا آهن. $tooltip-marginختم ڪيو ويو آهي ۽ عمل ۾ مقرر ڪيو nullويو آهي.

وڌيڪ معلومات چاهيو ٿا؟ پڙهو v5.1.0 بلاگ پوسٽ.

انحصار

• jQuery ڇڏيو.
• پوپر v1.x کان پوپر v2.x تائين اپڊيٽ ڪيو ويو.
• Libsass کي ڊارٽ ساس سان تبديل ڪيو ويو جيئن اسان جي ساس مرتب ڪندڙ Libsass کي رد ڪيو ويو.
• اسان جي دستاويزن جي تعمير لاء Jekyll کان Hugo ڏانهن لڏپلاڻ

برائوزر سپورٽ

• انٽرنيٽ ايڪسپلورر 10 ۽ 11 ختم ڪيو
• Microsoft Edge <16 (Legacy Edge) ختم ڪيو ويو
• فائر فاکس <60 کي ختم ڪيو ويو
• ڇڏيو ويو سفاري <12
• ختم ٿيل iOS سفاري <12
• ڪروم <60 کي ختم ڪيو ويو

دستاويزي تبديليون

• نئين سر ترتيب ڏنل هوم پيج، دستاويزن جي ترتيب، ۽ فوٽر.
• نئون پارسل گائيڊ شامل ڪيو ويو.
• نئون ڪسٽمائيز سيڪشن شامل ڪيو ويو، v4 جي Theming صفحي کي تبديل ڪندي، Sass تي نئين تفصيل سان، عالمي ترتيب جي اختيارن، رنگ اسڪيمون، CSS متغير، ۽ وڌيڪ.
• سڀني فارمن جي دستاويزن کي نئين فارم سيڪشن ۾ ٻيهر منظم ڪيو ، مواد کي ٽوڙي وڌيڪ مرڪوز صفحن ۾.
• ساڳي طرح، تازه ڪاري ڪئي لي آئوٽ سيڪشن ، گرڊ مواد کي وڌيڪ واضح طور تي ٻاهر ڪڍڻ لاء.
• "Navs" جزو واري صفحي جو نالو "Navs ۽ Tabs" رکيو ويو.
• "چيڪس" صفحي جو نالو "چيڪس ۽ ريڊيوز" ۾ تبديل ڪيو ويو.
• نيوبار کي ٻيهر ڊزائين ڪيو ۽ ھڪڙو نئون subnav شامل ڪيو ان کي اسان جي سائيٽن ۽ دستاويزن جي ورجن جي چوڌاري حاصل ڪرڻ آسان بڻائي.
• ڳولها فيلڊ لاءِ نئون ڪيبورڊ شارٽ ڪٽ شامل ڪيو ويو: Ctrl + /.

ساس

• اسان ڊفالٽ ساس نقشي کي ضم ڪري ڇڏيو آھي ان کي آسان بڻائڻ لاءِ بيڪار قدرن کي ختم ڪرڻ. ذهن ۾ رکو ته توهان کي هاڻي Sass نقشن ۾ سڀني قدرن کي بيان ڪرڻو پوندو جهڙوڪ $theme-colors. چيڪ ڪريو ته ڪيئن ڊيل ڪجي ساس نقشن سان .

• ڀڃڻنالو تبديل color-yiq()ڪيو ويو فنڪشن ۽ لاڳاپيل متغيرن کي color-contrast()جيئن ته اهو هاڻي YIQ رنگ جي جڳهه سان لاڳاپيل ناهي. ڏسو نمبر 30168

  • $yiq-contrasted-thresholdجو نالو تبديل ڪيو ويو آهي $min-contrast-ratio.
  • $yiq-text-dark۽ $yiq-text-lightترتيب وار نالا تبديل ڪيا ويا آهن $color-contrast-dark۽ $color-contrast-light.

• ڀڃڻميڊيا سوال mixins پيراگراف تبديل ٿي ويا آهن وڌيڪ منطقي انداز ۾.

  • 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(), and functions gray()in variables. ڏسو نمبر 29083

• ڀڃڻفنڪشن جو نالو تبديل 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()

• ڀڃڻساس جي پنهنجي رنگ اسڪيلنگ فنڪشن سان ٽڪراءَ کان بچڻ لاءِ scale-color()فنڪشن جو نالو تبديل ڪيو ويو.shift-color()

• box-shadowmixins ھاڻي nullقدرن کي اجازت ڏين ٿا ۽ noneگھڻن دليلن مان ڇڏي ڏيو. ڏسو #30394

• mixin border-radius()هاڻي هڪ ڊفالٽ قدر آهي.

رنگ سسٽم

• رنگ سسٽم جيڪو ڪم ڪيو color-level()۽ $theme-color-intervalنئين رنگ سسٽم جي حق ۾ هٽايو ويو. اسان جي ڪوڊ بيس ۾ سڀ lighten()۽ darken()افعال تبديل ڪيا ويا آھن tint-color()۽ shade-color(). اهي فنڪشن رنگ کي سفيد يا ڪارو سان ملائي ڇڏيندا آهن بجاءِ ان جي روشنيءَ کي هڪ مقرر مقدار ۾ تبديل ڪرڻ جي. shift-color()رنگ يا ته ڇانو ڪندو يا رنگ ان تي منحصر ڪري ٿو ته ان جو وزن پيٽرولر مثبت آهي يا منفي . وڌيڪ تفصيل لاءِ ڏسو #30622 .

• هر رنگ لاءِ نوان رنگ ۽ رنگ شامل ڪيا ويا آهن، هر بنيادي رنگ لاءِ نو الڳ رنگ مهيا ڪري رهيا آهن، جيئن نئين Sass متغير.

• بهتر رنگ برعڪس. 3:1 کان 4.5:1 تائين رنگن جي برعڪس تناسب کي ٽوڙيو ويو ۽ WCAG 2.1 AA برعڪس کي يقيني بڻائڻ لاءِ نيري، سائي، سائي ۽ گلابي رنگن کي اپڊيٽ ڪيو ويو. اسان جي رنگ جي برعڪس رنگ کي پڻ تبديل $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.cssهاڻي صرف box-sizing: border-boxگلوبل باڪس-سائيزنگ کي ري سيٽ ڪرڻ بدران ڪالمن تي لاڳو ٿئي ٿو. اهو طريقو، اسان جي گرڊ جي اندازن کي مداخلت کان سواء وڌيڪ هنڌن تي استعمال ڪري سگهجي ٿو.

• $enable-grid-classesهاڻي ڪنٽينر ڪلاس جي نسل کي وڌيڪ بند نٿو ڪري. ڏسو نمبر 29146.

• ميڪسين کي اپڊيٽ ڪيو make-colويو ڊفالٽ ۾ برابر ڪالمن ۾ بغير ڪنهن مخصوص سائيز جي.

مواد، ريبوٽ، وغيره

• RFS ھاڻي ڊفالٽ طور فعال آھي. مڪسين استعمال ڪنديfont-size()هيڊنگس پاڻمرادو ترتيب ڏين ٿيون انهنfont-sizeجي ماپ ۾ ويو پورٽ سان. هي خصوصيت اڳ ۾ v4 سان آپٽ-ان ڪئي وئي هئي.

• ڀڃڻاسان جي ڊسپلي ٽائپوگرافي کي تبديل ڪيو اسان جي $display-*متغيرن کي تبديل ڪرڻ ۽ $display-font-sizesساس نقشي سان. هڪ واحد ۽ ترتيب ڏنل ايس $display-*-weightلاء انفرادي متغير پڻ هٽايو .$display-font-weightfont-size

• شامل ڪيو ويو ٻه نوان .display-*هيڊنگ سائيز، .display-5۽ .display-6.

• لنڪس ڊفالٽ طور هيٺ ڏنل آهن (صرف هور تي نه)، جيستائين اهي مخصوص حصن جو حصو نه هجن.

• انهن جي اسٽائل کي ريفريش ڪرڻ لاءِ جدولن کي ٻيهر ڊزائين ڪيو ويو ۽ اسٽائل تي وڌيڪ ڪنٽرول لاءِ CSS متغيرن سان ٻيهر ٺاهيو.

• ڀڃڻNested Tables هاڻي وراثت واري انداز ۾ نه آهن.

• ڀڃڻ .thead-light۽ variant طبقن .thead-darkجي حق ۾ ڇڏيا ويا آهن جيڪي سڀني ٽيبل عناصر ( , , , , and ) .table-*لاءِ استعمال ڪري سگھجن ٿيون .theadtbodytfoottrthtd

• ڀڃڻtable-row-variant()ميڪسين جو نالو تبديل ڪيو ويو آهي ۽ table-variant()صرف 2 پيٽرولر قبول ڪري ٿو: $color(رنگ جو نالو) ۽ $value(رنگ ڪوڊ). سرحد جو رنگ ۽ تلفظ رنگ خودڪار طريقي سان حساب ڪيو ويندو آهي ٽيبل فيڪٽر متغير جي بنياد تي.

• ٽيبل سيل پيڊنگ متغيرن ۾ ورهايو -y۽ -x.

• ڀڃڻ.pre-scrollableڪلاس ختم . ڏسو نمبر 29135

• ڀڃڻ .text-*افاديت شامل نه ڪندا آهن هور ۽ فوڪس رياستن کي هاڻي لنڪ ڏانهن. .link-*مددگار طبقن بدران استعمال ڪري سگھجن ٿيون. ڏسو نمبر 29267

• ڀڃڻ.text-justifyڪلاس ختم . ڏسو نمبر 29793

• ڀڃڻ <hr>عناصر ھاڻي استعمال ڪن ٿا heightبجاءِ borderبھتر مدد ڪرڻ جي sizeوصف کي. اهو پڻ ٿلهي ورهائيندڙ ٺاهڻ لاءِ پيڊنگ افاديت جي استعمال کي قابل بڻائي ٿو (مثال طور، <hr class="py-1">).

• ڊفالٽ افقي padding-leftآن <ul>۽ <ol>عناصر کي برائوزر ڊفالٽ کان 40pxري سيٽ ڪريو 2rem.

• شامل ڪيو ويو $enable-smooth-scroll، جيڪو عالمي سطح تي لاڳو ٿئي scroll-behavior: smoothٿو- سواءِ صارفين جي جيڪي prefers-reduced-motionميڊيا جي سوال ذريعي گھٽ حرڪت لاءِ پڇن ٿا. ڏسو نمبر 31877

RTL

• افقي طرف مخصوص متغير، افاديت، ۽ ميڪسينس سڀني کي منطقي ملڪيت استعمال ڪرڻ لاء تبديل ڪيو ويو آهي جهڙوڪ جيڪي flexbox layouts ۾ مليا آهن- مثال طور، start۽ endجي بدلي left۾ right.

فارم

• نئون سچل فارم شامل ڪيو ويو! اسان فلوٽنگ ليبلز جي مثال کي مڪمل طور تي سپورٽ ٿيل فارم اجزاء ڏانهن وڌايو آهي. ڏسو نئون فلوٽنگ ليبل صفحو.

• ڀڃڻ گڏيل اصلي ۽ ڪسٽم فارم عناصر. چيڪ بڪس، ريڊيوز، سليڪٽس، ۽ ٻيون انپٽس جيڪي وي 4 ۾ ڏيهي ۽ ڪسٽم ڪلاس هئا انهن کي گڏ ڪيو ويو آهي. ھاڻي تقريباً اسان جا سڀئي فارم عناصر مڪمل طور تي ڪسٽم آھن، گھڻو ڪري ڪسٽم 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, or .form-inline.

• ڀڃڻفارم ليبل هاڻي گهربل آهي .form-label.

• ڀڃڻ .form-textهاڻي سيٽ نٿو ڪري display، توهان کي ان لائن ٺاهڻ جي اجازت ڏئي ٿي يا مدد جي متن کي بلاڪ ڪرڻ جي اجازت ڏئي ٿي جيئن توهان چاهيو صرف HTML عنصر کي تبديل ڪندي.

• فارم ڪنٽرول هاڻي استعمال نه ڪيا ويندا آهن مقرر ٿيل heightجڏهن ممڪن هجي، بجاء min-heightٻين اجزاء سان ڪسٽمائيزيشن ۽ مطابقت کي بهتر ڪرڻ لاء.

• <select>تصديقي آئڪن هاڻي s سان لاڳو نه آهن multiple.

• وري ترتيب ڏنل ماخذ Sass فائلن جي تحت scss/forms/، بشمول ان پٽ گروپ اسٽائل.

اجزاء

• اسان جي متغير paddingجي بنياد تي الارٽس، بريڊ ڪرمبس، ڪارڊ، ڊراپ ڊائونز، لسٽ گروپس، ماڊلز، پاپ اوور ۽ ٽول ٽِپس لاءِ متحد قدر. ڏسو نمبر 30564 .$spacer

اڪارڊون

• نئون accordion جزو شامل ڪيو ويو.

خبرداري

• خبردارين ۾ ھاڻي مثالن سان گڏ آھن .

• <hr>هر الرٽ ۾ s لاءِ ڪسٽم اسلوب کي هٽايو ويو آهي ڇاڪاڻ ته اهي اڳ ۾ ئي استعمال ڪندا آهن currentColor.

بيج

• ڀڃڻپس منظر جي افاديت لاءِ سڀ .badge-*رنگ جا طبقا ڇڏيا ويا (مثال طور، .bg-primaryجي بدران استعمال ڪريو .badge-primary).

• ڀڃڻختم ڪيو ويو .badge-pill- .rounded-pillان جي بدران يوٽيلٽي استعمال ڪريو.

• ڀڃڻهٽايو ويو هور ۽ فوڪس اسٽائلز لاء <a>۽ <button>عناصر.

• / کان .25em/ .5emتائين بيجز لاءِ ڊفالٽ پيڊنگ کي وڌايو ويو ..35em.65em

Breadcrumbs

• , padding, background-color۽ border-radius.

• شامل ڪيو ويو نئون CSS ڪسٽم پراپرٽي --bs-breadcrumb-dividerآسان ڪسٽمائيزيشن لاءِ بغير CSS کي ٻيهر گڏ ڪرڻ جي.

بٽڻ

• ڀڃڻ ٽوگل بٽڻ ، چيڪ بڪسس يا ريڊيوز سان، ھاڻي JavaScript جي ضرورت نه آھي ۽ نئون مارڪ اپ آھي. اسان کي هاڻي ريپنگ عنصر جي ضرورت نه آهي، شامل ڪريو.btn-check،ڪلاس<input>سان جوڙيو. ڏسو #30650 ھن لاءِ دستاويز اسان جي بٽڻ واري صفحي کان نئين فارم سيڪشن ڏانھن منتقل ڪيا ويا آھن..btn<label>

• ڀڃڻ افاديت .btn-blockلاءِ ڇڏيو ويو. .btn-blockتي استعمال ڪرڻ بدران .btn، پنهنجا بٽڻ لپي ڪريو .d-grid۽ .gap-*ضرورت مطابق انھن کي جاءِ ڏيڻ لاءِ يوٽيلٽي. انهن تي اڃا به وڌيڪ ڪنٽرول لاءِ جوابي طبقن کي تبديل ڪريو. ڪجھ مثالن لاءِ دستاويز پڙهو.

• اسان جي button-variant()۽ button-outline-variant()mixins کي اپڊيٽ ڪيو اضافي پيٽرولن کي سپورٽ ڪرڻ لاءِ.

• هور ۽ فعال رياستن تي وڌندڙ تضاد کي يقيني بڻائڻ لاءِ اپڊيٽ ٿيل بٽڻ.

• بند ٿيل بٽڻ ھاڻي آھن pointer-events: none;.

ڪارڊ

• ڀڃڻاسان جي گرڊ .card-deckجي حق ۾ ڇڏيو. پنهنجا ڪارڊ لفاف ڪريو ڪالمن ڪلاسن ۾ ۽ .row-cols-*ڪارڊ ڊيڪ کي ٻيهر ٺاهڻ لاءِ والدين ڪنٽينر شامل ڪريو (پر جوابي ترتيب تي وڌيڪ ڪنٽرول سان).

• ڀڃڻمعمار .card-columnsجي حق ۾ ڇڏي ويو. ڏسو نمبر 28922

• ڀڃڻهڪ نئين Accordion جزو.card سان ٻڌل accordion کي تبديل ڪيو .

ڪارونجهر

• اونداهي متن، ڪنٽرول، ۽ اشارن لاءِ نئون .carousel-darkقسم شامل ڪيو ويو (هلڪي پس منظر لاءِ وڏو).

• بوٽ اسٽريپ آئڪن مان نئين SVGs سان ڪارسيل ڪنٽرولز لاءِ شيورون آئڪن کي تبديل ڪيو ويو .

بند ڪريو بٽڻ

• ڀڃڻهڪ گهٽ عام نالو لاءِ تبديل .closeڪيو ويو ..btn-close

• بند ڪريو بٽڻ ھاڻي HTML ۾ background-imagea جي بدران ھڪڙو (ايمبيڊڊ SVG) استعمال ڪريو ×، توھان جي مارڪ اپ کي ڇھڻ جي ضرورت کان سواءِ آسان ڪسٽمائيزيشن جي اجازت ڏيو.

• شامل ڪيو ويو نئون .btn-close-whiteقسم جيڪو filter: invert(1)اونداھي پس منظر جي خلاف اعلي برعڪس برطرف آئڪن کي فعال ڪرڻ لاء استعمال ڪندو آھي.

ٽٽڻ

• accordions لاء اسڪالر لنگر هٽايو.

ڊراپ ڊائونز

• شامل ڪيو ويو نئون .dropdown-menu-darkقسم ۽ لاڳاپيل متغيرن لاءِ آن ڊيمانڊ ڊارڪ ڊراپ ڊائونز.

• لاء نئون متغير شامل ڪيو ويو $dropdown-padding-x.

• بهتر برعڪس لاءِ ڊراپ ڊائون ڊويزن کي اونداهو ڪيو.

• ڀڃڻڊراپ ڊائون لاءِ سڀئي واقعا ھاڻي ڊراپ ڊائون ٽوگل بٽڻ تي شروع ڪيا ويا آھن ۽ پوءِ بلبل ٿي ويا آھن والدين عنصر تائين.

• ڊراپ ڊائون مينيو ۾ ھاڻي ھڪ خصوصيت data-bs-popper="static"سيٽ آھي جڏھن ڊراپ ڊائون جي پوزيشن مستحڪم آھي، يا ڊراپ ڊائون نيوبار ۾ آھي. هي اسان جي جاوا اسڪرپٽ طرفان شامل ڪيو ويو آهي ۽ پوپر جي پوزيشن ۾ مداخلت ڪرڻ کان سواءِ اسان کي ڪسٽم پوزيشن اسلوب استعمال ڪرڻ ۾ مدد ڪري ٿي.

• ڀڃڻاصلي پوپر flipجي ترتيب جي حق ۾ ڊراپ ڊائون پلگ ان لاءِ اختيار ڪيو ويو. توھان ھاڻي فلپنگ رويي کي غير فعال ڪري سگھوٿا فلپfallbackPlacements موڊيفائر ۾ اختيار لاءِ خالي صف پاس ڪندي .

• ڊراپ ڊائون مينيو ھاڻي ڪلڪ ڪري سگھجن ٿا نئين autoCloseآپشن سان آٽو بند رويي کي سنڀالڻ لاءِ . توھان ھي اختيار استعمال ڪري سگھو ٿا ڪلڪ کي قبول ڪرڻ لاءِ اندر يا ٻاهران ڊراپ ڊائون مينيو کي انٽرايڪٽو بنائڻ لاءِ.

• Dropdowns ھاڻي .dropdown-items ۾ ويڙھيل s کي سپورٽ ڪري <li>ٿو.

جمبوترون

• ڀڃڻجمبوٽران جزو کي ڇڏي ڏنو جيئن ان کي يوٽيلٽيز سان نقل ڪري سگھجي ٿو. ڏسو اسان جو نئون جمبوٽرون مثال هڪ ڊيم لاءِ.

فهرست گروپ

• گروپن جي لسٽ ۾ نئون .list-group-numberedترميمي شامل ڪيو ويو.

نيوي ۽ ٽيب

• , , , ۽ طبقي لاءِ نوان nullمتغير شامل ڪيا ويا .font-sizefont-weightcolor:hover color.nav-link

نيوبارز

• ڀڃڻNavbars کي ھاڻي ھڪڙي ڪنٽينر جي اندر جي ضرورت آھي (خاص طور تي فاصلي جي ضرورتن کي آسان ڪرڻ ۽ CSS گھربل).
• ڀڃڻڪلاس هاڻي s تي .activeلاڳو نه ٿو ٿي سگهي .nav-item، اهو سڌو سنئون s تي لاڳو ٿيڻ گهرجي .nav-link.

آفڪينوس

• نئون آفڪينوس جزو شامل ڪيو ويو .

صفحو

• صفحو جوڙيندڙ لنڪس هاڻي حسب ضرورت margin-leftآهن جيڪي متحرڪ طور تي سڀني ڪنڊن تي گول آهن جڏهن هڪ ٻئي کان جدا ٿي وڃن.

• transitionصفحو جي لنڪ ۾ شامل ڪيو ويو.

پاپورز

• ڀڃڻاسان جي ڊفالٽ پاپ اوور ٽيمپليٽ ۾ تبديل .arrowڪيو ويو..popover-arrow

• جو نالو مٽايو whiteListاختيار allowList.

اسپنر

• prefers-reduced-motion: reduceاسپنرز هاڻي متحرڪ متحرڪ کي سست ڪندي عزت ڪندا آهن. ڏسو نمبر 31882

• بهتر اسپنر عمودي ترتيب.

ٽوسٽ

• Toasts کي ھاڻي پوزيشننگ يوٽيلٽيز.toast-container جي مدد سان ھڪ ۾ رکي سگھجي ٿو .

• ڊفالٽ ٽوسٽ جو مدو 5 سيڪنڊن ۾ تبديل ڪيو ويو.

• ٽوسٽ مان هٽايو ويو overflow: hidden۽ مناسب 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>پس منظر کي اضافي عناصر ڏانهن.

• , , , and . _ _ قيمتون شامل آهن ، , ۽ هر ملڪيت لاء.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 layouts لاءِ يوٽيلٽيز ۽ نئين يوٽيلٽيز ( ) .d-gridکي ڊسپلي ڪرڻ لاءِ شامل ڪيو ويو.gap.gap

• ڀڃڻهٽايو ويو ، .rounded-sm۽ rounded-lgڪلاسن جو هڪ نئون اسڪيل متعارف ڪرايو، .rounded-0ڏانهن .rounded-3. ڏسو نمبر 31687

• شامل ڪيل نئين line-heightافاديت: .lh-1, .lh-sm, .lh-baseand .lh-lg. هتي ڏسو .

• اسان جي CSS ۾ يوٽيلٽي کي منتقل ڪيو .d-noneان کي ٻين ڊسپلي يوٽيلٽيز تي وڌيڪ وزن ڏيڻ لاءِ.

• .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 جي انحصار کي ختم ڪيو ويو ۽ پلگ ان کي ٻيهر لکڻ لاءِ باقاعده جاوا اسڪرپٽ ۾.

• ڀڃڻسڀ جاوا اسڪرپٽ پلگ ان لاءِ ڊيٽا جون خاصيتون هاڻي نالي جي جاءِ تي رکيل آهن بوٽ اسٽراپ ڪارڪردگي کي ٽئين پارٽين ۽ توهان جي پنهنجي ڪوڊ کان ڌار ڪرڻ ۾ مدد لاءِ. مثال طور، اسان data-bs-toggleبدران استعمال ڪندا آهيون data-toggle.

• سڀ پلگ ان هاڻي قبول ڪري سگھن ٿا CSS چونڊيندڙ کي پهرين دليل طور. توهان يا ته پلگ ان جو نئون مثال ٺاهڻ لاءِ هڪ DOM عنصر يا ڪنهن به صحيح CSS چونڊيندڙ کي پاس ڪري سگهو ٿا:

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

• popperConfigهڪ فنڪشن جي طور تي منظور ڪري سگهجي ٿو جيڪو بوٽ اسٽريپ جي ڊفالٽ پوپر ترتيب کي دليل طور قبول ڪري ٿو، انهي ڪري ته توهان هن ڊفالٽ ترتيب کي پنهنجي طريقي سان ملائي سگهو ٿا. ڊراپ ڊائونز، پاپ اوور، ۽ ٽول ٽائپس تي لاڳو ٿئي ٿو.

• جي ڊفالٽ قيمت کي fallbackPlacementsتبديل ڪيو ويو ['top', 'right', 'bottom', 'left']آهي پوپر عناصر جي بهتر جڳهه لاءِ. ڊراپ ڊائونز، پاپ اوور، ۽ ٽول ٽائپس تي لاڳو ٿئي ٿو.

• عوامي جامد طريقن مان انڊر اسڪور هٽايو ويو جهڙوڪ _getInstance()→ getInstance().