Buuka ku bigambo ebikulu Buuka ku docs navigation
Check
in English

Okusenguka okudda ku v5

Londoola era weetegereze enkyukakyuka mu fayiro z'ensibuko ya Bootstrap, ebiwandiiko, n'ebitundu okukuyamba okusenguka okuva ku v4 okudda ku v5.

Ku muko guno

v5.2.0

Dizayini ezza obuggya

Bootstrap v5.2.0 erimu okulongoosa mu dizayini etali ya maanyi ku bitundu ebitonotono n’ebintu okwetoloola pulojekiti, okusinga okuyita mu border-radiusmiwendo egyalongoosebwa ku buttons ne form controls . Ebiwandiiko byaffe nabyo bitereezeddwa n’olupapula lw’awaka olupya, ensengeka y’ebiwandiiko ennyangu etakyagwa bitundu bya bbali, n’ebyokulabirako ebisinga okumanyika ebya Bootstrap Icons .

Enkyukakyuka za CSS endala

Tuzzeemu okutereeza ebitundu byaffe byonna okukozesa enkyukakyuka za CSS. Nga Sass ekyawanirira buli kimu, buli kitundu kizze kitereezebwa okussaamu enkyukakyuka za CSS ku bibinja by’ebitundu ebisookerwako (okugeza, .btn), okusobozesa okulongoosa okusingawo mu kiseera ekituufu okwa Bootstrap. Mu bifulumizibwa ebiddako, tujja kwongera okugaziya enkozesa yaffe ey’enkyukakyuka za CSS mu nteekateeka yaffe, foomu, abayambi, n’ebikozesebwa. Soma ebisingawo ku nkyukakyuka za CSS mu buli kitundu ku mpapula zaabwe ez'ebiwandiiko.

Enkozesa yaffe ey’enkyukakyuka ya CSS ejja kuba etali ntuufu okutuusa ku Bootstrap 6. Wadde nga twandiyagadde okussa mu nkola bino mu bujjuvu mu bboodi yonna, bikola akabi ak’okuleeta enkyukakyuka ezimenya. Okugeza, okuteeka $alert-border-width: var(--bs-border-width)mu source code yaffe kumenya potential Sass mu code yo singa wali okola $alert-border-width * 2olw'ensonga ezimu.

Nga bwe kiri, wonna we kinaasoboka, tujja kwongera okunyigiriza okutuuka ku nkyukakyuka za CSS ezisingawo, naye nsaba okimanye nti okussa mu nkola kwaffe kuyinza okuba nga kukoma katono mu v5.

Pya_maps.scss

Bootstrap v5.2.0 yaleeta fayiro empya eya Sass nga erina _maps.scss. Eggyayo maapu za Sass eziwerako okuva _variables.scssmu kutereeza ensonga ng’okulongoosa ku maapu eyasooka tekwakozesebwa ku maapu ez’okubiri ezizigaziya. Okugeza, updates to $theme-colorswere not being applied to other theme maps that relied on $theme-colors, okumenya enkola z'emirimu ez'okulongoosa ebisumuluzo. Mu bufunze, Sass erina ekkomo nga enkyukakyuka oba maapu eya bulijjo bw’emala okukozesebwa , tesobola kulongoosebwa. Waliwo obusobozi obufaananako bwe butyo ku nkyukakyuka za CSS bwe zikozesebwa okukola enkyukakyuka za CSS endala.

Eno y’ensonga lwaki enkyukakyuka ezikyukakyuka mu Bootstrap zirina okujja oluvannyuma lwa @import "functions", naye nga tezinnabaawo @import "variables"n’ebisigadde eby’omutambi gwaffe ogw’okuyingiza. Ekintu kye kimu kikwata ku maapu za Sass —olina okusazaamu ebisookerwako nga tebinnaba kukozesebwa. Maapu zino wammanga zisenguddwa okudda ku mpya _maps.scss:

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

Ebizimbe byo ebya Bootstrap CSS eby'enjawulo kati birina okulabika ekintu nga kino nga olina okuyingiza maapu ez'enjawulo.

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

Ebipya ebikozesebwa mu bulamu obwa bulijjo

Enkyukakyuka endala

  • Yaleese enkola empya $enable-container-classes. — Kati nga olonda mu nsengeka ya CSS Grid ey'okugezesa, .container-*kiraasi zijja kuba zikyakuŋŋaanyizibwa, okuggyako ng'enkola eno eteekeddwa ku false. Konteyina nazo kati zikuuma emiwendo gyazo egya gutter.

  • Ekitundu kya Offcanvas kati kirina enjawulo eziddamu . Ekibiina ekyasooka .offcanvaskisigala nga tekikyuse —kikweka ebirimu mu bifo byonna eby’okulaba. Okusobola okugifuula eddamu, kyusa kiraasi eyo ogive mu kiraasi .offcanvasyonna .offcanvas-{sm|md|lg|xl|xxl}.

  • Ebigabanya emmeeza ebisinga obunene kati biba bya opt-in. — Tuggyewo ensalosalo esinga obunene era enzibu okusazaamu wakati w’ebibinja by’emmeeza ne tugitambuza mu kiraasi ey’okwesalirawo gy’osobola okukozesa, .table-group-divider. Laba ebiwandiiko by'emmeeza okufuna ekyokulabirako.

  • Scrollspy ezzeemu okuwandiikibwa okukozesa Intersection Observer API , ekitegeeza nti tokyetaaga bizingirizi bya bazadde bya luganda, deprecatesoffsetconfig, n'ebirala. Noonya enkola zo eza Scrollspy okubeera entuufu era ezikwatagana mu nav highlighting yaabwe.

  • Popovers n'ebikozesebwa kati bikozesa enkyukakyuka za CSS. Enkyukakyuka ezimu eza CSS zizzeemu okulongoosebwa okuva ku bannaabwe eza Sass okukendeeza ku muwendo gw’enkyukakyuka. N’ekyavaamu, enkyukakyuka ssatu zibadde zikozesebwa mu kufulumya kuno: $popover-arrow-color, $popover-arrow-outer-color, ne $tooltip-arrow-color.

  • .text-bg-{color}Ayongeddeko abayambi abapya . Mu kifo ky'okuteekawo ssekinnoomu .text-*n'ebikozesebwa .bg-*, kati osobola okukozesa abayambi .text-bg-*okuteekawo a background-colorwith contrasting foreground color.

  • Yayongeddeko .form-check-reversemodifier okukyusa ensengeka ya labels ne checkboxes/radios ezikwatagana.

  • Yayongeddeko empagi eziriko emisono eziwagira emmeeza nga ziyita mu .table-striped-columnskiraasi empya.

Olukalala lw'enkyukakyuka mu bujjuvu, laba pulojekiti ya v5.2.0 ku GitHub .

v5.1.0

  • Yayongeddeko obuwagizi obw'okugezesa ku nteekateeka ya CSS Grid . — Guno mulimu ogugenda mu maaso, era tegunnaba kwetegeka kukozesebwa mu kukola, naye osobola okusalawo okuyingira mu nkola empya ng’oyita mu Sass. Okugisobozesa, lemesa ekisenge ekisookerwako, ng'oteekawo $enable-grid-classes: falseera osobozesa CSS Grid ng'oteekawo $enable-cssgrid: true.

  • Navbars ezitereezeddwa okuwagira offcanvas. — Okwongerako offcanvas drawers mu navbar yonna ne responsive .navbar-expand-*classes ne offcanvas markup ezimu.

  • Yayongeddeko ekitundu ekipya eky'ekifo . — Ekitundu kyaffe ekipya, engeri y’okuwa obuziyiza obw’ekiseera mu kifo ky’ebirimu ebituufu okuyamba okulaga nti ekintu ekyatikkibwa mu mukutu gwo oba app yo.

  • Collapse plugin kati ewagira okugwa okw'okwebungulula . — Yongera .collapse-horizontalku yo .collapseokugwamu mu widthkifo kya height. Weewale okuddamu okusiiga langi ku bbulawuzi ng’oteekawo min-heightoba height.

  • Yayongeddeko abayambi abapya aba stack ne vertical rule. — Okukozesa mangu eby'obugagga bya flexbox ebingi okukola amangu ensengeka ez'enjawulo n'entuumu . Londa okuva mu nsengekera za horizontal ( .hstack) ne vertical ( .vstack). Okwongerako ebigabanya ebyesimbye ebifaanagana ne <hr>elementi n'abayambi abapya.vr .

  • Yayongeddeko :rootenkyukakyuka empya eza CSS ez'ensi yonna. — Yayongeddeko enkyukakyuka za CSS empya eziwerako ku :rootddaala ery'okufuga <body>sitayiro. Ebisingawo biri mu mirimu, omuli okuyita mu bikozesebwa byaffe byonna n'ebitundu, naye kati soma enkyukakyuka za CSS mu kitundu Customize .

  • Yalongoosebwa ebikozesebwa mu langi n’emabega okukozesa enkyukakyuka za CSS, era n’eyongerako ebikozesebwa ebipya eby’obutatangaavu bw’ebiwandiiko n’obutafaanagana mu mugongo . — .text-* era .bg-*ebikozesebwa kati bizimbibwa n’enkyukakyuka za CSS rgba()n’emiwendo gya langi, ekikusobozesa okwanguyirwa okulongoosa ekintu kyonna eky’omugaso n’ebikozesebwa ebipya eby’obutafaanagana.

  • Yayongeddeko ebyokulabirako ebipya eby’ebitundutundu ebisinziira okulaga engeri y’okulongoosaamu ebitundu byaffe. — Pull ready to use customized components and other common design patterns n'ebyokulabirako byaffe ebipya ebya Snippets . Mulimu wansi , ebikka wansi , ebibinja by'olukalala , ne modals .

  • Ggyawo emisono gy’okuteeka ebifo egitakozesebwa mu popovers ne toltips kuba zino zikwatibwa Popper yekka. $tooltip-marginebadde evudde mu nkola era n’eteekebwa ku nullmu nkola.

Oyagala ebisingawo? Soma ekiwandiiko kya v5.1.0 ku blog.

Hee awo! Enkyukakyuka mu nfulumya yaffe enkulu esooka eya Bootstrap 5, v5.0.0, ziwandiikiddwa wansi. Teziraga nkyukakyuka endala eziragiddwa waggulu.

Ebisinziirwako

  • Yasuuliddwa jQuery.
  • Yalongoosebwa okuva ku Popper v1.x okudda ku Popper v2.x.
  • Yakyusa Libsass ne Dart Sass nga Sass compiler yaffe eyaweebwa Libsass yali efuuse deprecated.
  • Yasenguka okuva e Jekyll okudda e Hugo olw'okuzimba ebiwandiiko byaffe

Obuwagizi bwa Browser

  • Yasuula Internet Explorer 10 ne 11
  • Esuuliddwa Microsoft Edge < 16 (Edge ey'edda) .
  • Yasuuliddwa Firefox < 60
  • Safari eyasuuliddwa < 12
  • Yasuuliddwa iOS Safari < 12
  • Chrome eyasuuliddwa < 60

Ebiwandiiko bikyuka

  • Olupapula lw'awaka oluzzeemu okukolebwa, ensengeka y'ebiwandiiko, n'ekiwandiiko wansi.
  • Yayongeddeko ekitabo ekipya eky'Ebipapula .
  • Yayongeddeko ekitundu ekipya Customize , okudda mu kifo kya v4's Theming page , n'ebipya ebikwata ku Sass, enkola z'okusengeka ensi yonna, ensengeka za langi, enkyukakyuka za CSS, n'ebirala.
  • Yaddamu okutegeka ebiwandiiko byonna ebya foomu mu kitundu ekipya ekya Foomu , okumenyaamenya ebirimu mu mpapula ezisinga okussa essira.
  • Mu ngeri y’emu, yalongoosa ekitundu Layout , okusobola okufuula ebirimu mu grid mu ngeri entegeerekeka obulungi.
  • Omuko gw’ekitundu gwakyusibwa erinnya ne gufuuka “Navs & Tabs”.
  • Omuko gwakyusibwa erinnya ne gufuuka “Checks & radios”.
  • Yaddamu okukola navbar era ne twongerako subnav empya okusobola okwanguyiza okutambula ku mikutu gyaffe ne docs versions.
  • Yayongeddeko enkola empya eya kiiboodi ey'ekifo ky'okunoonya: Ctrl + /.

Sass nga bwe kiri

  • Tusuddewo okugatta kwa maapu kwa Sass okusookerwako okwanguyiza okuggyawo emiwendo egy'enjawulo. Kuuma mu birowoozo kati olina okunnyonnyola emiwendo gyonna mu maapu za Sass nga $theme-colors. Laba engeri gy'okola ku maapu za Sass .

  • OkumenyaOkukyusa erinnya lya color-yiq()function n'enkyukakyuka ezikwatagana ku color-contrast()nga bwe kitakyakwatagana na YIQ color space. Laba #30168.

    • $yiq-contrasted-thresholdkikyusibwa erinnya ne kifuulibwa $min-contrast-ratio.
    • $yiq-text-darkera $yiq-text-lightnga zikyusibwa amannya ne zifuuka $color-contrast-darkne $color-contrast-light.

  • OkumenyaMedia query mixins parameters zikyuse olw'enkola esingako ensonga.

    • media-breakpoint-down()ekozesa ekifo eky'okumenya kyennyini mu kifo ky'okumenya okuddako (okugeza, media-breakpoint-down(lg)mu kifo ky'ebifo eby'okulaba media-breakpoint-down(md)eby'ebigendererwa ebitono okusinga lg).
    • Mu ngeri y’emu, parameter eyokubiri mu media-breakpoint-between()era ekozesa breakpoint yennyini mu kifo ky’okumenya okuddako (okugeza, media-between(sm, lg)mu kifo ky’ebifo eby’okulaba media-breakpoint-between(sm, md)ebigendererwa wakati smne lg).

  • OkumenyaGgyawo emisono gy'okukuba ebitabo $enable-print-stylesn'enkyukakyuka. Ebisulo by’okulaga okukuba ebitabo bikyaliwo. Laba #28339 .

  • OkumenyaDepped color(), theme-color(), ne gray()functions nga ziwagira enkyukakyuka. Laba #29083 .

  • OkumenyaEnkola eyakyusibwa erinnya theme-color-level()okutuuka color-level()era kati ekkiriza langi yonna gy’oyagala mu kifo kya $theme-colorlangi zokka. Laba #29083 Weegendereze: color-level() oluvannyuma yasuulibwa mu v5.0.0-alpha3.

  • OkumenyaYakyusibwa erinnya $enable-prefers-reduced-motion-media-queryera $enable-pointer-cursor-for-buttonseri $enable-reduced-motionn’okubeera $enable-button-pointersmu bufunze.

  • OkumenyaYaggyewo ekirungo kya bg-gradient-variant()mixin. Kozesa .bg-gradientekibiina okwongera gradients ku elements mu kifo kya .bg-gradient-*classes ezikoleddwa.

  • Okumenya Ggyawo mixins ezaali zikozesebwa emabegako:

    • hover, hover-focus, plain-hover-focus, nehover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(era yasuula ekibiina ky’omugaso ekikwatagana, .text-hide)
    • visibility()
    • form-control-focus()

  • Okumenyascale-color()Omulimu gukyusiddwa erinnya shift-color()okwewala okutomeragana n'omulimu gwa Sass yennyini ogw'okugerageranya langi.

  • box-shadowmixins kati zikkiriza nullemiwendo n'okugwa noneokuva mu nsonga eziwera. Laba #30394 .

  • Mixin border-radius()kati erina omuwendo ogusookerwako.

Enkola ya langi

  • Enkola ya langi eyakola ne color-level()era $theme-color-intervaln’eggyibwawo n’ewagira enkola ya langi empya. Byonna lighten()n'emirimu darken()mu codebase yaffe bikyusibwamu tint-color()ne shade-color(). Emirimu gino gijja kutabula langi oba enjeru oba enjeru mu kifo ky’okukyusa obutangaavu bwayo ku muwendo ogugere. The shift-color()will either tint oba shade a color okusinziira ku oba weight parameter yaayo positive oba negative. Laba #30622 okumanya ebisingawo.

  • Yayongeddeko langi empya n’ebisiikirize ku buli langi, okuwa langi mwenda ez’enjawulo ku buli langi ey’omusingi, nga enkyukakyuka za Sass empya.

  • Okwawukana kwa langi okulongooseddwa. Bumped color contrast ratio okuva ku 3:1 okutuuka ku 4.5:1 ne updated langi za bbulu, green, cyan, ne pink okukakasa WCAG 2.1 AA contrast. Era yakyusa langi yaffe eya langi okuva $gray-900ku $black.

  • Okusobola okuwagira enkola yaffe eya langi, twongeddeko enkola empya tint-color()n’emirimu shade-color()okutabula langi zaffe mu ngeri esaanidde.

Ebipya ebifulumiziddwa mu giridi

  • Ekifo ekipya eky'okumenyawo! xxlYayongeddeko breakpoint empya for 1400pxand up. Tewali nkyukakyuka mu bifo ebirala byonna eby’okumenya.

  • Emifulejje egyalongooseddwa. Gutters kati ziteekebwa mu rems, era nga nfunda okusinga v4 ( 1.5rem, oba nga 24px, wansi okuva 30px). Kino kikwataganya emidumu gyaffe egya grid n’ebikozesebwa byaffe eby’okuteeka ebanga.

    • Yayongeddeko ekibiina ekipya eky’emidumu ( .g-*, .gx-*, ne .gy-*) okufuga emidumu egy’okwesimbye/ egy’okwesimbye, emifulejje egy’okwesimbye, n’emidumu egy’okwesimbye.
    • OkumenyaYakyusibwa erinnya .no-guttersokutuuka .g-0okukwatagana ne gutter utilities empya.

  • Ennyiriri tezikyakola position: relative, kale oyinza okwongera .position-relativeku bintu ebimu okuzzaawo enneeyisa eyo.

  • OkumenyaYasuula kiraasi eziwerako ezatera .order-*okugenda nga tezikozesebwa. Kati tuwaayo .order-1to .order-5out of the box yokka.

  • OkumenyaYasudde .mediaekitundu nga bwe kiyinza okwanguyirwa okukoppa n'ebikozesebwa. Laba #28265 n'olupapula lwa flex utilities okufuna ekyokulabirako .

  • Okumenya bootstrap-grid.csskati ekola box-sizing: border-boxku mpagi yokka mu kifo ky'okuddamu okuteekawo global box-sizing. Mu ngeri eno, emisono gyaffe egya grid gisobola okukozesebwa mu bifo ebisingawo awatali kutaataaganyizibwa.

  • $enable-grid-classestekyalemesa omulembe gwa kiraasi za konteyina. Laba #29146.

  • Yalongoosa make-colmixin okubeera default ku mpagi ezenkanankana awatali sayizi eragiddwa.

Ebirimu, Reboot, n’ebirala

  • RFS kati ekoleddwa nga bwe kibadde. Emitwefont-size()egy'okukozesa mixin gijja kulongoosa gyabwefont-sizeokutuuka ku minzaani n'ekifo eky'okulaba. Ekintu kino emabegako kyali kya opt-in ne v4.

  • OkumenyaYalongoosa ensengeka yaffe ey’okulaga okukyusa $display-*enkyukakyuka zaffe era ne $display-font-sizestussaako maapu ya Sass. Era yaggyawo $display-*-weightenkyukakyuka ssekinnoomu ku s emu $display-font-weightera n’atereezebwa font-size.

  • .display-*Yayongeddeko sayizi z’emitwe emipya bbiri , .display-5ne .display-6.

  • Enkolagana ziteekebwako akabonero wansi nga bwe kibadde (si ku hover yokka), okuggyako nga ziri kitundu kya bitundu ebitongole.

  • Emmeeza eziddamu okukolebwa okuzza obuggya emisono gyazo n’okuddamu okuzizimba n’enkyukakyuka za CSS okusobola okufuga ennyo sitayiro.

  • OkumenyaEmmeeza eziteekeddwa mu kisenge tezikyasikira sitayiro.

  • Okumenya .thead-lightera .thead-darkzisuulibwa nga ziwagira .table-*ebika by’enjawulo ebiyinza okukozesebwa ku bintu byonna eby’emmeeza ( thead, tbody, tfoot, tr, thne td).

  • OkumenyaMixin table-row-variant()ekyusibwa erinnya okutuuka table-variant()era ekkiriza parameters 2 zokka: $color(erinnya lya langi) ne $value(color code). Langi y’ensalosalo ne langi z’ennyiriri zibalirirwa mu ngeri ey’otoma okusinziira ku nkyukakyuka z’ensonga z’emmeeza.

  • Gabanya enkyukakyuka za padding ez'obutoffaali bw'emmeeza mu -yne -x.

  • OkumenyaYasuula .pre-scrollableekibiina. Laba #29135

  • Okumenya .text-*utilities tezikyagattako hover ne focus states ku links. .link-*ebibiina by’abayambi bisobola okukozesebwa mu kifo ky’ekyo. Laba #29267

  • OkumenyaYasuula .text-justifyekibiina. Laba #29793

  • Okumenya <hr>elements kati zikozesa heightmu kifo ky'okuwagira borderobulungi sizeattribute. Kino era kisobozesa okukozesa ebikozesebwa mu kukola padding okukola ebigabanya ebinene (okugeza, <hr class="py-1">).

  • Reset default horizontal padding-lefton <ul>ne <ol>elements okuva ku browser default 40pxokudda ku 2rem.

  • Added $enable-smooth-scroll, ekola scroll-behavior: smoothmu nsi yonna —okuggyako abakozesa okusaba okukendeeza ku ntambula nga bayita mu prefers-reduced-motionkubuuza emikutu. Laba #31877

RTL

  • Horizontal direction specific variables, utilities, ne mixins byonna bikyusiddwa amannya okukozesa eby’obugagga ebitegeerekeka nga ebyo ebisangibwa mu flexbox layouts—okugeza, startne endmu kifo kya leftne right.

Ffoomu

  • Yayongeddeko ffoomu empya ezitengejja! Tutumbula ekyokulabirako kya Floating labels ku bitundu bya ffoomu ebiwagirwa mu bujjuvu. Laba omuko omupya ogwa Floating labels.

  • Okumenya Ebintu ebigattibwa mu ffoomu enzaaliranwa n’ey’ennono. Checkboxes, radios, selects, n'ebiyingizibwa ebirala ebyalina native ne custom classes mu v4 bibadde bigatta. Kati kumpi ebintu byaffe byonna ebya ffoomu biba bya custom ddala, ebisinga tebyetaagisa HTML eya custom.

    • .custom-control.custom-checkboxkati ye .form-check.
    • .custom-control.custom-custom-radiokati ye .form-check.
    • .custom-control.custom-switchkati ye .form-check.form-switch.
    • .custom-selectkati ye .form-select.
    • .custom-fileera .form-filezikyusiddwa ne zifuulibwa emisono egy’ennono waggulu ku .form-control.
    • .custom-rangekati ye .form-range.
    • Yasuuliddwa enzaalwa .form-control-fileera .form-control-range.

  • OkumenyaYasuulibwa .input-group-appendera .input-group-prepend. Kati osobola okumala okugattako buttons era .input-group-textnga abaana obutereevu ab'ebibinja by'okuyingiza.

  • The longstanding Missing border radius on input group with validation feedback bug esembayo okutereezebwa nga kwongerako .has-validationkiraasi ey'okugatta ku bibinja by'okuyingiza ebirina okukakasa.

  • Okumenya Yasuula ebika by’ensengeka ebikwata ku ffoomu ku nkola yaffe eya grid. Kozesa grid yaffe n'ebikozesebwa mu kifo kya .form-group, .form-row, oba .form-inline.

  • OkumenyaEbiwandiiko ebiwandiikibwako foomu kati byetaaga .form-label.

  • Okumenya .form-textno longer sets display, okukusobozesa okukola mu layini oba okuziyiza ekiwandiiko ky'obuyambi nga bw'oyagala nga okyusa ekintu kya HTML kyokka.

  • Ebifuga foomu tebikyakozesebwa biteredde heightnga kisoboka, mu kifo ky’okuyimirizaawo min-heightokulongoosa okulongoosa n’okukwatagana n’ebitundu ebirala.

  • Ebifaananyi by'okukakasa tebikyakozesebwa ku <select>s ne multiple.

  • Fayiro za Sass ez'ensibuko zizzeemu okusengekebwa wansi wa scss/forms/, nga mw'otwalidde n'emisono gy'ebibinja by'okuyingiza.

Ebitundu ebikola omubiri

  • Emiwendo paddingegy’omuggundu egy’okulabula, ebikuta by’omugaati, kaadi, ebikka wansi, ebibinja by’olukalala, modals, popovers, n’ebikozesebwa okusinziira ku $spacernkyukakyuka yaffe. Laba #30564 .

Accordion

Okulabula

Baagi za Baagi

  • OkumenyaYasuula .badge-*kiraasi zonna eza langi ez'ebikozesebwa eby'emabega (okugeza, kozesa .bg-primarymu kifo kya .badge-primary).

  • OkumenyaEsuuliddwa .badge-pill—kozesa ekintu .rounded-pilleky’omugaso mu kifo ky’ekyo.

  • OkumenyaGgyawo emisono gya hover ne focus for <a>ne <button>elements.

  • Okwongera ku padding ezisookerwako ku badge okuva ku .25em/ .5emokutuuka ku .35em/ .65em.

  • Yanguyiza endabika eya bulijjo ey'ebikuta by'omugaati ng'aggyawo padding, background-color, ne border-radius.

  • Yayongeddeko ekintu ekipya eky'ennono ekya CSS --bs-breadcrumb-dividerokusobola okulongoosa okwangu nga tekyetaagisa kuddamu kukungaanya CSS.

Ebikondo ebiyitibwa Buttons

  • Okumenya Toggle buttons , nga zirina checkboxes oba radios, tezikyetaaga JavaScript era zirina markup empya. Tetukyetaaga elementi ya kuzinga, twongerako.btn-checkku<input>, ne tugigatta ne.btnkiraasi zonna ku<label>. Laba #30650 . Docs za kino zivudde ku mukutu gwaffe ogwa Buttons okudda ku kitundu ekipya ekya Forms.

  • Okumenya Yasuuliddwa .btn-blockolw’ebikozesebwa. Mu kifo ky’okukozesa .btn-blockku .btn, zingako buttons zo .d-gridne n’ekintu .gap-*ekiyamba okuziteeka mu bbanga nga bwe kyetaagisa. Kyusa ku kiraasi eziddamu okufuna obuyinza obusingako ku zo. Soma docs okufuna ebyokulabirako ebimu.

  • Updated our button-variant()ne button-outline-variant()mixins okuwagira parameters endala.

  • Butaamu ezitereezeddwa okukakasa nti enjawulo yeeyongedde ku hover ne active states.

  • Butaamu ezilema kati zirina pointer-events: none;.

Kaadi

  • OkumenyaYagwa .card-deckmu favor ya grid yaffe. Zinga kaadi zo mu bibiina by’ennyiriri era osseeko ekintu ekizadde .row-cols-*okuddamu okukola ddeeke za kaadi (naye ng’olina obuyinza obusingawo ku kulaganya okuddamu).

  • OkumenyaYasuulibwa .card-columnsng’awagira Masonry. Laba #28922 .

  • OkumenyaYakyusa .cardaccordion eyasinziira n'assaamu ekitundu kya Accordion ekipya .

  • Yayongeddeko .carousel-darkenkyukakyuka empya ey'ebiwandiiko ebiddugavu, ebifuga, n'ebiraga (kirungi nnyo ku mugongo omutangaavu).

  • Yakyusa ebifaananyi bya chevron eby'okufuga carousel ne SVG empya okuva mu Bootstrap Icons .

Ggalawo bbaatuuni

  • OkumenyaYakyusibwa erinnya .closene lifuuka .btn-closeerinnya eritali lya bulijjo nnyo.

  • Close buttons kati zikozesa a background-image(embedded SVG) mu kifo kya a &times;mu HTML, okusobozesa okulongoosa okwangu nga tekyetaagisa kukwata ku markup yo.

  • Yayongeddeko .btn-close-whiteenkyukakyuka empya ekozesa filter: invert(1)okusobozesa ebifaananyi eby’okugoba eby’enjawulo ebya waggulu ku mugongo oguddugavu.

Okuzirika

  • Ggyawo scroll anchoring ku accordions.

  • Yayongeddeko .dropdown-menu-darkenkyukakyuka empya n'enkyukakyuka ezikwatagana ku on-demand dark dropdowns.

  • Yayongeddeko enkyukakyuka empya ku $dropdown-padding-x.

  • Yazikiza ekigabanya ekigwa wansi okusobola okulongoosa enjawulo.

  • OkumenyaEbibaawo byonna eby'okugwa kati bitandika ku bbaatuuni y'okukyusa wansi n'oluvannyuma ne bifuumuulwa okutuuka ku kintu ekizadde.

  • Menyu ezikka kati zirina data-bs-popper="static"ekintu ekiteekeddwawo ng’ekifo ky’okukka wansi kiri mu kifo ekikyukakyuka, oba ekikka wansi kiri mu navbar. Kino kyongerwako JavaScript yaffe era kituyamba okukozesa emisono gy’ekifo egy’enjawulo awatali kutaataaganya Popper’s positioning.

  • OkumenyaEsuuliddwa flipenkola ya dropdown plugin nga ewagira ensengeka ya Popper enzaaliranwa. Kati osobola okulemesa enneeyisa y'okufuumuula ng'oyisa ensengekera etaliimu kintu kyonna fallbackPlacementseky'okulonda mu kukyusakyusa .

  • Menyu ezikka kati zisobola okunyigibwa n'enkola empya autoCloseokukwata enneeyisa y'okuggalawo okw'obwengula . Osobola okukozesa enkola eno okukkiriza okunyiga munda oba ebweru wa menu ekka okugifuula ey’okukwatagana.

  • Dropdowns kati ziwagira .dropdown-items ezizingiddwa mu <li>s.

Ekirungo kya Jumbotron

Olukalala lw'ekibinja

  • nullYayongeddeko enkyukakyuka empya eza font-size, font-weight, color, ne :hover colormu .nav-linkkiraasi.
  • OkumenyaNavbars kati zeetaaga ekintu ekiri munda (okusobola okwanguyiza ennyo ebyetaago by'okuteeka ebanga ne CSS eyeetaagisa).
  • OkumenyaEkibiina .activetekikyasobola kukozesebwa ku .nav-items, kiteekwa okukozesebwa butereevu ku .nav-links.

Okuva ku kanvaasi

  • Yayongeddeko ekitundu ekipya ekya offcanvas .

Okuwandiika empapula

  • Pagination links kati zirina customizable margin-leftezibeera dynamically rounded ku nsonda zonna nga zaawulwa ku ndala.

  • Yayongeddeko transitions ku nkolagana z'okukuba empapula.

Popovers eziyitibwa Popovers

  • OkumenyaYakyusibwa erinnya .arroweri .popover-arrowmu kifaananyi kyaffe ekya popover ekisookerwako.

  • Ekyokulonda ekyusiddwa whiteListerinnya ne kifuuka allowList.

Abavuzi b’ebiwujjo

  • Spinners kati bassa ekitiibwa prefers-reduced-motion: reducenga bakendeeza ku animations. Laba #31882 .

  • Okulongoosa spinner vertical alignment.

Ebiwoomerera

  • Toasts kati zisobola okuteekebwa mu a .toast-containernga oyambibwako positioning utilities .

  • Yakyusa obudde bwa toast obusookerwako okutuuka ku sikonda 5.

  • Eggyibwa overflow: hiddenmu tositi n’ekyusibwamu ne border-radiuss entuufu ng’erina calc()emirimu.

Ebikozesebwa

  • OkumenyaYakyusibwa erinnya .arroweri .tooltip-arrowmu kifaananyi kyaffe eky'okukozesa ekisookerwako.

  • OkumenyaOmuwendo ogusookerwako ogwa the fallbackPlacementsgukyusibwa okudda ku ['top', 'right', 'bottom', 'left']for better placement of popper elements.

  • OkumenyaEkyokulonda ekyusiddwa whiteListerinnya ne kifuuka allowList.

Ebikozesebwa

  • OkumenyaYakyusa amannya g'ebikozesebwa ebiwerako okukozesa amannya g'ebintu ebitegeerekeka mu kifo ky'amannya ag'obulagirizi nga kwogasse obuwagizi bwa RTL:

    • Yakyusibwa erinnya .left-*ne .right-*eri .start-*ne .end-*.
    • Yakyusibwa erinnya .float-leftne .float-righteri .float-startne .float-end.
    • Yakyusibwa erinnya .border-leftne .border-righteri .border-startne .border-end.
    • Yakyusibwa erinnya .rounded-leftne .rounded-righteri .rounded-startne .rounded-end.
    • Yakyusibwa erinnya .ml-*ne .mr-*eri .ms-*ne .me-*.
    • Yakyusibwa erinnya .pl-*ne .pr-*eri .ps-*ne .pe-*.
    • Yakyusibwa erinnya .text-leftne .text-righteri .text-startne .text-end.

  • OkumenyaEremesezza margins negativu nga bwe kibadde.

  • Yayongeddeko kiraasi empya .bg-bodyey'okuteeka amangu <body>'s background ku elementi ez'okwongerako.

  • Yayongeddeko ebikozesebwa ebipya eby'ekifo ku top, right, bottom, ne left. Emiwendo mulimu 0, 50%, ne 100%ku buli kintu.

  • Yayongeddeko ebipya .translate-middle-x& .translate-middle-yebikozesebwa ku horizontally oba vertically wakati absolute/fixed positioned elements.

  • Yayongeddeko border-widthebikozesebwa ebipya .

  • OkumenyaYakyusibwa erinnya .text-monospacen'efuulibwa .font-monospace.

  • OkumenyaEggyiddwawo .text-hidenga bweri enkola enkadde ey'okukweka ebiwandiiko ebitalina kuddamu kukozesebwa.

  • Yayongeddeko .fs-*ebikozesebwa ku font-sizebikozesebwa (nga RFS ekoleddwa). Bino bikozesa minzaani y’emu n’emitwe gya HTML egy’enjawulo (1-6, eminene okutuuka ku mitono), era gisobola okukyusibwa nga giyita ku maapu ya Sass.

  • OkumenyaEbikozesebwa bikyusiddwa amannya .font-weight-*nga .fw-*ku bufunze n’obutakyukakyuka.

  • OkumenyaEbikozesebwa bikyusiddwa amannya .font-style-*nga .fst-*ku bufunze n’obutakyukakyuka.

  • Yayongerwako .d-gridokulaga ebikozesebwa n'ebikozesebwa ebipya gap( .gap) ku CSS Grid ne flexbox layouts.

  • OkumenyaYaggyibwawo .rounded-smne rounded-lg, era n’aleeta omutendera omupya ogw’ebibiina, .rounded-0okutuuka ku .rounded-3. Laba #31687 .

  • Yayongeddeko line-heightebikozesebwa ebipya: .lh-1, .lh-sm, .lh-basene .lh-lg. Laba wano .

  • Yatambuza .d-noneutility mu CSS yaffe okugiwa obuzito obusingako ku utilities endala ez'okulaga.

  • Yagaziya .visually-hidden-focusableomuyambi okukola ne ku konteyina, ng’akozesa :focus-within.

Abayambi

  • Okumenya Abayambi b’okuyingiza abaddamu bakyusiddwa amannya ne bafuulibwa abayambi b’omugerageranyo nga balina amannya g’ekibiina amapya n’enneeyisa ezirongooseddwa, awamu n’enkyukakyuka ya CSS eyamba.

    • Ebisulo bikyusiddwa amannya okukyusibwa byokudda xmu mugerageranyo gw’ebifaananyi. Okugeza, .ratio-16by9kati ye .ratio-16x9.
    • .embed-responsive-itemTusuddewo ekisunsula ekibinja kya ne elementi nga tuwagira .ratio > *ekisunsula eky'angu. Tekyetaagisa kiraasi ndala, era omuyambi w'omugerageranyo kati akola n'ekintu kyonna ekya HTML.
    • Maapu ya $embed-responsive-aspect-ratiosSass ekyusiddwa erinnya okutuuka $aspect-ratiosera emiwendo gyayo gyanguyiziddwa okussaamu erinnya lya kiraasi n’ebitundu ku kikumi nga key: valuepair.
    • Enkyukakyuka za CSS kati zikolebwa era ne ziteekebwa ku buli muwendo mu maapu ya Sass. Kyuusa --bs-aspect-ratioenkyukakyuka ku .ratiookukola omugerageranyo gwonna ogw'ensonga ogw'ennono .

  • Okumenya Ebisulo bya “Screen reader” kati biba bibiina “ebikwekebwa mu ngeri erabika” .

    • Yakyusa fayiro ya Sass okuva scss/helpers/_screenreaders.scsskuscss/helpers/_visually-hidden.scss
    • Yakyusibwa erinnya .sr-onlyne .sr-only-focusableku .visually-hiddenne.visually-hidden-focusable
    • Yakyusibwa erinnya sr-only()ne sr-only-focusable()mixins okutuuka visually-hidden()ne visually-hidden-focusable().

  • bootstrap-utilities.csskati era mulimu n’abayambi baffe. Abayambi tebakyakwetaaga kuyingizibwa mu custom builds.

JavaScript

  • Yasuula okwesigamizibwa kwa jQuery era n'addamu okuwandiika plugins okubeera mu JavaScript eya bulijjo.

  • OkumenyaData attributes za JavaScript plugins zonna kati ziteekeddwa mu mannya okuyamba okwawula enkola ya Bootstrap okuva ku bantu ab’okusatu ne code yo. Okugeza, tukozesa data-bs-togglemu kifo kya data-toggle.

  • Plugins zonna kati zisobola okukkiriza CSS selector nga argument esooka. Osobola okuyisa ekintu kya DOM oba ekisunsula kyonna ekya CSS ekituufu okukola ekifaananyi ekipya ekya plugin:

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

  • popperConfigesobola okuyisibwa nga omulimu ogukkiriza ensengeka ya Popper eya Bootstrap eya bulijjo nga ensonga, osobole okugatta ensengeka eno esookerwako mu ngeri yo. Ekwata ku dropdowns, popovers, ne totips z'ebikozesebwa.

  • Omuwendo ogusookerwako ogwa the fallbackPlacementsgukyusibwa okudda ku ['top', 'right', 'bottom', 'left']for better placement of Popper elements. Ekwata ku dropdowns, popovers, ne totips z'ebikozesebwa.

  • Ggyawo underscore okuva mu nkola za public static nga _getInstance()→ getInstance().