اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
Check
in English

v5 ته مهاجرت

د Bootstrap سرچینې فایلونو، اسنادو، او اجزاوو کې بدلونونه تعقیب او بیاکتنه وکړئ ترڅو تاسو سره د v4 څخه v5 ته مهاجرت کې مرسته وکړي.

په دې پاڼه کې

v5.2.0

تازه شوی ډیزاین

Bootstrap v5.2.0 د پروژې په اوږدو کې د یو څو برخو او ملکیتونو لپاره د فرعي ډیزاین تازه معلومات وړاندې کوي، په ځانګړې توګه border-radiusد بټونو او فارم کنټرولونو کې د اصلاح شوي ارزښتونو له لارې . زموږ اسناد هم د نوي کورپاڼې سره تازه شوي، د اسنادو ساده ترتیب چې نور د سایډ بار برخې نه ماتوي، او د بوټسټریپ شبیهونو نور مهم مثالونه .

نور سی ایس ایس متغیرونه

موږ د CSS متغیرونو کارولو لپاره زموږ ټولې برخې تازه کړې. پداسې حال کې چې ساس لاهم هرڅه لاندې کوي ، هره برخه تازه شوې ترڅو د اجزا بیس کلاسونو کې د CSS تغیرات شامل کړي (د مثال په توګه .btn) ، د بوټسټریپ د ریښتیني وخت دودیز کولو ته اجازه ورکوي. په راتلونکو خپرونو کې، موږ به زموږ په ترتیب، فورمو، مرستندویانو، او اسانتیاو کې د CSS متغیرونو کارولو ته دوام ورکړو. د CSS متغیرونو په اړه نور ولولئ په هره برخه کې د دوی اړوند اسنادو پاڼو کې.

زموږ د CSS متغیر کارول به د بوټسټریپ 6 پورې یو څه نیمګړي وي. پداسې حال کې چې موږ خوښ یو چې دا په بشپړ ډول په بورډ کې پلي کړو، دوی د ماتیدو بدلونونو خطر سره مخ کوي. د مثال په توګه، $alert-border-width: var(--bs-border-width)زموږ د سرچینې کوډ ترتیب کول ستاسو په خپل کوډ کې احتمالي Sass ماتوي که تاسو د $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

ستاسو دودیز بوټسټریپ سی ایس ایس جوړونه باید اوس د جلا نقشې واردولو سره ورته ورته ښکاري.

  // 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 کارولو لپاره بیا لیکل شوی ، دا پدې مانا ده چې تاسو نور د اړونده پلرونو ریپرونو ته اړتیا نلرئ،offset، او نور ډیر څه. د خپل سکرولسپي پلي کولو لپاره وګورئ ترڅو د دوی په روښانه کولو کې خورا دقیق او ثابت وي.

  • Popovers او tooltips اوس د CSS متغیرونه کاروي. ځینې ​​​​سی ایس ایس متغیرونه د دوی د Sass همکارانو څخه نوي شوي ترڅو د متغیرونو شمیر کم کړي. د پایلې په توګه، په دې خوشې کې درې متغیرونه بې برخې شوي دي: $popover-arrow-color, $popover-arrow-outer-color, او $tooltip-arrow-color.

  • .text-bg-{color}نوي مرستندویان اضافه کړل . د انفرادي .text-*او .bg-*اسانتیاو تنظیم کولو پرځای ، تاسو اوس کولی شئ د.text-bg-*background-color متضاد مخکینۍ سره تنظیم کولو لپاره مرسته کونکيcolor وکاروئ .

  • .form-check-reverseد لیبلونو او اړوندو چک بکسونو / راډیوګانو ترتیب فلیپ کولو لپاره ترمیم کونکی اضافه شوی.

  • د نوي ټولګي له لارې میزونو ته د پټو کالمونو ملاتړ اضافه شوی..table-striped-columns

د بدلونونو بشپړ لیست لپاره، په GitHub کې د v5.2.0 پروژه وګورئ .

v5.1.0

  • د CSS ګریډ ترتیب لپاره تجربوي ملاتړ اضافه شوی . - دا کار د پرمختګ په حال کې دی، او لا تر اوسه د تولید کارولو لپاره چمتو نه دی، مګر تاسو کولی شئ د Sass له لارې نوې ځانګړتیا غوره کړئ. د دې د فعالولو لپاره، د ترتیب کولو له لارې د ډیفالټ گرډ غیر فعال کړئ $enable-grid-classes: falseاو د ترتیب کولو له لارې د CSS گرډ فعال کړئ $enable-cssgrid: true.

  • د آف کینوس ملاتړ لپاره نوي بارونه تازه شوي. - د ځواب ویونکي ټولګیو او ځینې آف کینوس مارک اپ سره په هر نوبار کې د آف کینوس دراز اضافه کړئ ..navbar-expand-*

  • نوی ځای لرونکی برخه اضافه کړه . - زموږ نوې برخه، د حقیقي منځپانګې په ځای کې د لنډمهاله بلاکونو چمتو کولو یوه لاره چې دا په ګوته کوي چې یو څه لاهم ستاسو په سایټ یا اپلیکیشن کې پورته کیږي.

  • د کلاپس پلگ ان اوس د افقي سقوط ملاتړ کوي . - د دې پر ځای د سقوط .collapse-horizontalکولو لپاره خپل کې اضافه کړئ . په ترتیب کولو سره د براوزر له بیا رنګ کولو څخه مخنیوی وکړئ ..collapsewidthheightmin-heightheight

  • نوي سټیک او عمودی قاعده مرستندویان اضافه کړل. - په چټکۍ سره د ډیری فلیکس بکس ملکیتونه پلي کړئ ترڅو ژر تر ژره د سټیکونو سره دودیز ترتیبونه رامینځته کړئ . له افقی ( .hstack) او عمودی ( .vstack) سټیکونو څخه غوره کړئ. عمودی ویشونکي د <hr>عناصرو په څیر د نوي .vrمرستندویانو سره اضافه کړئ .

  • نوي نړیوال :rootCSS متغیرونه اضافه کړل. - د سټایلونو :rootکنټرول لپاره کچې ته ډیری نوي CSS متغیرونه اضافه کړل . <body>نور په کار کې دي ، پشمول زموږ د اسانتیاو او اجزاو په شمول ، مګر د اوس لپاره د دودیز کولو برخه کې د CSS متغیرونه ولولئ .

  • د سی ایس ایس متغیرونو کارولو لپاره د رنګ او شالید اسانتیاوې ترمیم شوي، او د نوي متن شفافیت او د شالید شفافیت اسانتیاوې اضافه شوي. - .text-* او .bg-*اسانتیاوې اوس د CSS متغیرونو او rgba()رنګ ارزښتونو سره رامینځته شوي ، تاسو ته اجازه درکوي په اسانۍ سره د نوي شفافیت اسانتیاو سره هر ډول اسانتیا تنظیم کړئ.

  • زموږ د اجزاو تنظیم کولو څرنګوالي ښودلو پراساس نوي نمونې مثالونه اضافه کړل. - زموږ د نوي Snippets مثالونو سره د دودیز اجزاو او نورو عام ډیزاین نمونو کارولو لپاره چمتو کړئ . فوټرونه ، ډراپ ډاونونه ، د لیست ګروپونه ، او ماډلونه شامل دي.

  • د پوپورونو او وسیلو ټایپونو څخه د نه کارول شوي موقعیت سټایلونه لرې شوي ځکه چې دا یوازې د پوپر لخوا اداره کیږي. $tooltip-marginله مینځه وړل شوی او nullپه پروسه کې ټاکل شوی.

نور معلومات غواړئ؟ د v5.1.0 بلاګ پوسټ ولولئ.

هې هلته! زموږ د بوټسټریپ 5 ، v5.0.0 لومړي لوی ریلیز کې بدلونونه لاندې مستند شوي. دوی پورته ښودل شوي اضافي بدلونونه منعکس نه کوي.

انحصارونه

  • jQuery غورځول شوی.
  • له Popper v1.x څخه Popper v2.x ته لوړ شوی.
  • لیبساس د ډارټ ساس سره بدل کړ ځکه چې زموږ د ساس کمپیلر ورکړل شوی لیبساس له مینځه تللی و.
  • زموږ د اسنادو جوړولو لپاره له جیکیل څخه هوګو ته مهاجر شوی

د براوزر ملاتړ

  • د انټرنیټ اکسپلورر 10 او 11 پریښودل
  • د مایکروسافټ څنډه غورځول شوې <16 (میراث څنډه)
  • فایرفوکس غورځول <60
  • غورځول شوی سفاري <12
  • غورځول شوی iOS سفاري <12
  • کروم <60 غورځول شوی

د اسنادو بدلون

  • بیا ډیزاین شوی کورپاڼه، د اسنادو ترتیب، او فوټر.
  • د پارسل نوی لارښود اضافه شو.
  • د نوي دودیز کولو برخه اضافه کړه، د v4 د تیمینګ پاڼې ځای په ځای کول، په Sass کې د نوي توضیحاتو سره، د نړیوال ترتیب کولو اختیارونه، د رنګ سکیمونه، د CSS تغیرات، او نور ډیر څه.
  • د فورمو ټول اسناد په نوي فورمه برخه کې بیا تنظیم شوي ، محتويات په ډیرو متمرکزو پاڼو کې جلا کول.
  • په ورته ډول، د ترتیب برخه تازه کړه ، ترڅو د ګریډ منځپانګې په روښانه توګه روښانه کړي.
  • د "Navs" برخې پاڼې نوم "Navs & Tabs" ته بدل شو.
  • د "چیکونو" پاڼې نوم په "چیکونو او راډیوګانو" بدل شو.
  • نوبار بیا ډیزاین کړی او یو نوی سبناو اضافه کړی ترڅو زموږ د سایټونو او اسنادو نسخو ته رسیدل اسانه کړي.
  • د لټون ساحې لپاره نوی کیبورډ شارټ کټ اضافه شوی: Ctrl + /.

ساس

  • موږ د ډیفالټ Sass نقشه ادغامونه له مینځه وړي ترڅو د بې ځایه ارزښتونو لرې کول اسانه کړي. په یاد ولرئ چې تاسو اوس باید ټول ارزښتونه په ساس نقشو کې تعریف کړئ لکه $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-focus, اوhover-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ارزښتونو ته اجازه ورکوي او noneد ډیری دلیلونو څخه راټیټیږي. وګوری #30394

  • مکسین اوس border-radius()یو ډیفالټ ارزښت لري.

د رنګ سیسټم

  • د رنګ سیسټم چې د نوي رنګ سیسټم په ګټه کار کاوه color-level()او لرې شوی و. زموږ په کوډبیس کې $theme-color-intervalټول lighten()او دندې د او لخوا بدل شوي . دا افعال به رنګ د سپین یا تور سره مخلوط کړي د دې پرځای چې د یو ټاکلي مقدار لخوا د هغې روښنايي بدله کړي. دا به یو رنګ رنګ یا سیوري کوي پدې پورې اړه لري چې ایا د وزن پیرامیټر مثبت دی یا منفي. د نورو جزیاتو لپاره #30622 وګورئ.darken()tint-color()shade-color()shift-color()

  • د هر رنګ لپاره نوي رنګونه او سیوري اضافه شوي، د هر بیس رنګ لپاره نهه جلا رنګونه چمتو کوي، د نوي 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ساس نقشې سره زموږ د ښودلو ټایپوګرافي ترمیم کړه. د یو واحد او تنظیم شوي 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دې پرځای کاروي چې د ځانګړتیا borderښه ملاتړ وکړي . sizeدا د پیډینګ اسانتیاو کارول هم وړوي ترڅو د ګنډو ویشونکي رامینځته کړي (د بیلګې په توګه ، <hr class="py-1">).

  • ډیفالټ افقی padding-leftآن <ul>او <ol>عناصر له براوزر ډیفالټ 40pxڅخه 2rem.

  • اضافه شوي $enable-smooth-scroll، کوم چې په نړیواله کچه پلي کیږي — پرته له هغه کاروونکو څخه چې د میډیا پوښتنو scroll-behavior: smoothله لارې د حرکت کمولو غوښتنه کوي . وګوری #31877prefers-reduced-motion

RTL

  • افقی سمت مشخص متغیرونه، اسانتیاوې، او مکسین ټول د منطقي ملکیتونو کارولو لپاره نومول شوي لکه څنګه چې په فلیکس باکس ترتیبونو کې موندل کیږي — د بیلګې په توګه، startاو endپه ځای leftکې right.

فورمې

  • نوي فلوټینګ فارمونه اضافه کړل! موږ د فلوټینګ لیبل مثال په بشپړ ډول ملاتړ شوي فارم اجزاو ته وده ورکړه. د نوي فلوټینګ لیبلونو پاڼه وګورئ.

  • ماتول یوځای شوي اصلي او دودیز فارم عناصر. چک بکسونه، راډیوګانې، انتخابونه، او نور آخذې چې په 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

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شوی د اسانه تنظیم کولو لپاره پرته له دې چې د CSS بیا تنظیم کولو اړتیا.

تڼۍ

  • ماتول د تثبیت تڼۍ ، د چک بکسونو یا راډیوګانو سره، نور جاوا سکریپټ ته اړتیا نلري او نوي مارک اپ ولري. موږ نور د ریپ کولو عنصر ته اړتیا نلرو، په کې اضافه کړئ.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-imageد A پر ځای (ایمبیډ شوی SVG) کاروي &times;، پرته له دې چې ستاسو مارک اپ ته لمس کولو اړتیا اسانه تنظیم کولو ته اجازه ورکړي.

  • .btn-close-whiteنوی ډول اضافه شوی چې filter: invert(1)د تیاره شالیدونو پروړاندې د لوړ برعکس برطرف عکسونو وړولو لپاره کاروي.

سقوط

  • د اکارډونو لپاره د سکرول اینکرینګ لرې شوی.

  • .dropdown-menu-darkد غوښتنې په اړه تیاره ډراپ ډاونونو لپاره نوی ډول او اړوند متغیرونه اضافه شوي.

  • لپاره نوی متغیر اضافه کړ $dropdown-padding-x.

  • د ښه برعکس لپاره د ډراپ ډاون ویشونکی تیاره کړی.

  • ماتولد ډراپ ډاون لپاره ټولې پیښې اوس د ډراپ ډاون ټګل تڼۍ کې رامینځته شوي او بیا اصلي عنصر ته ببل شوي.

  • د ډراپ ډاون مینو اوس یو data-bs-popper="static"خاصیت لري کله چې د ډراپ ډاون موقعیت مستحکم وي ، یا ډراپ ډاون په نیوبار کې وي. دا زموږ د جاواسکریپټ لخوا اضافه شوی او موږ سره د پوپر موقعیت سره مداخله پرته د دودیز موقعیت سټایلونو کارولو کې مرسته کوي.

  • ماتولflipد اصلي پوپر ترتیب په ګټه د ډراپ ډاون پلگ ان لپاره ډراپ شوی اختیار. تاسو اوس کولی شئ په فلیپfallbackPlacements موډیفیر کې د اختیار لپاره د خالي صف په تیریدو سره د فلیپ کولو چلند غیر فعال کړئ .

  • د ډراپ ډاون مینو اوس د نوي autoCloseاختیار سره د کلیک کولو وړ کیدی شي ترڅو د اتوماتیک نږدې چلند اداره کړي . تاسو کولی شئ دا اختیار وکاروئ ترڅو د ډراپ ډاون مینو دننه یا بهر کلیک ومني ترڅو دا متقابل شي.

  • ډراپ ډاون اوس .dropdown-itemپه s کې پوښل شوي ملاتړ <li>کوي.

جمبوترون

لست ګروپ

  • د , , , او ټولګي لپاره نوي nullمتغیرونه اضافه کړل .font-sizefont-weightcolor:hover color.nav-link
  • ماتولNavbars اوس دننه یو کانټینر ته اړتیا لري (د فاصلې اړتیاو او CSS اړتیاو ته خورا ساده کولو لپاره).
  • ماتول.activeټولګي نور په s کې نشي پلي کیدی ، .nav-itemدا باید په مستقیم ډول په .nav-links کې پلي شي.

آفکانوس

پاڼه کول

  • د صفحې کولو لینکونه اوس د دودیز وړ margin-leftدي چې په متحرک ډول په ټولو کونجونو کې ګرد شوي کله چې له یو بل څخه جلا شي.

  • transitionد مخ کولو لینکونو کې اضافه شوي.

Popovers

  • ماتولزموږ په ډیفالټ پاپ اوور ټیمپلیټ کې نوم بدل .arrowشو ..popover-arrow

  • whiteListد اختیار نوم بدل کړ allowList.

سپنران

  • سپنران اوس prefers-reduced-motion: reduceد حرکتونو په ورو کولو سره ویاړ کوي. وګوری # 31882

  • د اسپنر عمودی سمون ښه شوی.

ټاسټونه

  • ټوسټونه اوس د موقعیت ورکولو اسانتیاو په مرسته په A کې ځای کیدی شي ..toast-container

  • د ډیفالټ ټوسټ موده 5 ثانیو ته بدله کړه.

  • له ټوسټونو overflow: hiddenڅخه لرې شوی او د مناسبو افعالو سره ځای په ځای border-radiusشوی 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، لوی څخه کوچني)، او د Sass نقشې له لارې تعدیل کیدی شي.

  • ماتولد اسانتیاو .font-weight-*نومونه .fw-*د لنډیز او دوام لپاره بدل شوي.

  • ماتولد اسانتیاو .font-style-*نومونه .fst-*د لنډیز او دوام لپاره بدل شوي.

  • د سی ایس ایس ګریډ او فلیکس باکس ترتیبونو لپاره د .d-gridاسانتیاوو او نوي gapاسانتیاو ښودلو لپاره اضافه شوي..gap

  • ماتوللیرې .rounded-smاو rounded-lg، او د ټولګیو نوې پیمانه یې معرفي .rounded-0کړه .rounded-3. وګوری #31687

  • line-heightنوي اسانتیاوې اضافه شوي : .lh-1،، او . دلته وګورئ ..lh-sm.lh-base.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().