Üleminek versioonile 5

v5.2.0

Värskendatud disain

Bootstrap v5.2.0 sisaldab peent disainivärskendust käputäie komponentide ja atribuutide jaoks kogu projekti ulatuses, eelkõige border-radiusnuppude ja vormi juhtelementide täpsustatud väärtuste kaudu . Meie dokumentatsiooni on värskendatud ka uue kodulehe, lihtsama dokumentide paigutuse, mis ei ahenda enam külgriba sektsioone, ja Bootstrapi ikoonide silmapaistvamate näidetega .

Rohkem CSS-i muutujaid

Värskendasime kõiki oma komponente, et kasutada CSS-i muutujaid. Kuigi Sass toetab endiselt kõike, on iga komponenti värskendatud, et lisada CSS-i muutujad komponentide baasklassidesse (nt .btn), mis võimaldab Bootstrapi reaalajas rohkem kohandada. Järgmistes väljaannetes jätkame CSS-i muutujate kasutuse laiendamist oma paigutuses, vormides, abistajates ja utiliitides. Lisateavet iga komponendi CSS-i muutujate kohta leiate nende vastavatelt dokumentatsioonilehtedelt.

Meie CSS-i muutujate kasutamine on kuni versioonini Bootstrap 6 mõnevõrra puudulik. Kuigi me sooviksime neid täielikult rakendada, on oht, et need põhjustavad muudatusi. Näiteks $alert-border-width: var(--bs-border-width)meie lähtekoodi sisestamine katkestab potentsiaalse Sassi teie enda koodis, kui te seda $alert-border-width * 2mingil põhjusel tegite.

Seetõttu jätkame võimaluse korral rohkemate CSS-muutujate kasutamist, kuid pidage meeles, et meie rakendamine võib versioonis 5 olla pisut piiratud.

Uus_maps.scss

Bootstrap v5.2.0 tutvustas uut Sassi faili koos _maps.scss. See tõmbab välja mitu Sassi kaarti, _variables.scsset lahendada probleem, mille korral algse kaardi värskendusi ei rakendatud neid laiendavatele teisestele kaartidele. Näiteks saidi värskendusi $theme-colorsei rakendatud teistele teemakaartidele, mis põhinesid $theme-colors, rikkudes peamisi kohandamise töövooge. Lühidalt öeldes on Sassil piirang, et kui vaikemuutujat või kaarti on kasutatud , ei saa seda värskendada. Sarnane puudus on ka CSS-i muutujatel, kui neid kasutatakse muude CSS-muutujate koostamiseks.

Seetõttu peavad muutujate kohandused Bootstrapis tulema pärast @import "functions", kuid enne @import "variables"ja ülejäänud meie impordivirnu. Sama kehtib ka Sassi kaartide kohta – enne nende kasutamist peate vaikeseaded alistama. Järgmised kaardid on teisaldatud uuele kaardile _maps.scss:

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

Teie kohandatud Bootstrap CSS-i järgud peaksid nüüd eraldi kaartide importimisel välja nägema umbes sellised.

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

Uued kommunaalteenused

• Laiendatud font-weightutiliidid.fw-semibold poolpaksude fontide jaoks .
• Laiendatud border-radiusutiliidid , et lisada kaks uut suurust .rounded-4ja .rounded-5rohkemate valikute jaoks.

Täiendavad muudatused

• Tutvustatakse uut $enable-container-classesvõimalust. — Nüüd, kui valite eksperimentaalse CSS-ruudustiku paigutuse, .container-*kompileeritakse endiselt klassid, välja arvatud juhul, kui see suvand on seatud väärtusele false. Ka konteinerid säilitavad nüüd oma renni väärtused.

• Offcanvase komponendil on nüüd tundlikud variatsioonid . Algne .offcanvasklass jääb muutumatuks – see peidab sisu kõigis vaateportides. Selle tundlikuks muutmiseks muutke see .offcanvasklass mis tahes .offcanvas-{sm|md|lg|xl|xxl}klassiks.

• Paksemad lauajagajad on nüüd saadaval. — Eemaldasime tabelirühmade vahelise paksema ja raskemini alistatava piiri ning teisaldasime selle valikulisse klassi, mida saate rakendada, .table-group-divider. Vaata näidet tabelidokumentidest.

• Scrollspy on ümber kirjutatud , et kasutada Intersection Observer API-t , mis tähendab, et te ei vaja enam suhtelisi ülemmähiseid, aegunudoffsetkonfiguratsiooni ja palju muud. Otsige, kas teie Scrollspy rakendused oleksid navigeerimisel täpsemad ja järjepidevamad.

• Hüpikaknad ja kohtspikrid kasutavad nüüd CSS-i muutujaid. Mõnda CSS-i muutujat on nende Sassi analoogidest värskendatud, et vähendada muutujate arvu. Selle tulemusena on selles versioonis kolm muutujat aegunud: $popover-arrow-color, $popover-arrow-outer-color, ja $tooltip-arrow-color.

• Lisatud uusi .text-bg-{color}abilisi. .text-*Individuaalsete ja utiliitide määramise asemel .bg-*saate nüüd abimeeste abil määrata kontrastse.text-bg-*background-color esiplaaniga color.

• Lisatud .form-check-reversemodifikaator siltide ja seotud märkeruutude/raadiode järjekorra muutmiseks.

• Uue klassi kaudu on tabelitele lisatud triibuliste veergude tugi..table-striped-columns

Muudatuste täieliku loendi leiate GitHubi projektist v5.2.0 .

v5.1.0

• Lisatud eksperimentaalne tugi CSS-ruudustiku paigutusele . — See on pooleliolev töö ja pole veel tootmiseks kasutamiseks valmis, kuid saate Sassi kaudu uue funktsiooni lubada. Selle lubamiseks keelake vaikeruudustik, määrates $enable-grid-classes: falseja lubage CSS-võrk, määrates $enable-cssgrid: true.

• Värskendatud navigeerimisribasid, et toetada väljaspool lõuendit. — Lisage mis tahes navigeerimisribale lõuendivälised sahtlid koos tundlike .navbar-expand-*klasside ja mõne offcanvas-märgistusega.

• Lisatud uus kohatäite komponent . — Meie uusim komponent, viis, kuidas pakkuda tegeliku sisu asemel ajutisi blokeeringuid, mis aitavad näidata, et teie saidil või rakenduses midagi ikka laaditakse.

• Ahendamise pistikprogramm toetab nüüd horisontaalset ahendamist . — lisage .collapse-horizontaloma , .collapseet ahendada width. heightVältige brauseri ümbervärvimist, määrates a min-heightvõi height.

• Lisatud uued virna ja vertikaalreeglite abilised. — Rakendage kiiresti mitut flexboxi atribuuti, et luua kiiresti virnadega kohandatud paigutusi . Valige horisontaalsete ( .hstack) ja vertikaalsete ( .vstack) virnade hulgast. Lisage uute abimeestega<hr> elementidele sarnased vertikaalsed jaoturid ..vr

• Lisatud uued globaalsed :rootCSS-muutujad. — Lisatud stiilide :rootjuhtimise tasemele mitu uut CSS-i muutujat . <body>Töös on rohkem, sealhulgas meie utiliitides ja komponentides, kuid praegu lugege CSS-i muutujaid jaotises Kohandamine .

• Uuendati värvi- ja taustautiliite, et kasutada CSS-i muutujaid, ning lisati uued teksti läbipaistmatuse ja tausta läbipaistmatuse utiliidid. — .text-* ja .bg-*utiliidid on nüüd ehitatud CSS-i muutujate ja rgba()värviväärtustega, mis võimaldab teil hõlpsasti kohandada mis tahes utiliiti uute läbipaistmatuse utiliitidega.

• Lisatud on uued katkendite näited, mis näitavad, kuidas meie komponente kohandada. — Kasutage kohandatud komponente ja muid levinud kujundusmustreid meie uute Snippetsi näidetega . Sisaldab jaluseid , rippmenüüd , loendirühmi ja modaale .

• Hüpikakendest ja tööriistavihjetest eemaldati kasutamata positsioneerimisstiilid, kuna nendega tegeleb ainult Popper. $tooltip-marginon aegunud ja seadistatud nullprotsessis.

Kas soovite rohkem teavet? Lugege v5.1.0 ajaveebi postitust.

Sõltuvused

• jQuery tühistati.
• Popper v1.x uuendatud versioonile Popper v2.x.
• Asendasime Libsassi Dart Sassiga, kuna meie Libsassi Sassi kompilaator oli aegunud.
• Migreeriti Jekyllist meie dokumentatsiooni koostamiseks Hugole

Brauseri tugi

• Internet Explorer 10 ja 11 tühistati
• Loobunud Microsoft Edge < 16 (Legacy Edge)
• Eemaldatud Firefox < 60
• Välja kukkunud Safari < 12
• Loobunud iOS Safari < 12
• Langenud Chrome < 60

Muudatused dokumentides

• Uuendatud avaleht, dokumentide paigutus ja jalus.
• Lisatud uus pakijuhend .
• Lisati uus jaotis Kohanda , mis asendab v4 teemalehe , uute üksikasjadega Sassi, globaalsete konfiguratsioonivalikute, värviskeemide, CSS-i muutujate ja muu kohta.
• Kogu vormidokumentatsioon korraldati ümber uueks jaotiseks Vormid , jagades sisu rohkem keskendunud lehtedeks.
• Samamoodi värskendati jaotist Paigutus , et täpsustada ruudustiku sisu.
• Komponentide leht "Navs" nimetati ümber "Navs & Tabs".
• Leht "Tšekid" nimetati ümber "Tšekid ja raadiod".
• Kujundasime navigeerimisriba ümber ja lisasime uue alamnavigaatori, et hõlbustada meie saitide ja dokumentide versioonide liikumist.
• Otsinguvälja jaoks on lisatud uus kiirklahv: Ctrl + /.

Sass

• Liigsete väärtuste eemaldamise hõlbustamiseks oleme loobunud vaikimisi Sassi kaardiühenditest. Pidage meeles, et nüüd peate Sassi kaartidel määratlema kõik väärtused, näiteks $theme-colors. Vaadake, kuidas Sassi kaartidega hakkama saada .

• Puruneminecolor-yiq()Funktsioon ja sellega seotud muutujad on ümber nimetatud, kuna see pole enam YIQ color-contrast()värviruumiga seotud. Vt #30168.

  • $yiq-contrasted-thresholdon ümber nimetatud $min-contrast-ratio.
  • $yiq-text-darkja $yiq-text-lighton vastavalt ümber nimetatud $color-contrast-darkja $color-contrast-light.

• PurunemineMeediumipäringu mixinsi parameetrid on loogilisema lähenemise huvides muutunud.

  • media-breakpoint-down()kasutab murdepunkti ennast järgmise murdepunkti asemel (nt sihtmärkide media-breakpoint-down(lg)asemel, mis on väiksemad kui ).media-breakpoint-down(md)lg
  • Sarnaselt kasutab ka teine ​​parameeter media-breakpoint-between()järgmise murdepunkti asemel katkestuspunkti ennast (nt ja vahel olevate sihtmärkide vaateavade media-between(sm, lg)asemel ).media-breakpoint-between(sm, md)smlg

• PurunemineEemaldatud prindistiilid ja $enable-print-stylesmuutuja. Trükiväljapaneku klassid on endiselt olemas. Vt #28339 .

• PurunemineKukkunud color(), theme-color()ja gray()funktsioonid muutujate kasuks. Vt #29083 .

• Puruneminetheme-color-level()Funktsioon nimetati ümber color-level()ja aktsepteerib nüüd ainult värvide asemel kõiki soovitud $theme-colorvärve. Vt #29083 Ettevaatust: color-level() see langes hiljem välja v5.0.0-alpha3.

• PurunemineÜmbernimetatud $enable-prefers-reduced-motion-media-queryja -ks $enable-pointer-cursor-for-buttonsja lühiduse mõttes.$enable-reduced-motion$enable-button-pointers

• PurunemineSegu eemaldati bg-gradient-variant(). Kasutage .bg-gradientklassi, et lisada elementidele loodud .bg-gradient-*klasside asemel gradiente.

• Purunemine Eemaldatud varem aegunud segud:

  • hover, hover-focus, plain-hover-focus, jahover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(jätsin välja ka seotud kasuliku klassi, .text-hide)
  • visibility()
  • form-control-focus()

• Puruneminescale-color()Funktsioon on ümber nimetatud, shift-color()et vältida kokkupõrget Sassi enda värvi skaleerimise funktsiooniga.

• box-shadowmixins lubab nüüd nullväärtusi ja langeb nonemitmest argumendist. Vt #30394 .

• Miksinil border-radius()on nüüd vaikeväärtus.

Värvisüsteem

• Värvisüsteem, mis töötas color-level()ja $theme-color-intervaleemaldati uue värvisüsteemi kasuks. Kõik meie koodibaasi funktsioonid lighten()ja darken()funktsioonid on asendatud tint-color()ja shade-color(). Need funktsioonid segavad värvi valge või mustaga, selle asemel et muuta selle heledust kindla summa võrra. Kas shift-color()toonib või varjutab värvi sõltuvalt sellest, kas selle kaaluparameeter on positiivne või negatiivne. Lisateabe saamiseks vaadake #30622 .

• Lisatud uued toonid ja toonid iga värvi jaoks, pakkudes igale põhivärvile üheksa eraldi värvi uute Sassi muutujatena.

• Täiustatud värvikontrast. Värvide kontrastsuse suhe 3:1 kuni 4,5:1 ning värskendatud sinine, roheline, tsüaan ja roosa värv, et tagada WCAG 2.1 AA kontrastsus. Muutis ka meie värvi kontrasti värvi $gray-900väärtusest $black.

• Meie värvisüsteemi toetamiseks oleme lisanud uusi kohandatud funktsioone tint-color()ja shade-color()funktsioone, et värve sobivalt segada.

Võrguvärskendused

• Uus murdepunkt! Lisatud uus xxlkatkestuspunkt 1400pxja üles. Muudes murdepunktides muudatusi ei tehta.

• Täiustatud vihmaveerennid. Vihmaveerennid on nüüd seatud remsesse ja on kitsamad kui v4 ( 1.5rem, või umbes 24px, allapoole 30px). See joondab meie võrgusüsteemi vihmaveerennid meie vahekauguse utiliitidega.

  • Lisatud uus rennide klass ( .g-*, .gx-*, ja .gy-*) horisontaalsete/vertikaalsete rennide, horisontaalsete ja vertikaalsete vihmaveerennide juhtimiseks.
  • PurunemineNimetatud ümber .no-gutters, et .g-0see sobiks uute vihmaveerennide kommunaalteenustega.

• Veerud ei ole enam rakendunud, seega peate võib-olla selle käitumise taastamiseks mõnda elementi position: relativelisama ..position-relative

• PurunemineLoobunud mitmest .order-*klassist, mis sageli jäid kasutamata. Nüüd pakume ainult .order-1karbist .order-5välja.

• PurunemineKomponent loobus, .mediakuna seda saab utiliitidega hõlpsasti kopeerida. Vaadake näidet #28265 ja paindlike utiliitide lehte .

• Purunemine bootstrap-grid.cssbox-sizing: border-boxkehtib nüüd globaalse kasti suuruse lähtestamise asemel ainult veerule. Nii saab meie ruudustiku stiile segamatult kasutada rohkemates kohtades.

• $enable-grid-classesei keela enam konteineriklasside genereerimist. Vt #29146.

• Värskendati make-colmiksin vaikimisi võrdseteks veergudeks ilma määratud suuruseta.

Sisu, taaskäivitamine jne

• RFS on nüüd vaikimisi lubatud. Pealkirjad, mis kasutavadfont-size()mixini, kohandavad omafont-sizemastaapi koos vaateavaga automaatselt. See funktsioon oli varem versiooniga 4 lubatud.

• PurunemineUuendasime oma kuva tüpograafiat, et asendada meie $display-*muutujad ja $display-font-sizesSassi kaart. Samuti eemaldati üksikud $display-*-weightmuutujad ühe $display-font-weightja kohandatud font-sizes jaoks.

• Lisati kaks uut .display-*pealkirja suurust .display-5ja .display-6.

• Lingid on vaikimisi alla kriipsutatud (mitte ainult hõljutades), välja arvatud juhul, kui need on osa konkreetsetest komponentidest.

• Uuesti kujundatud tabelid nende stiilide värskendamiseks ja CSS-i muutujatega ümberehitamiseks, et stiili üle paremini kontrollida.

• PuruneminePesastatud tabelid ei päri enam stiile.

• Purunemine .thead-lightja .thead-darkjäetakse kõrvale variantklasside kasuks, .table-*mida saab kasutada kõigi tabelielementide jaoks ( thead, tbody, tfoot, tr, thja td).

• PurunemineMiksin table-row-variant()nimetatakse ümber table-variant()ja aktsepteerib ainult 2 parameetrit: $color(värvinimi) ja $value(värvikood). Äärise värv ja aktsentvärvid arvutatakse automaatselt tabeliteguri muutujate põhjal.

• Jagage tabeli lahtrite täitemuutujad jagamiseks -y.-x

• PurunemineLanges .pre-scrollableklass. Vt #29135

• Purunemine .text-*utiliidid ei lisa linkidele enam hõljumise ja fookuse olekuid. .link-*selle asemel saab kasutada abistavaid klasse. Vt #29267

• PurunemineLanges .text-justifyklass. Vt #29793

• Purunemine <hr>elemente kasutatakse nüüd heightselle asemel, borderet sizeatribuuti paremini toetada. See võimaldab kasutada ka polsterdusutiliite, et luua paksemaid jaoturid (nt <hr class="py-1">).

• Lähtesta vaikehorisontaalne padding-leftja elemendid brauseri vaikeväärtusest <ul>väärtusele .<ol>40px2rem

• Lisatud $enable-smooth-scroll, mis kehtib kogu maailmas, välja arvatud kasutajatele, kes soovivad meediumipäringu scroll-behavior: smoothkaudu liikumist vähendada . Vt #31877prefers-reduced-motion

RTL

• Horisontaalse suuna spetsiifilised muutujad, utiliidid ja mikserid on kõik ümber nimetatud, et kasutada loogilisi omadusi, nagu need, mis on leitud flexboxi paigutustes – nt startja endnende asemelleftright nt .

Vormid

• Lisatud uued ujuvad vormid! Oleme viinud ujuvate siltide näite täielikult toetatud vormikomponentideks. Vaadake uut ujuvate siltide lehte.

• Purunemine Konsolideeritud oma- ja kohandatud vormielemendid. Märkeruudud, raadiod, valikud ja muud sisendid, millel olid v4-s algklassid ja kohandatud klassid, on konsolideeritud. Nüüd on peaaegu kõik meie vormielemendid täielikult kohandatud, enamik ilma kohandatud HTML-i kasutamata.

  • .custom-control.custom-checkboxon praegu .form-check.
  • .custom-control.custom-custom-radioon praegu .form-check.
  • .custom-control.custom-switchon praegu .form-check.form-switch.
  • .custom-selecton praegu .form-select.
  • .custom-fileja .form-fileneed on asendatud kohandatud stiilidega peal .form-control.
  • .custom-rangeon praegu .form-range.
  • Langenud native .form-control-fileja .form-control-range.

• PurunemineLanges .input-group-appendja .input-group-prepend. Nüüd saate lihtsalt lisada nuppe ja .input-group-textsisestusrühmade otseste alamrühmadena.

• Valideerimise tagasiside veaga sisendrühma pikaajaline puuduva piiri raadius parandatakse lõpuks, lisades valideerimisega sisendrühmadele täiendava .has-validationklassi.

• Purunemine Loobunud meie ruudustikusüsteemi vormipõhised paigutusklassid. Kasutage meie võrku ja utiliite .form-group, .form-row, või asemel .form-inline.

• PurunemineVormisildid nõuavad nüüd .form-label.

• Purunemine .form-textei määra enam display, mis võimaldab teil vastavalt HTML-i elementi muutes luua või blokeerida abiteksti.

• Vormi juhtelemente ei kasutata enam võimaluse korral fikseerituna height, selle asemel lükatakse see edasi, min-heightet parandada kohandamist ja ühilduvust teiste komponentidega.

• Valideerimisikoone ei rakendata enam <select>s-ile koos multiple.

• Ümberkorraldatud allika Sass-failid all scss/forms/, sealhulgas sisendrühmade stiilid.

Komponendid

• Meie muutujal põhinevad ühtsed paddingväärtused hoiatuste, teeradade, kaartide, rippmenüüde, loendirühmade, modaalide, hüpikaknade ja kohtspikrite jaoks . Vt #30564 .$spacer

Akordion

• Lisatud uus akordioni komponent .

Märguanded

• Märguannetel on nüüd ikoonidega näited .

• Igast märguandest eemaldati s-i kohandatud stiilid, <hr>kuna need juba kasutavad currentColor.

Märgid

• PurunemineLoobuti kõigist taustautiliitide .badge-*värviklassidest (nt kasutage utiliiti .bg-primaryasemel .badge-primary).

• PurunemineLoobutud .badge-pill— kasutage .rounded-pillselle asemel utiliiti.

• Purunemine<a>Elementide ja elementide hõljutus- ja fookusstiilid on eemaldatud <button>.

• Suurenenud vaiketähistus märkide jaoks vahemikus .25em/ .5emkuni .35em/ .65em.

Riivsai

• Lihtsustas riivsaia vaikeilmet, eemaldades padding, background-colorja border-radius.

• Lisatud uus CSS-i kohandatud atribuut --bs-breadcrumb-divider, et saaks hõlpsasti kohandada ilma CSS-i uuesti kompileerimata.

Nupud

• Purunemine Märkeruutude või raadiotega lülitusnupud ei vaja enam JavaScripti ja neil on uus märgistus. Me ei nõua enam ümbriselementi, lisame.btn-checksellesse<input>ja sidume selle mis tahes.btnklassiga<label>. Vt #30650 . Selle dokumendid on kolinud meie nuppude lehelt uude jaotisesse Vormid.

• Purunemine Kommunaalteenuste .btn-blockeest langenud. Selle asemel, et kasutada .btn-blocknuppu .btn, mähkige nupud .d-gridja .gap-*utiliidiga, et neid vastavalt vajadusele paigutada. Lülituge tundlikele klassidele, et neid veelgi paremini kontrollida. Mõned näited leiate dokumentidest.

• Täiendavate parameetrite toetamiseks värskendati meie button-variant()ja miksine.button-outline-variant()

• Uuendatud nupud, et tagada suurem kontrast hõljutus- ja aktiivses olekus.

• Keelatud nuppudel on nüüd pointer-events: none;.

Kaart

• PurunemineLanges .card-deckmeie ruudustiku kasuks. Pakkige oma kaardid veeruklassidesse ja lisage .row-cols-*kaardipakkide taasloomiseks emakonteiner (kuid paremini kontrolli all reageeriva joondamise üle).

• PurunemineLanges .card-columnsmüüritise kasuks. Vt #28922 .

• PuruneminePõhiline .cardakordion asendati uue Akordioni komponendiga .

Karussell

• Lisatud uus .carousel-darkvariant tumeda teksti, juhtnuppude ja indikaatorite jaoks (sobib suurepäraselt heledama tausta jaoks).

• Asendati karusselli juhtnuppude nööriikoonid Bootstrap Iconsi uute SVG-dega .

Sulgemisnupp

• PurunemineNimetati ümber .closevähem .btn-closeüldiseks nimeks.

• Sulgemisnupud kasutavad nüüd background-image(manustatud SVG-d) HTML-is a asemel ×, mis võimaldab hõlpsamini kohandada ilma, et peaksite märgistust puudutama.

• Lisatud on uus .btn-close-whitevariant, mis filter: invert(1)võimaldab suurema kontrastiga ikoonid tumedamal taustal eemaldada.

Ahenda

• Eemaldatud akordionide kerimisankurdus.

Rippmenüüd

• Lisatud uus .dropdown-menu-darkvariant ja seotud muutujad nõudmisel tumedate rippmenüüde jaoks.

• Lisati uus muutuja jaoks $dropdown-padding-x.

• Kontrastsuse parandamiseks muutis rippmenüü jaguri tumedamaks.

• PurunemineKõik rippmenüü sündmused käivitatakse nüüd rippmenüü lülitusnupul ja seejärel kuvatakse ülemelemendini.

• Rippmenüüdes on nüüd määratud data-bs-popper="static"atribuut, kui rippmenüü asukoht on staatiline või rippmenüü asub navigeerimisribal. Selle lisab meie JavaScript ja see aitab meil kasutada kohandatud positsioonistiile Popperi positsioneerimist segamata.

• PurunemineLoobutud flipvalik rippmenüü pistikprogrammist Popperi konfiguratsiooni kasuks. Nüüd saate ümberpööramise keelata, edastades ümberpööramise modifikaatoris suvandi fallbackPlacementsjaoks tühja massiivi.

• Rippmenüüd saab nüüd klõpsata koos uue autoClosevalikuga automaatse sulgemise käitumise käsitlemiseks . Selle valiku abil saate nõustuda klõpsuga rippmenüü sees või väljaspool, et muuta see interaktiivseks.

• Rippmenüüd toetavad nüüd .dropdown-items-i mähitud <li>s-i.

Jumbotron

• PurunemineJumbotroni komponendist loobuti, kuna seda saab utiliitidega kopeerida. Demo jaoks vaadake meie uut Jumbotroni näidet.

Nimekirja rühm

• Lisati loendirühmadesse uus .list-group-numberedmodifikaator .

Navid ja vahelehed

• Lisati klassi jaoks uued nullmuutujad font-size, font-weight, colorja :hover colorjaoks ..nav-link

Navbarid

• PurunemineNavibarid nõuavad nüüd konteinerit (vahenõuete ja CSS-i oluliseks lihtsustamiseks).
• PurunemineKlassi .activeei saa enam s-le rakendada .nav-item, see tuleb rakendada otse .nav-links-le.

Offcanvas

• Lisatud uus offcanvas komponent .

Leheküljed

• Leheküljelingid on nüüd kohandatavad margin-left, mis ümardatakse üksteisest eraldatuna kõigist nurkadest dünaamiliselt.

• transitionLehekülgede linkidele lisatud s.

Popovers

• PurunemineMeie vaikimisi hüpikakna mallis on ümber .arrownimetatud ..popover-arrow

• whiteListValik nimetati ümber allowList.

Spinnerid

• Spinnerid austavad nüüd prefers-reduced-motion: reduceanimatsioone aeglustades. Vt #31882 .

• Täiustatud spinneri vertikaalne joondamine.

Röstsaid

• Röstsaid saab nüüd positsioneerimisutiliitide.toast-container abil a -sse paigutada .

• Röstsaia vaikekestuseks määrati 5 sekundit.

• Eemaldatud overflow: hiddenröstsaiadest ja asendatud õigete funktsioonidega border-radiuss-ga calc().

Tööriistanõuanded

• PurunemineMeie kohtspikri vaikemallis on ümber .arrownimetatud ..tooltip-arrow

• PurunemineVaikeväärtuseks fallbackPlacementsmuudetakse ['top', 'right', 'bottom', 'left']hüpikelementide paremaks paigutamiseks.

• PuruneminewhiteListValik nimetati ümber allowList.

Kommunaalteenused

• PurunemineNimetas mitu utiliiti ümber, et kasutada suunanimede asemel loogilisi atribuutide nimesid, lisades RTL-i toe:

  • Nimetati ümber .left-*ja .right-*nimeks .start-*ja .end-*.
  • Nimetati ümber .float-leftja .float-rightnimeks .float-startja .float-end.
  • Nimetati ümber .border-leftja .border-rightnimeks .border-startja .border-end.
  • Nimetati ümber .rounded-leftja .rounded-rightnimeks .rounded-startja .rounded-end.
  • Nimetati ümber .ml-*ja .mr-*nimeks .ms-*ja .me-*.
  • Nimetati ümber .pl-*ja .pr-*nimeks .ps-*ja .pe-*.
  • Nimetati ümber .text-leftja .text-rightnimeks .text-startja .text-end.

• PurunemineVaikimisi on negatiivsed veerised keelatud.

• Lisatud on uus .bg-bodyklass, mis võimaldab kiirelt seadistada <body>tausta lisaelementidele.

• Lisatud uued positsiooniutiliidid , top, rightja bottomjaoks left. Iga atribuudi väärtuste hulka kuuluvad 0, 50%ja 100%.

• Lisatud uued .translate-middle-xja .translate-middle-yutiliidid absoluutsete/fikseeritud positsioneeritud elementide horisontaalseks või vertikaalseks tsentreerimiseks.

• Lisatud uued border-widthkommunaalteenused .

• PurunemineÜmber .text-monospacenimetatud nimeks .font-monospace.

• PurunemineEemaldatud .text-hide, kuna see on vananenud meetod teksti peitmiseks, mida enam kasutada ei tohiks.

• Lisatud .fs-*utiliidid kommunaalteenuste jaoks font-size(kui RFS on lubatud). Need kasutavad sama skaalat nagu HTML-i vaikepealkirjad (1–6, suured kuni väikesed) ja neid saab muuta Sassi kaardi kaudu.

• PurunemineLühiduse ja järjepidevuse huvides .font-weight-*on utiliidid ümber nimetatud..fw-*

• PurunemineLühiduse ja järjepidevuse huvides .font-style-*on utiliidid ümber nimetatud..fst-*

• Lisatud .d-gridkuvamiseks utiliitidele ja uutele gaputiliitidele ( .gap) CSS Gridi ja flexboxi paigutuste jaoks.

• PurunemineEemaldatud .rounded-smja rounded-lgning kasutusele võetud uus klasside .rounded-0skaala .rounded-3. Vt #31687 .

• Lisatud uued line-heightutiliidid: .lh-1, .lh-sm, .lh-baseja .lh-lg. Vaata siit .

• Teisaldasime .d-noneutiliidi meie CSS-is, et anda sellele muude kuvamisutiliitide ees rohkem kaalu.

• Laiendas .visually-hidden-focusableabimeest ka konteineritega töötamiseks, kasutades :focus-within.

Abilised

• Purunemine Reageerivad manustamisabistajad on ümber nimetatud uute klassinimede ja täiustatud käitumisega suhteabilisteks ning abistava CSS-i muutujaga.

  • Klassid on ümber nimetatud, et muuta bykuvasuhteks x. Näiteks .ratio-16by9on praegu .ratio-16x9.
  • Loobusime .embed-responsive-itemelemendirühma valijast ja lihtsama .ratio > *valija kasuks. Rohkem klassi pole vaja ja suhteabimees töötab nüüd mis tahes HTML-i elemendiga.
  • $embed-responsive-aspect-ratiosSassi kaart on ümber nimetatud ja $aspect-ratiosselle väärtusi on lihtsustatud, et lisada key: valuepaarina klassi nimi ja protsent.
  • Nüüd luuakse ja kaasatakse Sassi kaardi iga väärtuse jaoks CSS-muutujad. Kohandatud kuvasuhte loomiseks muutke --bs-aspect-ratiomuutujat ..ratio

• Purunemine Ekraanilugeja klassid on nüüd visuaalselt peidetud klassid .

  • Sassi faili muudeti scss/helpers/_screenreaders.scssväärtusest failiksscss/helpers/_visually-hidden.scss
  • Nimetati ümber .sr-onlyja ja.sr-only-focusable.visually-hidden.visually-hidden-focusable
  • Ümbernimetatud sr-only()ja sr-only-focusable()miksimine on visually-hidden()ja visually-hidden-focusable().

• bootstrap-utilities.csshõlmab nüüd ka meie abilisi. Abistajaid ei pea enam kohandatud järgudesse importima.

JavaScript

• Loobunud jQuery sõltuvusest ja kirjutanud pistikprogrammid ümber, et need oleksid tavalises JavaScriptis.

• PurunemineKõikide JavaScripti pistikprogrammide andmeatribuudid on nüüd nimeruumis, et eristada Bootstrapi funktsioone kolmandatest osapooltest ja teie enda koodist. Näiteks kasutame data-bs-toggleasemel data-toggle.

• Kõik pistikprogrammid saavad nüüd esimese argumendina aktsepteerida CSS-i valijat. Plugina uue eksemplari loomiseks saate edastada DOM-i elemendi või mis tahes kehtiva CSS-i valija:

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

• popperConfigsaab edastada funktsioonina, mis aktsepteerib argumendina Bootstrapi Popperi vaikekonfiguratsiooni, nii et saate selle vaikekonfiguratsiooni omal moel liita. Kehtib rippmenüüde, hüpikaknate ja kohtspikrite puhul.

• Popperi elementide paremaks paigutamiseks fallbackPlacementsmuudetakse vaikeväärtuseks . Kehtib rippmenüüde, hüpikaknate ja kohtspikrite puhul.['top', 'right', 'bottom', 'left']

• _getInstance()Avalikelt staatilistelt meetoditelt, nagu → , on alakriips eemaldatud getInstance().