Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

v5 ga ko'chirilmoqda

v4 dan v5 ga o‘tishga yordam berish uchun Bootstrap manba fayllari, hujjatlari va komponentlariga kiritilgan o‘zgarishlarni kuzatib boring va ko‘rib chiqing.

Ushbu sahifada

Bog'liqlar

  • JQuery o'chirildi.
  • Popper v1.x dan Popper v2.x ga yangilandi.
  • Libsass o'rniga Dart Sass qo'yildi, chunki Libsassga berilgan Sass kompilyatorimiz eskirgan.
  • Hujjatlarimizni yaratish uchun Jekylldan Gyugoga ko'chib o'tdi

Brauzerni qo'llab-quvvatlash

  • Internet Explorer 10 va 11 o'chirildi
  • Microsoft Edge o'chirildi < 16 (Legacy Edge)
  • Firefox o'chirildi <60
  • Safari o'chirildi <12
  • iOS Safari o'chirildi <12
  • Chrome o'chirib tashlandi < 60

Hujjatlardagi o'zgarishlar

  • Qayta ishlab chiqilgan bosh sahifa, hujjatlar tartibi va altbilgi.
  • Yangi posilka qoʻllanmasi qoʻshildi .
  • Sass haqidagi yangi ma'lumotlar, global konfiguratsiya opsiyalari, rang sxemalari, CSS o'zgaruvchilari va boshqalar bilan v4 ning Theming sahifasi o'rniga yangi Shaxsiylashtirish bo'limi qo'shildi .
  • Barcha shakl hujjatlarini yangi Shakllar bo'limiga qayta tashkil qildi, tarkibni ko'proq yo'naltirilgan sahifalarga ajratdi.
  • Xuddi shunday, tarmoq tarkibini yanada aniqroq qilish uchun "Tartib" bo'limi yangilandi.
  • “Navs” komponent sahifasi “Navs & Tabs” deb qayta nomlandi.
  • “Tekshiruvlar” sahifasining nomi “Cheklar va radiolar” deb o‘zgartirildi.
  • Saytlarimiz va hujjatlar versiyalarimizda harakat qilishni osonlashtirish uchun navigatsiya paneli qayta ishlab chiqildi va yangi subnav qo'shildi.
  • Qidiruv maydoni uchun yangi klaviatura yorlig'i qo'shildi: Ctrl + /.

Sass

  • Biz ortiqcha qiymatlarni olib tashlashni osonlashtirish uchun standart Sass xarita birlashmalaridan voz kechdik. Shuni yodda tutingki, endi siz Sass xaritalaridagi barcha qiymatlarni belgilashingiz kerak $theme-colors. Sass xaritalari bilan qanday kurashish kerakligini ko'rib chiqing .

  • Buzilishcolor-yiq()Funksiya va tegishli oʻzgaruvchilar nomi YIQ color-contrast()rang maydoni bilan bogʻliq emasligi sababli oʻzgartirildi. Qarang: №30168.

    • $yiq-contrasted-thresholddeb qayta nomlanadi $min-contrast-ratio.
    • $yiq-text-darkva $yiq-text-lightmos ravishda $color-contrast-darkva deb qayta nomlanadi $color-contrast-light.

  • BuzilishMedia so'rovlar mikslari parametrlari mantiqiyroq yondashuv uchun o'zgartirildi.

    • media-breakpoint-down()keyingi toʻxtash nuqtasi oʻrniga toʻxtash nuqtasining oʻzidan foydalanadi (masalan, dan kichikroq koʻrish oynalari media-breakpoint-down(lg)oʻrniga ).media-breakpoint-down(md)lg
    • Xuddi shunday, ikkinchi parametr media-breakpoint-between()ham keyingi to'xtash nuqtasi o'rniga to'xtash nuqtasining o'zidan foydalanadi (masalan, va orasidagi ko'rish oynalari media-between(sm, lg)o'rniga ).media-breakpoint-between(sm, md)smlg

  • BuzilishChop etish uslublari va $enable-print-stylesoʻzgaruvchilar olib tashlandi. Chop etish ekranlari sinflari hali ham mavjud. № 28339 ga qarang .

  • Buzilishcolor(), theme-color()va funksiyalari gray()o'zgaruvchilar foydasiga tushirildi. № 29083 ga qarang .

  • Buzilishtheme-color-level()Funktsiya nomini o'zgartirdi va endi faqat ranglar color-level()o'rniga istalgan rangni qabul qiladi . Qarang: #29083 Ehtiyot bo'ling: keyinroq tushib qolgan .$theme-color color-level()v5.0.0-alpha3

  • BuzilishQayta nomlandi $enable-prefers-reduced-motion-media-queryva qisqalik $enable-pointer-cursor-for-buttonsuchun $enable-reduced-motion.$enable-button-pointers

  • BuzilishAralashmani olib bg-gradient-variant()tashladi. Yaratilgan sinflar .bg-gradiento'rniga elementlarga gradient qo'shish uchun sinfdan foydalaning ..bg-gradient-*

  • Buzilish Oldindan eskirgan mikslar olib tashlandi:

    • hover, hover-focus, plain-hover-focus, vahover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(shuningdek, tegishli yordamchi dastur sinfini tashlab qo'ydi, .text-hide)
    • visibility()
    • form-control-focus()

  • BuzilishSassning ranglarni o'lchash funktsiyasi bilan to'qnashuvning oldini olish uchun scale-color()funksiya qayta nomlandi.shift-color()

  • box-shadowmiksinlar endi nullqiymatlarga ruxsat beradi va nonebir nechta argumentlardan voz kechadi. № 30394 ga qarang .

  • Miksin border-radius()endi standart qiymatga ega.

Rang tizimi

  • U bilan ishlagan color-level()va $theme-color-intervalyangi rang tizimi foydasiga olib tashlangan rang tizimi. Bizning kodlar bazamizdagi barcha lighten()va funksiyalar va bilan almashtiriladi . Bu funksiyalar rangning ochiqligini belgilangan miqdorda o‘zgartirish o‘rniga oq yoki qora bilan aralashtirib yuboradi. Og'irlik parametri ijobiy yoki salbiy bo'lishiga qarab, rangni bo'yaydi yoki soya qiladi. Batafsil ma'lumot uchun #30622 ga qarang .darken()tint-color()shade-color()shift-color()

  • Har bir rang uchun yangi ranglar va soyalar qo'shildi, har bir asosiy rang uchun to'qqizta alohida rang, yangi Sass o'zgaruvchilari sifatida taqdim etiladi.

  • Yaxshilangan rang kontrasti. WCAG 2.1 AA kontrastini ta'minlash uchun 3:1 dan 4,5:1 gacha bo'lgan rang kontrasti nisbati va yangilangan ko'k, yashil, moviy va pushti ranglar. Shuningdek, rang kontrast rangini dan $gray-900ga o'zgartirdi $black.

  • Rang tizimimizni qo'llab-quvvatlash uchun ranglarimizni mos ravishda aralashtirish uchun yangi odatiy tint-color()va funksiyalarni qo'shdik .shade-color()

Grid yangilanishlari

  • Yangi uzilish nuqtasi! va yuqorisi uchun yangi xxlto'xtash nuqtasi qo'shildi. 1400pxBoshqa barcha to'xtash nuqtalarida o'zgarishlar yo'q.

  • Yaxshilangan oluklar. Oluklar endi remsda o'rnatiladi va v4 dan torroq ( 1.5rem, yoki taxminan 24px, dan pastga 30px). Bu bizning tarmoq tizimimizning oluklarini oraliq yordamchi dasturlarimiz bilan moslashtiradi.

    • Gorizontal/vertikal oluklar, gorizontal oluklar va vertikal oluklarni boshqarish uchun yangi oluklar sinfi ( .g-*, .gx-*, va ) qo‘shildi..gy-*
    • BuzilishYangi oluk utilitlariga mos .no-gutterskelish uchun nomi o‘zgartirildi..g-0

  • Ustunlar endi position: relativeqo'llanilmadi, shuning uchun .position-relativebu xatti-harakatni tiklash uchun ba'zi elementlarga qo'shishingiz kerak bo'lishi mumkin.

  • Buzilish.order-*Ko'pincha foydalanilmay qolgan bir nechta darslarni tashlab qo'ydi. Endi biz faqat qutidan tashqarida .order-1taqdim etamiz..order-5

  • BuzilishKomponent tashlab qo'yildi, .mediachunki u yordamchi dasturlar bilan osongina takrorlanishi mumkin. Misol uchun #28265 va moslashuvchan yordamchi dasturlar sahifasiga qarang .

  • Buzilish bootstrap-grid.cssEndi global quti o'lchamini tiklash o'rniga faqat box-sizing: border-boxustunga tegishli. Shunday qilib, bizning panjara uslublarimiz aralashmasdan ko'proq joylarda ishlatilishi mumkin.

  • $enable-grid-classesendi konteyner sinflarini yaratishni o'chirib qo'ymaydi. Qarang: № 29146.

  • make-colMiksin belgilangan oʻlchamsiz teng ustunlarga sukut boʻyicha yangilandi .

Kontent, qayta yuklash va boshqalar

  • RFS endi sukut bo'yicha yoqilgan. Miksin yordamida sarlavhalarfont-size()avtomatik ravishdafont-sizebilan masshtabga moslashadi. Bu xususiyat avval v4 bilan ro‘yxatdan o‘tgan edi.

  • Buzilish$display-*O'zgaruvchilarimizni va $display-font-sizesSass xaritasi bilan almashtirish uchun displey tipografiyamizni qayta ko'rib chiqdik . $display-*-weightShuningdek , bitta $display-font-weightva sozlangan font-sizes uchun individual o'zgaruvchilar olib tashlandi .

  • Ikkita yangi .display-*sarlavha oʻlchami qoʻshildi .display-5va .display-6.

  • Havolalar sukut bo'yicha (faqat sichqonchani ko'tarilganda emas), agar ular muayyan komponentlarning bir qismi bo'lmasa, tagiga chiziladi.

  • Uslublarni yangilash va uslublarni ko'proq nazorat qilish uchun ularni CSS o'zgaruvchilari bilan qayta qurish uchun jadvallar qayta ishlab chiqilgan .

  • BuzilishIchki jadvallar endi uslublarni meros qilib olmaydi.

  • Buzilish .thead-lightva barcha jadval elementlari ( , , , , va ) uchun ishlatilishi mumkin bo'lgan variant sinflari .thead-darkfoydasiga tushiriladi ..table-*theadtbodytfoottrthtd

  • BuzilishMiksin table-row-variant()nomi o'zgartiriladi table-variant()va faqat 2 parametrni qabul qiladi: $color(rang nomi) va $value(rang kodi). Chegara rangi va urg'u ranglari jadval omili o'zgaruvchilari asosida avtomatik ravishda hisoblanadi.

  • Jadval katakchasini toʻldirish oʻzgaruvchilarini -yva ga boʻling -x.

  • BuzilishDarsni tashlab ketdi .pre-scrollable. Qarang: № 29135

  • Buzilish .text-*Utilitalar endi havolalarga hover va fokus holatini qo'shmaydi. .link-*o‘rniga yordamchi sinflardan foydalanish mumkin. Qarang: № 29267

  • BuzilishDarsni tashlab ketdi .text-justify. Qarang: № 29793

  • Buzilish <hr>elementlar endi atributni yaxshiroq qo'llab-quvvatlash uchun heighto'rniga foydalanadi . Bu, shuningdek, qalinroq ajratgichlarni (masalan, ) yaratish uchun to'ldirish yordam dasturlaridan foydalanish imkonini beradi .bordersize<hr class="py-1">

  • Standart gorizontal padding-leftyoqilgan <ul>va <ol>elementlarni brauzer standartidan 40pxga tiklang 2rem.

  • Qo‘shilgan $enable-smooth-scroll, bu global miqyosda amal qiladi — media so‘rovi scroll-behavior: smoothorqali harakatni kamaytirishni so‘ragan foydalanuvchilar bundan mustasno . Qarang: №31877prefers-reduced-motion

RTL

  • Gorizontal yo'nalishga xos o'zgaruvchilar, yordamchi dasturlar va miksinlarning barchasi flexbox maketlarida topilganlar kabi mantiqiy xususiyatlardan foydalanish uchun qayta nomlandi, masalan , startva endo'rniga .leftright

Shakllar

  • Yangi suzuvchi shakllar qo'shildi! Biz Floating labels misolini toʻliq qoʻllab-quvvatlanadigan shakl komponentlariga targʻib qildik. Yangi suzuvchi teglar sahifasiga qarang.

  • Buzilish Birlashtirilgan mahalliy va moslashtirilgan shakl elementlari. v4 da mahalliy va moslashtirilgan sinflarga ega bo'lgan belgilash katakchalari, radiolar, tanlash va boshqa kirishlar birlashtirildi. Endi bizning deyarli barcha shakl elementlari butunlay moslashtirilgan, aksariyati maxsus HTML talab qilmaydi.

    • .custom-checkhozir .form-check.
    • .custom-check.custom-switchhozir .form-check.form-switch.
    • .custom-selecthozir .form-select.
    • .custom-fileva .form-fileustiga maxsus uslublar bilan almashtirildi .form-control.
    • .custom-rangehozir .form-range.
    • Tutgan mahalliy .form-control-fileva .form-control-range.

  • BuzilishYiqildi .input-group-appendva .input-group-prepend. Endi siz faqat tugmachalarni qo'shishingiz mumkin va .input-group-textkirish guruhlarining bevosita bolalari sifatida.

  • Tekshirish bilan bog'liq fikr-mulohaza xatosi bilan kirish guruhidagi uzoq vaqtdan beri yo'qolgan chegara radiusi , nihoyat, tasdiqlash bilan kirish guruhlariga qo'shimcha .has-validationsinf qo'shish orqali tuzatiladi.

  • Buzilish Bizning tarmoq tizimimiz uchun shaklga xos tartib sinflari o'chirildi. .form-group, .form-rowyoki o'rniga bizning tarmoq va yordamchi dasturlarimizdan foydalaning .form-inline.

  • BuzilishShakl teglari endi talab qiladi .form-label.

  • Buzilish .form-textendi displayoʻrnatilmaydi, bu sizga faqat HTML elementini oʻzgartirish orqali kerakli matnni inline yaratish yoki blokirovka qilish imkonini beradi.

  • Tasdiqlash piktogrammalari endi <select>s bilan qo'llanilmaydi multiple.

  • ostida qayta tartiblangan manba Sass fayllari scss/forms/, jumladan, kirish guruhi uslublari.

Komponentlar

  • paddingOgohlantirishlar, bo'laklar, kartalar, ochiladigan ro'yxatlar, ro'yxat guruhlari, modallar, popoverlar va maslahatlar uchun birlashtirilgan qiymatlar bizning $spacero'zgaruvchimizga asoslanadi. № 30564 ga qarang .

Akkordeon

Ogohlantirishlar

  • Endi ogohlantirishlarda piktogramma bilan misollar mavjud .

  • Har bir ogohlantirishda s uchun maxsus uslublar olib tashlandi <hr>, chunki ular allaqachon foydalanilgan currentColor.

Belgilar

  • BuzilishFon yordam dasturlari uchun barcha .badge-*rang sinflari o'chirildi (masalan, .bg-primaryo'rniga foydalaning .badge-primary).

  • BuzilishTushdi .badge-pill- .rounded-pillo'rniga yordamchi dasturdan foydalaning.

  • Buzilish<a>Va <button>elementlar uchun kursor va fokus uslublari olib tashlandi .

  • / dan .25em/ .5emgacha bo'lgan nishonlar uchun standart to'ldirish ko'paytirildi ..35em.65em

  • padding, background-colorva ni olib tashlash orqali non parchalarining standart ko'rinishi soddalashtirildi border-radius.

  • --bs-breadcrumb-dividerCSS -ni qayta kompilyatsiya qilmasdan oson sozlash uchun yangi CSS maxsus xususiyati qo'shildi .

Tugmalar

  • Buzilish Tasdiqlash kataklari yoki radiolar bilan almashtirish tugmalari endi JavaScript-ni talab qilmaydi va yangi belgilarga ega. Biz endi o'rash elementini talab qilmaymiz,.btn-checkga qo'shamiz va<input>uni .dagi har qanday.btnsinflar<label>. № 30650 ga qarang . Buning uchun hujjatlar bizning tugmalar sahifamizdan yangi shakllar bo'limiga ko'chirildi.

  • Buzilish Kommunal .btn-blockxizmatlar uchun tushirilgan. dan foydalanish o'rniga tugmalaringizni va kerak bo'lganda bo'sh joy qoldirish uchun yordamchi dastur .btn-blockbilan o'rang. Ular ustidan yanada ko'proq nazorat qilish uchun sezgir sinflarga o'ting. Ba'zi misollar uchun hujjatlarni o'qing..btn.d-grid.gap-*

  • Qo'shimcha parametrlarni qo'llab-quvvatlash uchun bizning button-variant()va button-outline-variant()miksinlarimiz yangilandi.

  • Hover va faol holatlarda kontrastni oshirish uchun yangilangan tugmalar.

  • Endi o'chirilgan tugmalar mavjud pointer-events: none;.

Karta

  • Buzilish.card-deckBizning tarmoq foydasiga tushib ketdi . Kartalaringizni ustun sinflariga o'rab oling va kartalar to'plamini .row-cols-*qayta yaratish uchun ota-ona konteynerini qo'shing (lekin sezgir tekislashni ko'proq nazorat qilish bilan).

  • BuzilishMasonlik .card-columnsfoydasiga tushib ketdi. № 28922 ga qarang .

  • Buzilish.cardAsoslangan akkordeon yangi Akkordeon komponenti bilan almashtirildi .

Yopish tugmasi

  • BuzilishKamroq umumiy nom uchun nomi oʻzgartirildi .close..btn-close

  • Yopish tugmalari endi HTMLda background-imagea oʻrniga (oʻrnatilgan SVG) dan foydalanadi &times;, bu esa belgilashingizga tegmasdan qulayroq sozlash imkonini beradi.

  • Toʻqroq fonda yuqori kontrastli piktogrammalarni oʻchirish imkonini beruvchi yangi .btn-close-whitevariant qoʻshildi.filter: invert(1)

Yiqilish

  • Akkordeon uchun aylanma langar olib tashlandi.

  • .dropdown-menu-darkTalab bo'yicha qorong'u ochiladigan menyular uchun yangi variant va tegishli o'zgaruvchilar qo'shildi .

  • uchun yangi o'zgaruvchi qo'shildi $dropdown-padding-x.

  • Kontrastni yaxshilash uchun ochiladigan boʻluvchi qoraytirildi.

  • BuzilishOchiladigan ro'yxat uchun barcha hodisalar endi ochiladigan o'tish tugmasi orqali ishga tushiriladi va keyin asosiy elementga ko'tariladi.

  • Ochiladigan menyular endi ochiladigan menyuning data-bs-popper="static"joylashuvi statik data-bs-popper="none"bo'lsa va ochiladigan menyu navigatsiya panelida bo'lsa, o'rnatilgan atributga ega. Bu bizning JavaScript tomonidan qo'shilgan va Popperning joylashuviga xalaqit bermasdan, maxsus joylashuv uslublaridan foydalanishimizga yordam beradi.

  • BuzilishMahalliy Popper flipkonfiguratsiyasi foydasiga ochiladigan plagin uchun tushirilgan variant. Endi siz flip modifikatoridagi fallbackPlacementsvariant uchun bo'sh massivni o'tkazish orqali aylantirish harakatini o'chirib qo'yishingiz mumkin .

  • Ochiladigan menyular endi avtomatik yopish xatti-harakatlariniautoClose boshqarish uchun yangi variant bilan bosilishi mumkin . Siz ushbu parametrdan interaktiv qilish uchun ochiladigan menyuning ichida yoki tashqarisida bosishni qabul qilish uchun foydalanishingiz mumkin.

  • Ochiladigan menyular endi .dropdown-items bilan o'ralgan holda qo'llab-quvvatlanadi <li>.

Jumbotron

Ro'yxat guruhi

  • , , , va sinfga yangi nullo'zgaruvchilar qo'shildi .font-sizefont-weightcolor:hover color.nav-link
  • BuzilishNavbarlar endi ichida konteynerni talab qiladi (oraliq talablarini va CSS talablarini keskin soddalashtirish uchun).

Tuvaldan tashqari

Sahifalar

  • Sahifalar havolalari endi sozlanishi mumkin margin-left, ular bir-biridan ajratilganda barcha burchaklarda dinamik ravishda yaxlitlanadi.

  • transitionSahifalar havolalariga s qo'shildi .

Popoverlar

  • BuzilishStandart popover shablonimizda nomi .arrowo‘zgartirildi ..popover-arrow

  • whiteListVariant nomini o'zgartirdi allowList.

Spinnerlar

  • Spinnerlar endi prefers-reduced-motion: reduceanimatsiyalarni sekinlashtirish orqali hurmat qilishadi. № 31882 ga qarang .

  • Spinnerning vertikal hizalanishi yaxshilandi.

Tostlar

  • Tostlar endi joylashishni aniqlash yordamchi dasturlari.toast-container yordamida a ichida joylashtirilishi mumkin .

  • Standart tushdi muddati 5 soniyaga o'zgartirildi.

  • Tostlardan olib tashlangan va funksiyalari overflow: hiddenbilan mos border-radiuss bilan almashtirilgan.calc()

Maslahat

  • BuzilishStandart .arrowmaslahat .tooltip-arrowshablonimizda nomi o‘zgartirildi.

  • BuzilishPopper elementlarini yaxshiroq joylashtirish uchun standart qiymati fallbackPlacementso'zgartiriladi .['top', 'right', 'bottom', 'left']

  • BuzilishwhiteListVariant nomini o'zgartirdi allowList.

Utilitalar

  • BuzilishRTL qo'llab-quvvatlash qo'shilishi bilan yo'nalish nomlari o'rniga mantiqiy xususiyat nomlarini ishlatish uchun bir nechta yordamchi dasturlar nomini o'zgartirdi:

    • Qayta nomlandi .left-*va va .right-*uchun ..start-*.end-*
    • Qayta nomlandi .float-leftva va .float-rightuchun ..float-start.float-end
    • Qayta nomlandi .border-leftva va .border-rightuchun ..border-start.border-end
    • Qayta nomlandi .rounded-leftva va .rounded-rightuchun ..rounded-start.rounded-end
    • Qayta nomlandi .ml-*va va .mr-*uchun ..ms-*.me-*
    • Qayta nomlandi .pl-*va va .pr-*uchun ..ps-*.pe-*
    • Qayta nomlandi .text-leftva va .text-rightuchun ..text-start.text-end

  • BuzilishSukut bo'yicha salbiy chegaralar o'chirilgan.

  • Qo'shimcha elementlarning fonini .bg-bodytezda sozlash uchun yangi sinf qo'shildi .<body>

  • , , , va uchun yangi joylashuv yordamchi dasturlari qo'shildi . Qiymatlarga , va har bir xususiyat uchun kiradi.toprightbottomleft050%100%

  • Mutlaq/sobit joylashtirilgan elementlarni gorizontal yoki vertikal markazlashtirish uchun yangi .translate-middle-xva yordamchi dasturlar qo'shildi..translate-middle-y

  • Yangi border-widthyordamchi dasturlar qo'shildi .

  • Buzilish.text-monospacega o'zgartirildi .font-monospace.

  • Buzilish.text-hideEndi ishlatilmasligi kerak bo'lgan matnni yashirishning antiqa usuli bo'lgani uchun olib tashlandi .

  • Utilitlar uchun qo'shilgan .fs-*yordamchi font-sizedasturlar (RFS yoqilgan). Ular HTMLning standart sarlavhalari bilan bir xil masshtabdan foydalanadi (1-6, kattadan kichikgacha) va ularni Sass xaritasi orqali o'zgartirish mumkin.

  • BuzilishUtilitlar qisqalik va izchillik uchun qayta .font-weight-*nomlandi ..fw-*

  • BuzilishUtilitlar qisqalik va izchillik uchun qayta .font-style-*nomlandi ..fst-*

  • CSS Grid va flexbox maketlari uchun yordamchi .d-griddasturlar va yangi gapyordamchi dasturlar ( ) ko'rsatish uchun qo'shildi ..gap

  • BuzilishO'chirildi .rounded-smva rounded-lg, va sinflarning yangi shkalasi joriy .rounded-0etildi .rounded-3. № 31687 ga qarang .

  • Yangi line-heightyordamchi dasturlar qo'shildi: .lh-1, .lh-sm, .lh-baseva .lh-lg. Bu yerga qarang .

  • .d-noneBoshqa displey yordam dasturlariga nisbatan ko'proq og'irlik qilish uchun yordam dasturini CSS-ga ko'chirdik .

  • .visually-hidden-focusableYordamchini konteynerlarda ham ishlash uchun kengaytirilgan, :focus-within.

Yordamchilar

  • Buzilish Responsive o'rnatish yordamchilari yangi sinf nomlari va yaxshilangan xatti-harakatlari, shuningdek foydali CSS o'zgaruvchisi bilan nisbat yordamchilari nomiga o'zgartirildi.

    • Sinflar formati nisbatiga oʻzgartirish byuchun nomi oʻzgartirildi. xMasalan, .ratio-16by9hozir .ratio-16x9.
    • Biz .embed-responsive-itemva elementlar guruhi selektorini oddiyroq selektor foydasiga olib tashladik .ratio > *. Boshqa sinf kerak emas va nisbat yordamchisi endi istalgan HTML elementi bilan ishlaydi.
    • Sass xaritasi nomi $embed-responsive-aspect-ratioso‘zgartirildi $aspect-ratiosva uning qiymatlari sinf nomi va foizni key: valuejuftlik sifatida kiritish uchun soddalashtirildi.
    • Endi CSS o'zgaruvchilari yaratiladi va Sass xaritasidagi har bir qiymat uchun kiritiladi. --bs-aspect-ratioO'zgaruvchini .ratiohar qanday maxsus nisbatni yaratish uchun o'zgartiring .

  • Buzilish "Ekranni o'quvchi" sinflari endi "vizual ravishda yashirin" sinflardir .

    • Sass fayli quyidagidan scss/helpers/_screenreaders.scsso'zgartirildiscss/helpers/_visually-hidden.scss
    • Qayta nomlandi .sr-onlyva .sr-only-focusableva.visually-hidden.visually-hidden-focusable
    • Nomi oʻzgartirildi sr-only()va va ga sr-only-focusable()aralashadi .visually-hidden()visually-hidden-focusable()

  • bootstrap-utilities.cssendi yordamchilarimiz ham kiradi. Yordamchilarni endi maxsus tuzilmalarda import qilish shart emas.

JavaScript

  • JQuery-ga bog'liqlik bekor qilindi va plaginlar odatiy JavaScript-da bo'lishi uchun qayta yozildi.

  • BuzilishBarcha JavaScript plaginlari uchun maʼlumotlar atributlari endi Bootstrap funksiyasini uchinchi tomonlardan va oʻz kodingizdan ajratishga yordam berish uchun nom maydoniga ega. Misol uchun, biz data-bs-toggleo'rniga foydalanamiz data-toggle.

  • Endi barcha plaginlar CSS selektorini birinchi argument sifatida qabul qilishi mumkin. Plaginning yangi nusxasini yaratish uchun DOM elementini yoki har qanday yaroqli CSS selektorini o'tkazishingiz mumkin:

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

  • popperConfigBootstrap-ning standart Popper konfiguratsiyasini argument sifatida qabul qiladigan funksiya sifatida o'tkazilishi mumkin, shunda siz ushbu standart konfiguratsiyani o'zingizning yo'lingizda birlashtira olasiz. Ochiladiganlar, qalqib chiquvchi oynalar va maslahatlar uchun amal qiladi.

  • Popper elementlarini yaxshiroq joylashtirish uchun standart qiymati fallbackPlacementso'zgartiriladi . Ochiladiganlar, qalqib chiquvchi oynalar va maslahatlar uchun amal qiladi.['top', 'right', 'bottom', 'left']

  • _getInstance()→ kabi umumiy statik usullardan pastki chiziq olib tashlandi getInstance().