Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
Check
in English

Ithuthela ku-v5

Landelela futhi ubuyekeze izinguquko kumafayela omthombo we-Bootstrap, imibhalo, nezingxenye zokukusiza usuke ku-v4 uye ku-v5.

Kuleli khasi

v5.2.0

Idizayini evuselelwe

I-Bootstrap v5.2.0 ifaka isibuyekezo sokuklama esicashile sezingxenye ezimbalwa nezici kuyo yonke iphrojekthi, ikakhulukazi border-radiusngamavelu acwengisisiwe kuzinkinobho nezilawuli zefomu . Amadokhumenti ethu nawo abuyekeziwe ngekhasi eliyisiqalo elisha, isakhiwo samadokhumenti esilula esingasagoqi izingxenye zebha eseceleni, kanye nezibonelo ezivelele Zezimpawu Ze- Bootstrap .

Okuguquguqukayo okwengeziwe kwe-CSS

Sibuyekeze zonke izingxenye zethu ukuze sisebenzise okuguquguqukayo kwe-CSS. Nakuba i-Sass isasekela yonke into, ingxenye ngayinye ibuyekeziwe ukuze ifake okuguquguqukayo kwe-CSS kumakilasi esisekelo sengxenye (isb, .btn), okuvumela ukwenziwa ngokwezifiso okwengeziwe kwesikhathi sangempela se-Bootstrap. Ekukhishweni okulandelayo, sizoqhubeka nokwandisa ukusebenzisa kwethu okuguquguqukayo kwe-CSS kusakhiwo sethu, amafomu, abasizi, nezinsiza. Funda kabanzi mayelana nokuguquguquka kwe-CSS engxenyeni ngayinye emakhasini azo emibhalo.

Ukusebenzisa kwethu okuguquguqukayo kwe-CSS kuzobe kungaphelele ngandlela thile kuze kube yi-Bootstrap 6. Nakuba singathanda ukwenza lokhu ngokugcwele ebhodini lonkana, azifaka engcupheni yokubangela izinguquko eziphukayo. Isibonelo, ukusetha $alert-border-width: var(--bs-border-width)ikhodi yethu yomthombo kwephula i-Sass engaba khona kukhodi yakho uma ubukwenza $alert-border-width * 2ngesizathu esithile.

Ngakho-ke, lapho kungenzeka khona, sizoqhubeka siphushela kokuguquguqukayo okwengeziwe kwe-CSS, kodwa sicela wazi ukuthi ukusebenzisa kwethu kungase kukhawulwe kancane ku-v5.

Okusha_maps.scss

I-Bootstrap v5.2.0 yethule ifayela elisha le-Sass nge- _maps.scss. Ikhipha amamephu ambalwa e-Sass _variables.scssukuze kulungiswe inkinga lapho izibuyekezo zemephu yoqobo zingazange zisetshenziswe kumamephu esibili azinwebayo. Isibonelo, izibuyekezo $theme-colorsbezingasetshenziswa kwamanye amamephu etimu athembele $theme-colors, ukwephula ukhiye wokugeleza komsebenzi wokwenza ngendlela oyifisayo. Ngamafuphi, i-Sass inomkhawulo lapho lapho okuguquguqukayo okuzenzakalelayo noma imephu sekusetshenzisiwe , ayikwazi ukubuyekezwa. Kukhona ukushiyeka okufanayo ngeziguquguquko ze-CSS lapho zisetshenziselwa ukuqamba ezinye izinhlobo ze-CSS.

Yingakho ukwenza ngokwezifiso okuguquguqukayo ku-Bootstrap kufanele kuze ngemva @import "functions", kodwa ngaphambi @import "variables"naso sonke isitaki sethu sokungenisa. Okufanayo kuyasebenza kumamephu e-Sass—kufanele ukhiphe okumisiwe ngaphambi kokuthi asetshenziswe. Amamephu alandelayo ayiswe kwentsha _maps.scss:

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

Ukwakhiwa kwakho kwe-Bootstrap CSS kwangokwezifiso kufanele manje kubukeke kanje ngokungeniswa kwamamephu okuhlukile.

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

Izinsiza ezintsha

Izinguquko ezengeziwe

  • $enable-container-classesSethulwe inketho entsha . — Manje uma ungena esakhiweni seGridi ye-CSS esihlolwayo, .container-*amakilasi asazohlanganiswa, ngaphandle kwalapho le nketho isethwe ukuze false. Iziqukathi nazo manje zigcina amanani azo emfucumfucu.

  • Ingxenye ye-Offcanvas manje inokuhlukahluka okusabelayo . Ikilasi langempela .offcanvaslihlala lingashintshiwe—lifihla okuqukethwe kuzo zonke izinkundla zokubuka. Ukuze ulenze liphendule, shintsha lelo .offcanvasklasi libe yiliphi .offcanvas-{sm|md|lg|xl|xxl}ikilasi.

  • Abahlukanisi bethebula eliwugqinsi manje sebekhethe ukungena. — Sisuse ugqinsi futhi okunzima kakhulu ukukhipha umngcele phakathi kwamaqembu amathebula futhi sawuhambisa ekilasini ozikhethela lona ongalisebenzisa, .table-group-divider. Bheka amadokhumenti ethebula njengesibonelo.

  • I-Scrollspy ibhalwe kabusha ukuze isebenzise i-Intersection Observer API , okusho ukuthi awusawadingi ama- wrappers ahlobene nomzali,offset, nokunye okwengeziwe. Bheka ukusetshenziswa kwakho kwe-Scrollspy ukuthi kunembe kakhudlwana futhi kungaguquki ekugqamiseni kwakho kwe-nav.

  • Ama-Popovers namathiphu amathuluzi manje asebenzisa okuguquguqukayo kwe-CSS. Okunye okuguquguqukayo kwe-CSS kubuyekeziwe kozakwabo bakwa-Sass ukuze kuncishiswe inani lezinto eziguquguqukayo. Ngenxa yalokho, okuhlukile okuthathu kuyehlisiwe kulokhu kukhishwa: $popover-arrow-color, $popover-arrow-outer-color, kanye $tooltip-arrow-color.

  • Kwengezwe .text-bg-{color}abasizi abasha. Esikhundleni sokusetha izinto ezingazodwana .text-*kanye .bg-*nezinsiza, manje ungasebenzisa abasizi.text-bg-* ukuze usethe ingaphambilibackground-color eliqhathanisayo color.

  • Kwengezwe .form-check-reverseisilungisi ukuze uguqule uhlelo lwamalebula namabhokisi okuhlola/imisakazo ehlobene.

  • Kwengezwe usekelo lwamakholomu anemigqa kumathebula ngesigaba esisha .table-striped-columns.

Ukuze uthole uhlu oluphelele lwezinguquko, bona iphrojekthi ye-v5.2.0 ku-GitHub .

v5.1.0

  • Kwengezwe usekelo lokuhlola lwesakhiwo segridi ye-CSS . — Lona umsebenzi oqhubekayo, futhi awukakalungeli ukusetshenziswa ukukhiqiza, kodwa ungangena esicini esisha nge-Sass. Ukuze uyinike amandla, khubaza igridi ezenzakalelayo, ngokusetha $enable-grid-classes: falsefuthi unike amandla Igridi ye-CSS ngokusetha $enable-cssgrid: true.

  • Ama-navbar abuyekeziwe ukuze asekele ama-offcanvas. - Faka amadrowa e-offcanvas kunoma iyiphi i-navbar enamakilasi .navbar-expand-*asabelayo kanye nemakhaphu engaphandle kwekhanvasi.

  • Kwengezwe ingxenye entsha yesimeli . — Ingxenye yethu entsha, indlela yokuhlinzeka ngamabhulokhi wesikhashana esikhundleni sokuqukethwe kwangempela ukusiza ukukhombisa ukuthi kukhona okusalayisha kusayithi noma kuhlelo lwakho lokusebenza.

  • I-plugin yokugoqa manje isekela ukugoqa okuvundlile . - Engeza .collapse-horizontalkweyakho .collapseukuze ugoqe widthesikhundleni se- height. Gwema ukupenda kabusha isiphequluli ngokusetha i- min-heightnoma height.

  • Kwengezwe izitaki ezintsha nezisizi zemithetho eqondile. - Sebenzisa ngokushesha izici eziningi ze-flexbox ukuze udale ngokushesha izakhiwo ngokwezifiso ngezitaki . Khetha kuzitaki .hstackezivundlile ( ) neziqondile ( .vstack). Engeza izihlukanisi ezime mpo ezifana <hr>nezakhi ngabasizi abasha.vr .

  • Kwengezwe :rootokuguquguqukayo okusha kwe-CSS yomhlaba wonke. - Kwengezwe okuguquguqukayo okusha kwe-CSS :rootezingeni lokulawula <body>izitayela. Okuningi kusemisebenzini, okuhlanganisa kuzo zonke izinsiza zethu nezingxenye, kodwa okwamanje funda okuguquguqukayo kwe-CSS engxenyeni ethi Yenza ngokwezifiso .

  • Umbala olungisiwe kanye nezinsiza zangemuva ukuze kusetshenziswe okuguquguqukayo kwe-CSS, futhi kwengeza ukufiphala kombhalo omusha nezinsiza zokungafihli kwengemuva . - .text-* futhi .bg-*izinsiza manje zakhiwe ngezinto eziguquguqukayo ze-CSS rgba()namanani ombala, okukuvumela ukuthi wenze ngokwezifiso noma iyiphi insiza ngezinsiza ezintsha zokungaboni.

  • Kwengezwe izibonelo zamazwibela amasha asuselwe ekuboniseni indlela yokwenza ngendlela oyifisayo izingxenye zethu. - Donsa ulungele ukusebenzisa izingxenye ezenziwe ngokwezifiso kanye namanye amaphethini edizayini avamile ngezibonelo zethu ezintsha Zamazwibela . Kufaka onyaweni , okwehliswayo , amaqembu ohlu , namamodeli .

  • Kukhishwe izitayela zokuma ezingasetshenzisiwe kuma-popover namathiphu wamathuluzi njengoba lezi ziphathwa yi-Popper kuphela. $tooltip-marginyehlisiwe futhi isethwe ukuthi nulliqhubeke.

Ufuna ulwazi olwengeziwe? Funda iposi lebhulogi le-v5.1.0.

Sawubona! Izinguquko ekukhishweni kwethu kokuqala okukhulu kwe-Bootstrap 5, v5.0.0, zibhalwe ngezansi. Azibonisi izinguquko ezengeziwe eziboniswe ngenhla.

Ukuncika

  • Kwehlisiwe i-jQuery.
  • Kuthuthukiswe kusuka ku-Popper v1.x kuya ku-Popper v2.x.
  • Kufakwe i-Libsass esikhundleni se-Dart Sass njengoba umdidiyeli wethu we-Sass onikezwe i-Libsass wehlisiwe.
  • Usuke e-Jekyll waya e-Hugo ukuze sakhe amadokhumenti ethu

Usekelo lwesiphequluli

  • Kwehliswe i-Internet Explorer 10 no-11
  • I-Microsoft Edge yehlisiwe <16 (Legacy Edge)
  • Kwehliswe iFirefox <60
  • I-Safari eyehlisiwe <12
  • Kwehliswe i-iOS Safari <12
  • Kwehliswe i-Chrome <60

Izinguquko zamadokhumenti

  • Ikhasi eliyisiqalo elidizayinwe kabusha, isakhiwo samadokhumenti, nonyaweni.
  • Kwengezwe umhlahlandlela omusha wePhasela .
  • Kwengezwe isigaba esisha sokwenza ngendlela oyifisayo , esikhundleni sekhasi le-v4 elithi Theming , ngemininingwane emisha ku-Sass, izinketho zokucushwa komhlaba wonke, izikimu zemibala, okuguquguqukayo kwe-CSS, nokuningi.
  • Kuhlelwe kabusha wonke amadokhumenti efomu esigabeni esisha samafomu , kwehlukanisa okuqukethwe kube amakhasi agxilwe kakhulu.
  • Ngokufanayo, ibuyekeze isigaba Sesakhiwo , ukuze iveze okuqukethwe kwegridi ngokucacile.
  • Kuqanjwe kabusha ikhasi lengxenye elithi "Navs" laba "I-Navs & Tabs".
  • Kuqanjwe kabusha ikhasi elithi “Amasheke” ukuze lithi “Amasheke namarediyo”.
  • Idizayine kabusha i-navbar futhi yengeza i-subnav entsha ukuze kube lula ukuthola amasayithi ethu nezinguqulo zamadokhumenti.
  • Kwengezwe isinqamuleli esisha sekhibhodi senkambu yosesho: Ctrl + /.

Sass

  • Sikuyekile ukuhlanganisa okuzenzakalelayo kwemephu ye-Sass ukuze senze kube lula ukususa amanani angafuneki. Khumbula ukuthi manje kufanele uchaze wonke amanani kumamephu we-Sass $theme-colors. Hlola ukuthi ungabhekana kanjani namamephu akwa-Sass .

  • UkuphukaUmsebenzi oqanjwe kabusha color-yiq()neziguquguqukayo ezihlobene kuye color-contrast()ngokuthi njengoba ungasahlobene nesikhala sombala we-YIQ. Bona #30168.

    • $yiq-contrasted-thresholdiqanjwe kabusha ngokuthi $min-contrast-ratio.
    • $yiq-text-darkfuthi $yiq-text-lightngokulandelana ziqanjwe kabusha ngokuthi $color-contrast-darkfuthi $color-contrast-light.

  • UkuphukaAmapharamitha wemiksi yemibuzo yemidiya ashintshile ukuze kube nendlela enengqondo.

    • media-breakpoint-down()isebenzisa i-breakpoint ngokwayo esikhundleni sephuzu lokunqamuka elilandelayo (isb, media-breakpoint-down(lg)esikhundleni sezimbobo zokubuka media-breakpoint-down(md)eziqondiwe ezincane kune- lg).
    • Ngokufanayo, ipharamitha yesibili media-breakpoint-between()nayo isebenzisa i-breakpoint ngokwayo esikhundleni se-breakpoint elandelayo (isb, media-between(sm, lg)esikhundleni sezimbobo zokubuka media-breakpoint-between(sm, md)eziqondiwe phakathi smno- lg).

  • UkuphukaKukhishwe izitayela zokuphrinta $enable-print-stylesnokuguquguquka. Amakilasi okubonisa ukuphrinta asekhona. Bona #28339 .

  • UkuphukaKwehlisiwe color(), theme-color(), kanye gray()nemisebenzi evuna okuguquguqukayo. Bona #29083 .

  • UkuphukaUmsebenzi oqanjwe kabusha theme-color-level()ukuze ube color-level()futhi manje wamukela noma yimuphi umbala owufunayo esikhundleni semibala kuphela $theme-color. Bona #29083 Qaphela: color-level() kamuva yafakwa v5.0.0-alpha3.

  • UkuphukaKuqanjwe kabusha $enable-prefers-reduced-motion-media-queryfuthi $enable-pointer-cursor-for-buttonskuya $enable-reduced-motionkanye $enable-button-pointersnobufushane.

  • UkuphukaKukhishwe bg-gradient-variant()imiksi. Sebenzisa .bg-gradientikilasi ukwengeza ama-gradient kuma-elementi esikhundleni .bg-gradient-*samakilasi akhiqiziwe.

  • Ukuphuka Kukhishwe imiksi ehoxisiwe ngaphambilini:

    • hover, hover-focus, plain-hover-focus, futhihover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(iphinde yehlisa isigaba sosizo esihlobene, .text-hide)
    • visibility()
    • form-control-focus()

  • Ukuphukascale-color()Umsebenzi oqanjwe kabusha shift-color()ukuze ugweme ukungqubuzana nomsebenzi we-Sass wokukala umbala.

  • box-shadowimiksi manje ivumela nullamanani futhi yehle noneukusuka kuma-agumenti amaningi. Bona #30394 .

  • I- border-radius()mixin manje inenani elizenzakalelayo.

Isistimu yombala

  • Isistimu yombala ebisebenza nayo color-level()futhi $theme-color-intervalyasuswa yavuna isistimu yombala entsha. Konke lighten()kanye darken()nemisebenzi ku-codebase yethu ithathelwa indawo tint-color()futhi shade-color(). Le misebenzi izohlanganisa umbala nomhlophe noma omnyama esikhundleni sokushintsha ukukhanya kwawo ngenani elinqunyiwe. Intando shift-color()ingashintsha noma ithulule umbala kuye ngokuthi ipharamitha yesisindo iphozithivu noma inegethivu. Bona #30622 ukuze uthole imininingwane eyengeziwe.

  • Kwengezwe ama-tinti amasha namathunzi awo wonke umbala, kuhlinzeka ngemibala eyisishiyagalolunye ehlukene yombala ngamunye wesisekelo, njengokuhlukahluka okusha kwe-Sass.

  • Ukugqama kombala okuthuthukisiwe. Isilinganiso sokungafani sombala obhampane sisuka ku-3:1 siye ku-4.5:1 nemibala ebuyekeziwe eluhlaza okwesibhakabhaka, eluhlaza, e-cyan, nepinki ukuze kuqinisekiswe ukugqama kwe-WCAG 2.1 AA. Futhi kushintshe umbala wethu wokugqama kombala ukusuka $gray-900ku- $black.

  • Ukuze sisekele isistimu yethu yombala, sengeze inkambiso entsha tint-color()nemisebenzi shade-color()ukuze sixube imibala yethu ngokufanele.

Izibuyekezo zegridi

  • I-breakpoint entsha! Kwengezwe i- xxlbreakpoint entsha 1400pxnaphezulu. Azikho izinguquko kuwo wonke amanye ama-breakpoint.

  • Ama-gutters athuthukisiwe. Ama-gutters manje asethwe njenge-rems, futhi mancane kune-v4 ( 1.5rem, noma cishe 24px, phansi ukusuka 30px). Lokhu kuqondanisa ama-gutters wesistimu yethu yegridi nezinsiza zethu zokubeka izikhala.

    • Kwengezwe isigaba esisha se-gutter ( .g-*, .gx-*, kanye .gy-*) ukuze kulawulwe ama-gutters avundlile/ame mpo, ama-gutter avundlile, nama-gutters aqondile.
    • UkuphukaIqanjwe kabusha .no-guttersukuze .g-0ifane nezinsiza ezintsha ze-gutter.

  • Amakholomu awasasebenzi position: relative, ngakho-ke kungase kudingeke wengeze .position-relativekwezinye izici ukuze ubuyisele lokho kuziphatha.

  • UkuphukaKwehliswe amakilasi ambalwa .order-*avame ukungasetshenziswa. Manje sihlinzeka kuphela .order-1ngaphandle .order-5kwebhokisi.

  • UkuphukaIlahle .mediaingxenye njengoba ingaphindaphindwa kalula nezinsiza. Bona i-#28265 kanye nekhasi lezinsiza eziguqukayo njengesibonelo .

  • Ukuphuka bootstrap-grid.cssmanje kusebenza kuphela box-sizing: border-boxkukholomu esikhundleni sokusetha kabusha usayizi webhokisi womhlaba. Ngale ndlela, izitayela zethu zegridi zingasetshenziswa ezindaweni eziningi ngaphandle kokuphazamiseka.

  • $enable-grid-classesayisakukhubazi ukukhiqizwa kwamakilasi esiqukathi. Bona #29146.

  • Kubuyekezwe i- make-colmixin yaba okumisiwe yaba amakholomu alinganayo ngaphandle kosayizi othile.

Okuqukethwe, Qalisa kabusha, njll

  • I- RFS manje isinikwe amandla ngokuzenzakalela. Izihloko ezisebenzisa i-font-size()mixin zizozilungisa ngokuzenzakalelafont-sizeukuze zilingane nembobo yokubuka. Lesi sici ngaphambilini besikhethe ukungena nge-v4.

  • UkuphukaKulungiswe kabusha ukuthayipha kwethu kwesibonisi ukuze kumiselele $display-*okuguquguqukayo kanye $display-font-sizesnemephu ye-Sass. Kukhishwe futhi okuguquguqukayo ngakunye $display-*-weightkwe-s eyodwa $display-font-weightfuthi elungisiwe font-size.

  • Kwengezwe .display-*osayizi ababili bezihloko ezintsha, .display-5kanye .display-6.

  • Izixhumanisi zidwetshelwe ngokuzenzakalelayo (hhayi nje phezulu), ngaphandle uma ziyingxenye yezingxenye ezithile.

  • Amathebula adizayinwe kabusha ukuze avuselele izitayela zawo futhi azakhe kabusha ngezinto eziguquguqukayo ze-CSS ukuze uthole ukulawula okwengeziwe kwesitayela.

  • UkuphukaAmathebula afakwe esidlekeni awasakwazi ifa lezitayela.

  • Ukuphuka .thead-lightfuthi .thead-darkziyehliswa zivuna .table-*amakilasi ahlukile angasetshenziselwa zonke izici zethebula ( thead, tbody, tfoot, tr, thkanye td).

  • UkuphukaI- table-row-variant()mixin iqanjwe kabusha table-variant()futhi yamukela amapharamitha angu-2 kuphela: $color(igama lombala) kanye $value(ikhodi yombala). Umbala womngcele nemibala ye-accent ibalwa ngokuzenzakalelayo ngokusekelwe ezintweni eziguquguqukayo zethebula.

  • Hlukanisa okuguquguqukayo kwe-padding cell yethebula phakathi -ykanye -x.

  • Ukuphuka.pre-scrollableIkilasi lehlile . Bona #29135

  • Ukuphuka .text-*izinsiza azisangezi izindawo ezihamba phambili nezigxilisa izixhumanisi kuzixhumanisi. .link-*amakilasi omsizi angasetshenziswa esikhundleni salokho. Bona #29267

  • Ukuphuka.text-justifyIkilasi lehlile . Bona #29793

  • Ukuphuka <hr>ama- elementi manje asetshenziswa heightesikhundleni bordersokusekela kangcono sizeisibaluli. Lokhu futhi kuvumela ukusetshenziswa kwezinsiza zokunamathisela ukuze kwakhiwe izihlukanisi eziwugqinsi (isb, <hr class="py-1">).

  • Setha kabusha okuzenzakalelayo okuvundlile kanye padding-leftnezinto ukusuka kokumisiwe kwesiphequluli kuye ku- .<ul><ol>40px2rem

  • Kwengezwe $enable-smooth-scroll, okusebenza scroll-behavior: smoothemhlabeni jikelele—ngaphandle kwabasebenzisi abacela ukunyakaza okuncishisiwe prefers-reduced-motionngombuzo wemidiya. Bona #31877

I-RTL

  • Okuguquguqukayo okuqondile kokuqondisa okuvundlile, izinsiza, nezixube konke kuqanjwe kabusha ukuze kusetshenziswe izici ezinengqondo ezifana nalezo ezitholakala ekuhlelweni kwe-flexbox—isb, startfuthi endesikhundleni sika leftkanye right.

Amafomu

  • Kwengezwe amafomu amasha antantayo! Siphromothe isibonelo samalebula antantayo ezingxenyeni zefomu ezisekelwa ngokugcwele. Bona ikhasi lamalebula antantayo amasha.

  • Ukuphuka Izinto ezihlanganisiwe zomdabu kanye nefomu langokwezifiso. Amabhokisi okuhlola, amarediyo, okukhethiwe, nokunye okokufaka okunezigaba zomdabu nezezifiso ku-v4 kuhlanganisiwe. Manje cishe zonke izici zethu zefomu zingokwezifiso ngokuphelele, eziningi ngaphandle kwesidingo se-HTML yangokwezifiso.

    • .custom-control.custom-checkboxmanje .form-check.
    • .custom-control.custom-custom-radiomanje .form-check.
    • .custom-control.custom-switchmanje .form-check.form-switch.
    • .custom-selectmanje .form-select.
    • .custom-filefuthi .form-filezithathelwe indawo izitayela zangokwezifiso ngaphezulu kwe .form-control.
    • .custom-rangemanje .form-range.
    • Kulahlwe okomdabu .form-control-filefuthi .form-control-range.

  • UkuphukaYehla .input-group-appendfuthi .input-group-prepend. Manje usungakwazi ukwengeza izinkinobho futhi .input-group-textnjengabantwana abaqondile bamaqembu okokufaka.

  • Irediyasi yomngcele Omude Ongekho eqenjini lokokufaka elinesiphazamisi sempendulo yokuqinisekisa ekugcineni ilungisiwe ngokwengeza .has-validationisigaba esingeziwe emaqenjini okokufaka anokuqinisekisa.

  • Ukuphuka Kwehlisiwe amakilasi esakhiwo esiqondene nefomu yesistimu yethu yegridi. Sebenzisa igridi yethu nezinsiza esikhundleni se- .form-group, .form-row, noma .form-inline.

  • UkuphukaAmalebula efomu manje adinga .form-label.

  • Ukuphuka .form-textayisekho amasethi display, okukuvumela ukuthi udale umbhalo wosizo ongaphakathi kulayini noma uvimbele ngendlela ofisa ngayo ngokushintsha isici se-HTML.

  • Izilawuli zefomu azisasetshenziswa zilungisiwe heightuma kungenzeka, kunalokho zihlehlisela min-heightekuthuthukiseni ukwenza ngendlela oyifisayo nokuhambisana nezinye izingxenye.

  • Izithonjana zokuqinisekisa azisasetshenziswa ku- <select>s nge- multiple.

  • Umthombo ohlelwe kabusha amafayela we-Sass ngaphansi kokuthi scss/forms/, okuhlanganisa izitayela zeqembu lokufaka.

Izingxenye

  • Amanani ahlanganisiwe ezexwayiso padding, imvuthuluka yesinkwa, amakhadi, okwehliswayo, amaqembu ohlu, amamodeli, ama-popover, namathiphu amathuluzi azosekelwe $spacerkokuhlukahluka kwethu. Bona #30564 .

I-Accordion

Izexwayiso

  • Izexwayiso manje zinezibonelo ezinezithonjana .

  • Kukhishwe izitayela zangokwezifiso ze- <hr>s kusaziso ngasinye njengoba vele zisebenzisa currentColor.

Amabheji

  • UkuphukaIlahle wonke .badge-*amakilasi ombala wezinsiza zangemuva (isb, sebenzisa .bg-primaryesikhundleni se- .badge-primary).

  • UkuphukaIlahliwe .badge-pill- sebenzisa .rounded-pillinsiza esikhundleni.

  • UkuphukaKukhishwe izitayela zokuhambisa phezulu nokugxilisa kuzo <a>kanye nama - <button>elementi.

  • Ukukhushulwa okunamathiselwe okuzenzakalelayo kwamabheji ukusuka ku .25em/ .5emukuya .35em/ .65em.

  • Ukubukeka okuzenzakalelayo kwe-breadcrumbs kwenziwe kwaba lula ngokususa padding, background-color, kanye border-radius.

  • Kwengezwe indawo entsha yangokwezifiso ye-CSS --bs-breadcrumb-dividerukuze wenze ngokwezifiso kalula ngaphandle kokudinga ukuphinda kuhlanganiswe i-CSS.

Izinkinobho

  • Ukuphuka Izinkinobho zokuguqula , ezinamabhokisi okuhlola noma imisakazo, azisadingi i-JavaScript futhi zinemakhaphu entsha. Asisayidingi into yokugoqa, engeza.btn-checkku-<input>, bese uyibhangqa nanoma imaphi.btnamakilasi ku-<label>. Bona #30650 . Amadokhumenti alokhu asukile ekhasini lethu elithi Izinkinobho aya esigabeni esisha samafomu.

  • Ukuphuka Kwehliselwe .btn-blockizinsiza. Esikhundleni sokusebenzisa .btn-blockku- .btn, bopha izinkinobho zakho .d-gridkanye .gap-*nesisetshenziswa ukuze uzibeke lapho kudingeka. Shintshela kumakilasi aphendulayo ukuze uthole ukulawula okwengeziwe phezu kwawo. Funda amadokhumenti ukuze uthole izibonelo ezithile.

  • Kubuyekezwe yethu button-variant()kanye button-outline-variant()namamiksi ukuze kusekelwe amapharamitha angeziwe.

  • Izinkinobho ezibuyekeziwe ukuze kuqinisekiswe ukuhluka okukhulayo kuzimo ezihamba phambili nezisebenzayo.

  • Izinkinobho ezikhutshaziwe manje zine- pointer-events: none;.

Ikhadi

  • UkuphukaYehlisiwe ngokuvuna .card-deckigridi yethu. Goqa amakhadi akho ngamakholomu amakilasi bese wengeza .row-cols-*isiqukathi esingumzali ukuze udale kabusha amadekhi amakhadi (kodwa ngokulawula okwengeziwe ekuqondaneni okuphendulayo).

  • UkuphukaYehla .card-columnsngokuthanda iMasonry. Bona #28922 .

  • UkuphukaEsikhundleni se- .cardaccordion esekelwe kufakwa ingxenye entsha ye-Accordion .

  • Kwengezwe .carousel-darkokuhlukile okusha kombhalo omnyama, izilawuli, nezinkomba (ezinhle ngengemuva elilula).

  • Kushintshwe izithonjana ze-chevron zokulawula i-carousel ngama-SVG amasha avela ku- Icons ze-Bootstrap .

Vala inkinobho

  • UkuphukaIqanjwe kabusha .closekwaba .btn-closeyigama elincane elijwayelekile.

  • Izinkinobho zokuvala manje zisebenzisa background-image(i-SVG eshumekiwe) esikhundleni se-a &times;ku-HTML, okuvumela ukwenza ngokwezifiso kube lula ngaphandle kwesidingo sokuthinta umaki wakho.

  • Kwengezwe .btn-close-whiteokuhlukile okusha okusebenzisa filter: invert(1)ukunika amandla ukugqama okuphezulu kokucashisa izithonjana ngokumelene nengemuva elimnyama.

Goqa

  • Kukhishwe i-anchoring yomqulu wama-accordion.

  • Kwengezwe .dropdown-menu-darkokuhlukile okusha nokuhambisanayo kokudonsela phansi okumnyama okudingekayo.

  • Kwengezwe okuhlukile okusha kwe- $dropdown-padding-x.

  • Kwenze kube mnyama isihlukanisi sokwehlisa ukuze kuthuthukiswe ukugqama.

  • UkuphukaYonke imicimbi yokwehliswayo manje icushwa enkinobho yokuguqula eyehlayo bese ifakwe ibhamuza kusici esingumzali.

  • Amamenyu okwehlayo manje anesethi yesibaluli data-bs-popper="static"lapho ukuma kokwehlayo kumile, noma okwehliswayo kuku-navbar. Lokhu kwengezwa i-JavaScript yethu futhi kusisiza ukuthi sisebenzise izitayela zokuma ngokwezifiso ngaphandle kokuphazamisa ukuma kukaPopper.

  • UkuphukaInketho eyehlisiwe flipye-plugin eyehlayo ivuna ukulungiselelwa kwe-Popper yomdabu. Manje usungakwazi ukukhubaza ukuziphatha ngokuphephula uhlu olungenalutho lwenketho fallbackPlacementsku- flip modifier.

  • Amamenyu okudonsela phansi manje angachofozeka autoClosengenketho entsha yokusingatha ukuziphatha kokuvala ngokuzenzakalela . Ungasebenzisa le nketho ukuze wamukele ukuchofoza ngaphakathi noma ngaphandle kwemenyu yokudonsela phansi ukuze uyenze isebenze.

  • Okwehliswayo manje kusekela .dropdown-items esongwe ngo- <li>s.

I-Jumbotron

Iqembu lohlu

  • Kwengezwe nullokuguquguqukayo okusha kwe- font-size, font-weight, color, kanye :hover colorneklasi .nav-link.
  • UkuphukaAma-Navbar manje adinga isiqukathi ngaphakathi (ukwenza kube lula kakhulu izidingo zesikhala kanye ne-CSS edingekayo).
  • UkuphukaIkilasi .activengeke lisasetshenziswa ku- .nav-items, kufanele lisetshenziswe ngokuqondile ku- .nav-links.

I-offcanvas

Amakhasi

  • Izixhumanisi zamaphegi manje seziyakwazi ukwenziwa ngendlela oyifisayo margin-lefteziyindilinga kuwo wonke amakhona uma zihlukaniswa enye kwenye.

  • Kwengezwe transitionizixhumanisi zamakhasi.

Ama-Popovers

  • UkuphukaIqanjwe kabusha .arrowkusifanekiso .popover-arrowsethu esizenzakalelayo se-popover.

  • whiteListInketho eqanjwe kabusha kokuthi allowList.

Amaspinner

  • Izipina manje ziyahlonishwa prefers-reduced-motion: reducengokunciphisa ukugqwayiza. Bona #31882 .

  • Ukuqondanisa okuqondile kwesipina okuthuthukisiwe.

Amathosti

  • Amathosti manje angabekwa endaweni.toast-container ngosizo lokubeka izinsiza .

  • Kushintshwe ubude be-toast obuzenzakalelayo baba amasekhondi angu-5.

  • Ikhishwe overflow: hiddenkuma-toasts futhi kwafakwa u- border-radiuss ofanele calc()ngemisebenzi.

Amathuluzi

  • UkuphukaIqanjwe kabusha .arrowkuthempulethi .tooltip-arrowyethu yamathuluzi ezenzakalelayo.

  • UkuphukaInani elizenzakalelayo le- the fallbackPlacementslishintshelwa ['top', 'right', 'bottom', 'left']ekubekweni okungcono kwama-elementi e-popper.

  • UkuphukawhiteListInketho eqanjwe kabusha kokuthi allowList.

Izinsiza

  • UkuphukaKuqanjwe kabusha izinsiza ezimbalwa ukuze kusetshenziswe amagama ezakhiwo ezinengqondo esikhundleni samagama ezinkomba ngokungezwa kosekelo lwe-RTL:

    • Kuqanjwe kabusha .left-*futhi .right-*kuya .start-*futhi .end-*.
    • Kuqanjwe kabusha .float-leftfuthi .float-rightkuya .float-startfuthi .float-end.
    • Kuqanjwe kabusha .border-leftfuthi .border-rightkuya .border-startfuthi .border-end.
    • Kuqanjwe kabusha .rounded-leftfuthi .rounded-rightkuya .rounded-startfuthi .rounded-end.
    • Kuqanjwe kabusha .ml-*futhi .mr-*kuya .ms-*futhi .me-*.
    • Kuqanjwe kabusha .pl-*futhi .pr-*kuya .ps-*futhi .pe-*.
    • Kuqanjwe kabusha .text-leftfuthi .text-rightkuya .text-startfuthi .text-end.

  • UkuphukaAmamajini anegethivu akhutshaziwe ngokuzenzakalela.

  • Kwengezwe .bg-bodyikilasi elisha lokusetha ngokushesha <body>ingemuva lezinto ezengeziwe.

  • Kwengezwe izinsiza zokuma ezintsha ze- top, right, bottom, kanye left. Amanani afaka 0, 50%, kanye 100%nesakhiwo ngasinye.

  • Kwengezwe izinsiza ezintsha maphakathi .translate-middle-xnendawo .translate-middle-yevundlile noma eqondile yezinto ezimile ngokuphelele/ezimile.

  • Kwengezwe border-widthizinsiza ezintsha .

  • UkuphukaIqanjwe kabusha .text-monospacekwaba .font-monospace.

  • UkuphukaKususiwe .text-hidenjengoba kuyindlela yakudala yokufihla umbhalo okungasafanele kusetshenziswe.

  • .fs-*Izinsiza ezingeziwe zezinsiza font-size(ezinikwe amandla i-RFS). Lezi zisebenzisa isikali esifanayo njengezihloko ezizenzakalelayo ze-HTML (1-6, ezinkulu kuye kwezincane), futhi zingashintshwa ngemephu ye-Sass.

  • Ukuphuka.font-weight-*Izinsiza eziqanjwe kabusha njengobufushane .fw-*nokuvumelana.

  • Ukuphuka.font-style-*Izinsiza eziqanjwe kabusha njengobufushane .fst-*nokuvumelana.

  • Kwengezwe .d-gridekuboniseni izinsiza nezinsiza ezintsha gap( .gap) ze-CSS Grid nezakhiwo ze-flexbox.

  • UkuphukaIkhishiwe .rounded-smfuthi rounded-lg, futhi yethula isikali esisha samakilasi, .rounded-0ukuze .rounded-3. Bona #31687 .

  • Kwengezwe line-heightizinsiza ezintsha: .lh-1, .lh-sm, .lh-basekanye .lh-lg. Bheka lapha .

  • Ihambise .d-noneinsiza ku-CSS yethu ukuyinika isisindo esengeziwe kunezinye izinsiza zokubonisa.

  • Welula .visually-hidden-focusableumsizi ukuthi asebenze nasezitsheni, esebenzisa :focus-within.

Abasizi

  • Ukuphuka Abasizi bokushumeka abaphendulayo baqanjwe kabusha ukuze balinganise abasizi ngamagama amasha ekilasi nokuziphatha okuthuthukisiwe, kanye nokuhluka okuwusizo kwe-CSS.

    • Amakilasi aqanjwe kabusha ukuze ashintshele byku x-aspect ratio. Ngokwesibonelo, .ratio-16by9manje .ratio-16x9.
    • Silahle .embed-responsive-itemisikhethi seqembu kanye nesici ukuze sivune isikhethi esilula .ratio > *. Asisekho isigaba esidingekayo, futhi umsizi wesilinganiso manje usebenza nanoma iyiphi into ye-HTML.
    • Imephu ye- $embed-responsive-aspect-ratiosSass iqanjwe kabusha yaba $aspect-ratiosfuthi amanani ayo enziwe lula ukuze afake igama lekilasi kanye nephesenti njengokupheya key: value.
    • Okuguquguqukayo kwe-CSS manje sekwenziwe futhi kufakwe ivelu ngalinye kumephu ye-Sass. Shintsha --bs-aspect-ratiookuguquguqukayo kokuthi .ratioudale noma yikuphi ukubukeka kwesilinganiso ngokwezifiso .

  • Ukuphuka Amakilasi "okufunda isikrini" manje asengamakilasi "afihliwe ngokubonakalayo" .

    • Kushintshwe ifayela le-Sass ukusuka scss/helpers/_screenreaders.scsskokuthiscss/helpers/_visually-hidden.scss
    • Iqanjwe kabusha .sr-onlyfuthi .sr-only-focusablekuya .visually-hiddenfuthi.visually-hidden-focusable
    • Kuqanjwe kabusha sr-only()futhi sr-only-focusable()kuxutshwe ukuze visually-hidden()futhi visually-hidden-focusable().

  • bootstrap-utilities.cssmanje kuhlanganisa nabasizi bethu. Abasizi abasadingi ukungeniswa ngezakhiwo ezenziwe ngokwezifiso.

I-JavaScript

  • Kwehlisiwe ukuncika kwe-jQuery futhi kwabhalwa kabusha ama-plugin ukuze abe ku-JavaScript evamile.

  • UkuphukaIzibaluli zedatha zawo wonke ama-plugin e-JavaScript manje sezifakwe amagama ukuze zisize ukuhlukanisa ukusebenza kwe-Bootstrap kubantu besithathu kanye nekhodi yakho. Isibonelo, sisebenzisa data-bs-toggleesikhundleni se- data-toggle.

  • Wonke ama-plugin manje angamukela isikhethi se-CSS njengengxabano yokuqala. Ungakwazi ukudlulisa isici se-DOM noma noma yisiphi isikhethi esivumelekile se-CSS ukuze udale isibonelo esisha se-plugin:

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

  • popperConfigingadluliswa njengomsebenzi owamukela ukucushwa okuzenzakalelayo kwe-Bootstrap kwe-Popper njengengxabano, ukuze ukwazi ukuhlanganisa lokhu kumisa okuzenzakalelayo endleleni yakho. Isebenza kokwehliswayo, ama-popvers, namathiphu wamathuluzi.

  • Inani elizenzakalelayo le- the fallbackPlacementslishintshelwa ['top', 'right', 'bottom', 'left']ekubekweni okungcono kwama-elementi e-Popper. Isebenza kokwehliswayo, ama-popvers, namathiphu wamathuluzi.

  • Kukhishwe i-underscore ezindleleni ezimile zomphakathi ezifana ne- _getInstance()→ getInstance().