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

v5.2.0

Yangilangan dizayn

Bootstrap v5.2.0 loyihadagi bir nechta komponentlar va xususiyatlar uchun nozik dizayn yangilanishiga ega, ayniqsa border-radiustugmalar va shakl boshqaruvlaridagi aniq qiymatlar orqali . Hujjatlarimiz yangi bosh sahifa, yon paneldagi boʻlimlarni endi yigʻmaydigan oddiyroq hujjatlar tartibi va Bootstrap piktogrammalarining yanada yorqin misollari bilan yangilandi .

Ko'proq CSS o'zgaruvchilari

Biz barcha komponentlarimizni CSS o'zgaruvchilaridan foydalanish uchun yangiladik. Sass hali ham hamma narsani asos qilib olsa-da, har bir komponent komponentlar tayanch sinflarida (masalan, .btn) CSS o'zgaruvchilarini o'z ichiga olishi uchun yangilangan bo'lib, Bootstrap-ni real vaqt rejimida sozlash imkonini beradi. Keyingi nashrlarda biz CSS o'zgaruvchilaridan foydalanishni maket, shakllar, yordamchilar va yordamchi dasturlarda kengaytirishni davom ettiramiz. Har bir komponentdagi CSS o'zgaruvchilari haqida ularning tegishli hujjat sahifalarida o'qing.

Bootstrap 6 ga qadar bizning CSS oʻzgaruvchilaridan foydalanishimiz biroz toʻliq boʻlmaydi. Garchi biz ularni toʻliq amalga oshirishni istasak ham, ular oʻzgarishlarga olib kelishi mumkin. Misol uchun, bizning manba kodimizdagi sozlama , agar biron sababga ko'ra $alert-border-width: var(--bs-border-width)qilgan bo'lsangiz, o'zingizning kodingizdagi potentsial Sassni buzadi .$alert-border-width * 2

Shunday qilib, iloji bo'lsa, biz ko'proq CSS o'zgaruvchilari tomon intilishni davom ettiramiz, ammo v5 da bizning amaliyotimiz biroz cheklangan bo'lishi mumkinligini tan oling.

Yangi`_maps.scss`

Bootstrap v5.2.0 yangi Sass faylini taqdim etdi _maps.scss. _variables.scssAsl xaritaga kiritilgan yangilanishlar ularni kengaytiruvchi ikkinchi darajali xaritalarga tatbiq etilmagan muammoni hal qilish uchun u bir nechta Sass xaritalarini chiqaradi . Masalan, yangilanishlar asosiy moslashtirish ish oqimlarini buzgan $theme-colorsboshqa mavzu xaritalariga tatbiq etilmadi . $theme-colorsMuxtasar qilib aytganda, Sassda cheklov mavjud bo'lib, bir marta standart o'zgaruvchi yoki xarita ishlatilgan bo'lsa, uni yangilab bo'lmaydi. CSS o'zgaruvchilari bilan boshqa CSS o'zgaruvchilarni yaratish uchun foydalanilganda, xuddi shunday kamchilik mavjud.

Shuning uchun Bootstrap-dagi o'zgaruvchan sozlashlar dan keyin @import "functions", lekin import stekimizdan oldin @import "variables"va qolgan qismidan keyin kelishi kerak. Xuddi shu narsa Sass xaritalariga ham tegishli - foydalanishdan oldin standart sozlamalarni bekor qilishingiz kerak. Quyidagi xaritalar yangisiga ko'chirildi _maps.scss:

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

Sizning shaxsiy Bootstrap CSS tuzilmalaringiz endi alohida xaritalarni import qilish bilan shunday ko'rinishi kerak.

  // 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

Yangi yordamchi dasturlar

Yarim qalin shriftlar uchun kengaytirilgan yordamchi font-weightdasturlar ..fw-semibold
Kengaytirilgan border-radiusyordamchi dasturlar ikkita yangi o'lchamni o'z ichiga oladi .rounded-4va .rounded-5ko'proq imkoniyatlar uchun .

Qo'shimcha o'zgarishlar

Yangi $enable-container-classesvariant taqdim etildi. — Endi CSS Grid-ning eksperimental tartibiga kirishda .container-*, agar ushbu parametr ga o'rnatilmagan bo'lsa, sinflar hali ham kompilyatsiya qilinadi false. Konteynerlar ham o'z truba qiymatlarini saqlaydi.
Offcanvas komponentida endi sezgir o'zgarishlar mavjud . Asl .offcanvassinf o'zgarishsiz qoladi - u barcha ko'rish oynalarida kontentni yashiradi. Uni sezgir qilish uchun ushbu .offcanvassinfni istalgan .offcanvas-{sm|md|lg|xl|xxl}sinfga o'zgartiring.
Qalinroq stol ajratgichlari endi tanlanadi. — Biz jadval guruhlari orasidagi qalinroq va bekor qilish qiyinroq chegarani olib tashladik va uni siz qoʻllashingiz mumkin boʻlgan ixtiyoriy sinfga oʻtkazdik .table-group-divider. Misol uchun jadval hujjatlariga qarang.
Scrollspy Intersection Observer API dan foydalanish uchun qayta yozildi , ya'ni sizga nisbatan ota-ona o'ramlari, eskirganoffsetkonfiguratsiyalar va boshqalar kerak emas. Scrollspy ilovalaringizni navbatni ta'kidlashda aniqroq va izchil bo'lishini qidiring.
Popoverlar va maslahatlar endi CSS o'zgaruvchilardan foydalanadi. Ba'zi CSS o'zgaruvchilari o'zgaruvchilar sonini kamaytirish uchun Sass hamkasblaridan yangilangan. Natijada, ushbu nashrda uchta o'zgaruvchi eskirgan: $popover-arrow-color, $popover-arrow-outer-color, va $tooltip-arrow-color.
Yangi .text-bg-{color}yordamchilar qo'shildi. .text-*Shaxsiy va yordamchi dasturlarni o'rnatish o'rniga, .bg-*endi kontrastli old fonni o'rnatish uchun yordamchilardan .text-bg-*foydalanishingiz mumkin .background-colorcolor
.form-check-reverseYorliqlar va tegishli katakchalar/radiolar tartibini o'zgartirish uchun qo'shilgan modifikator.
Qo'shilgan chiziqli ustunlar.table-striped-columns yangi sinf orqali jadvallarni qo'llab-quvvatlaydi .

O'zgarishlarning to'liq ro'yxati uchun GitHub'dagi v5.2.0 loyihasiga qarang .

v5.1.0

CSS Grid layout uchun tajribaviy yordam qo'shildi . — Bu davom etayotgan ish va ishlab chiqarishda foydalanishga hali tayyor emas, lekin siz Sass orqali yangi xususiyatni tanlashingiz mumkin. Uni yoqish $enable-grid-classes: falseuchun CSS Gridni sozlash orqali standart tarmoqni o'chiring va sozlash orqali yoqing $enable-cssgrid: true.
Offcanvasni qo'llab-quvvatlash uchun yangilangan navbatlar. — Har qanday navigatsiya paneliga sezgir .navbar-expand-*sinflar va ba'zi offcanvas belgilari bilan offcanvas tortmachalarini qo'shing .
Yangi to'ldiruvchi komponent qo'shildi . — Bizning eng yangi komponentimiz, bu sizning saytingiz yoki ilovangizda nimadir yuklanayotganligini ko'rsatish uchun haqiqiy kontent o'rniga vaqtinchalik bloklarni taqdim etish usuli.
Yig'ish plagini endi gorizontal siqishni qo'llab-quvvatlaydi . — Yigʻish uchun oʻrniga .collapse-horizontalni qoʻshing . yoki ni o'rnatish orqali brauzerni qayta bo'yashdan saqlaning ..collapsewidthheightmin-heightheight
Yangi stek va vertikal qoida yordamchilari qo'shildi. — Tezkor steklar bilan maxsus tartiblarni yaratish uchun bir nechta flexbox xususiyatlarini tezda qo'llang . Gorizontal ( .hstack) va vertikal ( .vstack) steklardan tanlang. Yangi yordamchilar<hr> bilan elementlarga o'xshash vertikal ajratgichlarni qo'shing ..vr
Yangi global :rootCSS o'zgaruvchilari qo'shildi. - Uslublarni :rootboshqarish darajasiga bir nechta yangi CSS o'zgaruvchilari qo'shildi . <body>Ko'proq ishlar, jumladan, bizning yordamchi dasturlarimiz va komponentlarimiz bo'ylab ishlamoqda, ammo hozircha CSS o'zgaruvchilarini Moslash bo'limida o'qing.
CSS o'zgaruvchilaridan foydalanish uchun rang va fon yordam dasturlari qayta ko'rib chiqildi va matnning shaffofligi va fonning shaffofligi uchun yangi yordamchi dasturlar qo'shildi. — .text-* va .bg-*yordamchi dasturlar endi CSS o'zgaruvchilari va rgba()rang qiymatlari bilan yaratilgan bo'lib, har qanday yordamchi dasturni yangi shaffoflik yordam dasturlari bilan osongina sozlash imkonini beradi.
Komponentlarimizni qanday sozlashni ko'rsatishga asoslangan yangi parcha misollari qo'shildi. — Yangi parchalar misollarimiz bilan moslashtirilgan komponentlar va boshqa umumiy dizayn naqshlaridan foydalanishga tayyor bo'ling . Altbilgilar , ochiladigan menyular , ro'yxat guruhlari va modallarni o'z ichiga oladi .
Foydalanilmayotgan joylashishni aniqlash uslublari popoverlar va maslahatlardan olib tashlandi , chunki ular faqat Popper tomonidan boshqariladi. eskirgan va jarayonda $tooltip-marginsozlangan .null

Qo'shimcha ma'lumot olishni xohlaysizmi? v5.1.0 blog postini o'qing.

Salom! Bootstrap 5 v5.0.0 ning birinchi yirik versiyasiga kiritilgan o‘zgarishlar quyida hujjatlashtirilgan. Ular yuqorida ko'rsatilgan qo'shimcha o'zgarishlarni aks ettirmaydi.

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()Funktsiya va tegishli o'zgaruvchilar nomi YIQ color-contrast()rang maydoniga aloqador 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 tashlandi .$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 rang o'lchovi funksiyasi 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-control.custom-checkboxhozir .form-check.
- .custom-control.custom-custom-radiohozir .form-check.
- .custom-control.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 va .input-group-textkiritish guruhlarining bevosita bolalari sifatida qo'shishingiz mumkin.
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-textni o'rnatmaydi display, bu sizga faqat HTML elementini o'zgartirish orqali kerakli matnni inline yaratish yoki blokirovka qilish imkonini beradi.
Shakl boshqaruvlari iloji bo'lsa, sobit qo'llanilmaydi , buning o'rniga moslashtirish va boshqa komponentlar bilan mosligini yaxshilash uchun heightkeyinga suriladi .min-height
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

Yangi akkordeon komponenti qo'shildi .

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

Non bo'laklari

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 .

Karusel

Qorong'i matn, boshqaruv elementlari va indikatorlar uchun yangi .carousel-darkvariant qo'shildi (ochiq fon uchun juda mos).
Karusel boshqaruvlari uchun chevron piktogrammalari Bootstrap Icons -dan yangi SVG-lar 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 ×, 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.

Ochiladigan menyular

.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 data-bs-popper="static"ochiladigan menyuning joylashuvi statik bo'lsa yoki 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 ga o'ralgan holda qo'llab-quvvatlanadi <li>.

Jumbotron

BuzilishJumbotron komponenti tashlandi, chunki u yordamchi dasturlar bilan takrorlanishi mumkin. Demo uchun yangi Jumbotron misolimizga qarang.

Ro'yxat guruhi

Guruhlar roʻyxatiga yangi .list-group-numberedmodifikator qoʻshildi.

Navs va yorliqlar

, , , va sinfga yangi nullo'zgaruvchilar qo'shildi .font-sizefont-weightcolor:hover color.nav-link

Navbarlar

BuzilishNavbarlar endi ichida konteynerni talab qiladi (oraliq talablarini va CSS talablarini keskin soddalashtirish uchun).
BuzilishSinfni .activeendi s ga qo'llash mumkin emas .nav-item, u to'g'ridan-to'g'ri s ga qo'llanilishi kerak .nav-link.

Tuvaldan tashqari

Yangi offcanvas komponenti qo'shildi .

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 nomlaridan foydalanish uchun bir nechta yordamchi dasturlar nomi o'zgartirildi:
- Qayta nomlandi .left-*va va .right-*ga ..start-*.end-*
- Qayta nomlandi .float-leftva va .float-rightga ..float-start.float-end
- Qayta nomlandi .border-leftva va .border-rightga ..border-start.border-end
- Qayta nomlandi .rounded-leftva va .rounded-rightga ..rounded-start.rounded-end
- Qayta nomlandi .ml-*va va .mr-*ga ..ms-*.me-*
- Qayta nomlandi .pl-*va va .pr-*ga ..ps-*.pe-*
- Qayta nomlandi .text-leftva va .text-rightga ..text-start.text-end
BuzilishSukut bo'yicha salbiy chegaralar o'chirilgan.
Qo'shimcha elementlarga fonni .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:
```
const modal = new bootstrap.Modal('#myModal')
const 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().