Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
Check
in English

v5era migratzen

Jarraitu eta berrikusi Bootstrap iturburu-fitxategietan, dokumentazioan eta osagaietan egindako aldaketak, v4tik v5era migratzen laguntzeko.

Orrialde honetan

v5.2.0

Diseinu berritua

Bootstrap v5.2.0 diseinu-eguneratze sotil bat eskaintzen du proiektuko osagai eta propietate gutxi batzuentzat, batez ere border-radiusbotoien eta inprimaki-kontrolen balio finduen bidez . Gure dokumentazioa ere eguneratu da hasierako orri berri batekin, alboko barrako atalak tolesten ez dituen dokumentuen diseinu sinpleagoarekin eta Bootstrap ikonoen adibide nabarmenagoekin .

CSS aldagai gehiago

Gure osagai guztiak eguneratu ditugu CSS aldagaiak erabiltzeko. Sass-ek dena oinarri duen arren, osagai bakoitza eguneratu da CSS aldagaiak osagaien oinarrizko klaseetan sartzeko (adibidez, .btn), Bootstrap denbora errealean pertsonalizatzeko aukera emanez. Hurrengo argitalpenetan, CSS aldagaien erabilera zabaltzen jarraituko dugu diseinu, inprimaki, laguntzaile eta utilitateetara. Irakurri gehiago osagai bakoitzeko CSS aldagaiei dagozkien dokumentazio orrietan.

Gure CSS aldagaiaren erabilera nahikoa osatugabea izango da Bootstrap 6ra arte. Horiek guztiz inplementatzea gustatuko litzaiguke arren, aldaketak apurtzeko arriskua dute. Adibidez, $alert-border-width: var(--bs-border-width)gure iturburu-kodea ezartzeak zure kodean Sass potentziala hautsi egiten $alert-border-width * 2du arrazoiren batengatik egiten bazenu.

Horrela, ahal den guztietan, CSS aldagai gehiagoren alde bultzatzen jarraituko dugu, baina kontuan izan gure inplementazioa apur bat mugatua izan daitekeela v5-en.

Berria_maps.scss

Bootstrap v5.2.0 Sass fitxategi berri bat sartu zuen _maps.scss. Hainbat Sass mapa ateratzen ditu _variables.scssjatorrizko mapa baten eguneraketak haiek zabaltzen dituzten bigarren mailako mapetan aplikatzen ez ziren arazo bat konpontzeko. Adibidez, eguneraketak $theme-colorsez zitzaizkien aplikatzen $theme-colorsgakoen pertsonalizazio-fluxuak hautsiz. Laburbilduz, Sass-ek muga bat du, non aldagai edo mapa lehenetsi bat erabili ondoren ezin den eguneratu. CSS aldagaiekin antzeko gabezia bat dago beste CSS aldagai batzuk osatzeko erabiltzen direnean.

Horregatik, Bootstrap-en pertsonalizazio aldakorrak ondoren etorri behar dira @import "functions", baina aurretik @import "variables"eta gure inportazio pilaren gainerakoa. Gauza bera gertatzen da Sass mapekin: lehenetsiak baliogabetu behar dituzu erabili aurretik. Mapa hauek berrira eraman dira _maps.scss:

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

Zure Bootstrap CSS eraikitze pertsonalizatuek honelako itxura izan beharko lukete mapak aparteko inportazio batekin.

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

Utilitate berriak

  • Letra-tipo erdi-lodietarako sartzeko utilitate hedatuak font-weight..fw-semibold
  • border-radiusUtilitate hedatuak bi tamaina berri sartzeko, .rounded-4eta .rounded-5, aukera gehiago izateko.

Aldaketa gehigarriak

  • Aukera berria sartu $enable-container-classesda. — Orain CSS Grid diseinu esperimentalean aukeratzerakoan, .container-*klaseak oraindik konpilatuko dira, aukera hau ez bada ezarrita false. Edukiontziek ere gaur egun beren erreten balioak mantentzen dituzte.

  • Offcanvas osagaiak aldaera sentikorrak ditu orain . Jatorrizko .offcanvasklaseak ez du aldatzen; edukia ezkutatzen du ikuspegi guztietan. Erreaktiboa izan dadin, aldatu .offcanvasklase hori edozein .offcanvas-{sm|md|lg|xl|xxl}klasetara.

  • Mahai-banatzaile lodiagoak aukeratzen dira orain. — Taula-taldeen arteko ertza lodiagoa eta gainidazteko zailagoa kendu dugu eta aplika dezakezun aukerako klase batera eraman dugu, .table-group-divider. Ikusi taulako dokumentuak adibide baterako.

  • Scrollspy berridatzi da Intersection Observer APIa erabiltzeko , eta horrek esan nahi du jada ez duzula gurasoen bilgarri erlatiborik behar,offsetkonfigurazioa zaharkituta eta abar. Bilatu zure Scrollspy inplementazioak zehatzagoak eta koherenteagoak izan daitezen nabigazioa nabarmentzeko.

  • Popovers eta tooltips orain CSS aldagaiak erabiltzen dituzte. CSS aldagai batzuk Sass-en parekoetatik eguneratu dira aldagai kopurua murrizteko. Ondorioz, hiru aldagai zaharkituta geratu dira bertsio honetan: $popover-arrow-color, $popover-arrow-outer-color, eta $tooltip-arrow-color.

  • Laguntzaile berriak gehitu .text-bg-{color}dira. Banakoak .text-*eta utilitateak ezarri beharrean, orain laguntzaileak.bg-* erabil ditzakezu lehen.text-bg-*background-color plano kontrastatuarekin ezartzeko color.

  • .form-check-reverseEtiketen eta erlazionatutako kontrol-laukien/irratien ordena iraultzeko aldatzailea gehitu da.

  • Zutabe marradunen euskarria gehitu da tauletan .table-striped-columnsklase berriaren bidez .

Aldaketen zerrenda osoa lortzeko, ikusi v5.2.0 proiektua GitHub-en .

v5.1.0

  • CSS Grid diseinurako euskarria esperimentala gehitu da . — Abian dagoen lan bat da, eta oraindik ez dago produkzioan erabiltzeko prest, baina eginbide berria aukera dezakezu Sass bidez. Gaitzeko, desgaitu sare lehenetsia, ezarriz $enable-grid-classes: falseeta gaitu CSS Sarea ezarriz $enable-cssgrid: true.

  • Offcanvas onartzeko nabigazio-barrak eguneratu dira. — Gehitu oihalez kanpoko tiraderak edozein nabigazio -barratan erantzuteko .navbar-expand-*klaseekin eta oihalez kanpoko marka batzuekin.

  • Leku -markaren osagai berria gehitu da . — Gure osagai berriena, benetako edukiaren ordez aldi baterako blokeoak emateko modua, zure webgunean edo aplikazioan zerbait kargatzen ari dela adierazten laguntzeko.

  • Tolestu pluginak toleste horizontala onartzen du orain . — Gehitu .collapse-horizontalzure .collapseto tolestu widthordez height. min-heightSaihestu arakatzailea berriro margotzea edo bat ezarrita height.

  • Pila eta arau bertikaleko laguntzaile berriak gehitu dira. — Aplikatu bizkor flexbox propietate anitz pilarekin diseinu pertsonalizatuak azkar sortzeko . Aukeratu pila horizontalak ( .hstack) eta bertikalak ( ). Gehitu elementuen .vstackantzeko banatzaile bertikalak laguntzaile berriekin .<hr>.vr

  • :rootCSS aldagai global berriak gehitu dira. — Estiloak :rootkontrolatzeko mailara CSS aldagai berri batzuk gehitu dira. <body>Gehiago daude lanean, gure utilitateetan eta osagaietan barne, baina oraingoz irakurri CSS aldagaiak Pertsonalizatu atalean .

  • Kolore eta atzeko planoko utilitateak berritu dira CSS aldagaiak erabiltzeko, eta testu-opakutasun eta atzeko planoko opakutasun - utilitate berriak gehitu ditu. — .text-* eta .bg-*utilitateak orain CSS aldagaiekin eta rgba()kolore-balioekin eraikitzen dira, edozein utilitate erraz pertsonaliza dezakezu opakitate-utilitate berriekin.

  • Gure osagaiak nola pertsonalizatu erakusteko oinarritutako zatien adibide berriak gehitu dira. — Presta zaitez osagai pertsonalizatuak eta bestelako diseinu-eredu arruntak erabiltzeko gure Snippets adibide berriekin . Oin - oinak , goitibeherakoak , zerrenda-taldeak eta modalitateak biltzen ditu .

  • Erabili gabeko kokapen-estiloak kendu dira popover-etatik eta tresna-aholkuetatik , Popper-ek soilik kudeatzen dituelako. $tooltip-marginzaharkitua izan nullda eta prozesuan ezarri da.

Informazio gehiago nahi duzu? Irakurri v5.1.0 blogeko argitalpena.

Aupa! Bootstrap 5, v5.0.0, gure lehen bertsio nagusiaren aldaketak behean dokumentatzen dira. Ez dituzte islatzen goian erakutsitako aldaketa gehigarriak.

Mendekotasunak

  • JQuery kendu da.
  • Popper v1.x-tik Popper v2.x-era berritu da.
  • Libsass Dart Sass-ekin ordezkatu da, Libsass emandako Sass konpilatzailea zaharkituta zegoelako.
  • Jekyll-etik Hugora migratu genuen gure dokumentazioa eraikitzeko

Arakatzailearen laguntza

  • Internet Explorer 10 eta 11 jaitsi egin da
  • Microsoft Edge < 16 jaitsi da (Legacy Edge)
  • Firefox < 60 jaitsi da
  • Safari jaitsi da < 12
  • iOS Safari < 12 jaitsi da
  • Chrome < 60 jaitsi da

Dokumentazio aldaketak

  • Hasierako orria, dokumentuen diseinua eta orri-oina birmoldatu dira.
  • Paketeen gida berria gehitu da .
  • Pertsonalizatu atal berria gehitu da, v4-ren Theming orria ordezkatuz , Sass-en xehetasun berriekin, konfigurazio-auker globalak, kolore-eskemak, CSS aldagaiak eta abar.
  • Inprimakiaren dokumentazio guztia Inprimakien atal berrian berrantolatu da , edukia orri bideratuagoetan banatuz.
  • Era berean, Diseinua atala eguneratu da sareko edukia argiago mamitzeko.
  • "Navs" osagaiaren orria "Navs & Tabs" izenarekin.
  • "Txekeak" orriari "Txekeak eta irratiak" izena jarri diote.
  • Nabigazio-barra birmoldatu eta azpinabigazio berria gehitu da gure webguneetan eta dokumentuen bertsioetan errazago ibiltzea.
  • Teklatuko lasterbide berria gehitu da bilaketa-eremurako: Ctrl + /.

Sass

  • Sass mapa-batze lehenetsiak alde batera utzi ditugu balio erredundanteak errazago kentzeko. Gogoan izan orain Sass mapetan balio guztiak definitu behar dituzula bezalakoa $theme-colors. Begiratu Sass mapekin nola aurre egin .

  • Hausturacolor-yiq()Funtzioari eta erlazionatutako aldagaiei izena aldatu zaie color-contrast(), jada ez baitago YIQ kolore-espazioarekin lotuta . Ikusi #30168.

    • $yiq-contrasted-thresholdizena aldatu zaio $min-contrast-ratio.
    • $yiq-text-darketa , hurrenez hurren, eta $yiq-text-lightizena aldatzen zaie .$color-contrast-dark$color-contrast-light

  • HausturaMultimedia-kontsulten mixin-en parametroak aldatu egin dira ikuspegi logikoagoa izateko.

    • media-breakpoint-down()eten-puntua bera erabiltzen du hurrengo eten-puntuaren ordez (adibidez, helburuen bista txikiagoen media-breakpoint-down(lg)ordez ).media-breakpoint-down(md)lg
    • Era berean, bigarren parametroak media-breakpoint-between()eten-puntua bera ere erabiltzen du hurrengo eten-puntuaren media-between(sm, lg)ordez (adibidez, media-breakpoint-between(sm, md)helburuen smeta lg) arteko ikuspegien ordez.

  • HausturaInprimatze-estiloak eta $enable-print-stylesaldagaiak kendu dira. Inprimatu erakusteko klaseak oraindik inguruan daude. Ikusi #28339 .

  • HausturaJaitsi color(), theme-color(), eta gray()funtzioak aldagaien alde. Ikusi #29083 .

  • HausturaFuntzioari izena aldatu theme-color-level()zaio color-level()eta orain nahi duzun kolorea onartzen du $theme-colorkoloreak baino ez. Ikusi #29083 Kontuz: color-level() geroago sartu zen v5.0.0-alpha3.

  • HausturaBerrizendatua $enable-prefers-reduced-motion-media-queryeta $enable-pointer-cursor-for-buttonsto $enable-reduced-motioneta $enable-button-pointerslaburtasunerako.

  • Hausturabg-gradient-variant()Mixina kendu . Erabili .bg-gradientklasea elementuei gradienteak gehitzeko sortutako .bg-gradient-*klaseen ordez.

  • Haustura Aurretik zaharkitutako mixin-ak kendu dira:

    • hover, hover-focus, plain-hover-focus, etahover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(lotutako erabilgarritasun-klasea ere kendu zuen, .text-hide)
    • visibility()
    • form-control-focus()

  • Hausturascale-color()Funtzioari izena aldatu zaio shift-color()Sassen koloreen eskalatze funtzioarekin talka saihesteko.

  • box-shadowMixinek orain nullbalioak onartzen dituzte eta noneargumentu anitzetatik kentzen dituzte. Ikusi #30394 .

  • Mixin - border-radius()ak balio lehenetsia du orain.

Kolore-sistema

  • Kolore-sistemarekin funtzionatzen zuen color-level()eta $theme-color-intervalkendu zen kolore-sistema berri baten alde. Gure kode-baseko funtzio guztiak lighten()eta eta ordezkatzen darken()dira . Funtzio hauek kolorea zuria edo beltzarekin nahastuko dute argitasuna kopuru finko batean aldatu beharrean. Pisu-parametroa positiboa edo negatiboa denaren arabera kolore bat tindatuko edo itzalduko du . Ikus #30622 xehetasun gehiagorako.tint-color()shade-color()shift-color()

  • Kolore bakoitzerako ñabardura eta tonu berriak gehitu dira, oinarrizko kolore bakoitzeko bederatzi kolore bereizi eskainiz, Sass aldagai berri gisa.

  • Kolore kontraste hobetua. Kolore-kontraste-erlazioa 3:1etik 4.5:1 artekoa eta kolore urdina, berdea, ziana eta arrosa eguneratuak WCAG 2.1 AA kontrastea bermatzeko. Gure kolore-kontrastearen koloretik ere aldatu $gray-900dugu $black.

  • Gure kolore-sistema laguntzeko, pertsonalizatu tint-color()eta shade-color()funtzio berriak gehitu ditugu gure koloreak behar bezala nahasteko.

Sarearen eguneraketak

  • Eten puntu berria! xxlEten-puntu berria gehitu da 1400pxeta gora. Ez dago aldaketarik gainerako eten puntu guztietan.

  • Erretenak hobetu. 1.5remGutters orain remetan ezarrita daude, eta v4 ( , edo gutxi gorabehera 24px, behera) baino estuagoak dira 30px. Honek gure sare-sistemaren erretenak gure espazio-zerbitzuekin lerrokatzen ditu.

    • Erreten-klase berria gehitu da ( .g-*, .gx-*, eta .gy-*) kanalizazio horizontalak/bertikalak, erretenak horizontalak eta erretenak bertikalak kontrolatzeko.
    • Haustura.no-guttersIzena aldatu zaio erretenaren .g-0erabilgarritasun berriekin bat etortzeko.

  • Zutabeak jada ez dira aplikatu, beraz, baliteke elementu batzuk position: relativegehitu behar izatea portaera hori leheneratzeko..position-relative

  • HausturaAskotan erabiltzen ez ziren hainbat .order-*klase utzi zituen. Orain kutxatik kanpo bakarrik ematen dugu .order-1..order-5

  • HausturaOsagaia jaitsi .mediaegin da, utilitateekin erraz errepika daitekeelako. Ikus #28265 eta flex utilitateen orria adibide baterako .

  • Haustura bootstrap-grid.cssorain zutabean soilik aplikatzen box-sizing: border-boxda kutxa-tamaina globala berrezarri beharrean. Horrela, gure sareta estiloak leku gehiagotan erabil daitezke interferentziarik gabe.

  • $enable-grid-classesjada ez du edukiontzien klaseak sortzea desgaitzen. Ikusi #29146.

  • Mixin-a eguneratu make-colda lehenetsitako zutabe berdinekin tamaina zehaztu gabe.

Edukia, berrabiarazi, etab

  • RFS lehenespenez gaituta dago orain. Mixin -a erabiltzen dutenfont-size()goiburuak automatikoki egokituko dira bistaratukofont-sizeeskalara. Eginbide hau lehen v4-rekin aukeratzen zen.

  • HausturaGure bistaratze-tipografia berritu dugu gure $display-*aldagaiak ordezkatzeko eta $display-font-sizesSass mapa batekin. S bakar eta egokitutako $display-*-weightaldagai indibidualak ere kendu ditu .$display-font-weightfont-size

  • Bi .display-*goiburu-tamaina berri gehitu dira, .display-5eta .display-6.

  • Estekak lehenespenez azpimarratzen dira (ez bakarrik pasatzean), osagai zehatzen parte ez badira behintzat.

  • Taulak birdiseinatu dituzte estiloak freskatzeko eta CSS aldagaiekin berreraikitzeko, estiloaren gaineko kontrola gehiago izateko.

  • HausturaHabiaratutako taulek ez dituzte estiloak heredatzen.

  • Haustura .thead-lighteta taulako elementu guztietan ( , , , , eta ) erabil daitezkeen aldaera klaseen .thead-darkalde uzten dira ..table-*theadtbodytfoottrthtd

  • HausturaMixin - table-row-variant()ari izena aldatu zaio table-variant()eta 2 parametro baino ez ditu onartzen: $color(kolore-izena) eta $value(kolore-kodea). Ertzaren kolorea eta azentu koloreak automatikoki kalkulatzen dira taulako faktoreen aldagaietan oinarrituta.

  • Zatitu taulako gelaxka betetzeko aldagaiak -yeta -x.

  • Haustura.pre-scrollableKlase jaitsi . Ikusi #29135

  • Haustura .text-*utilitateek ez dituzte gehitzen pasatzeko eta foku egoerak esteketan. .link-*laguntzaile klaseak erabil daitezke horren ordez. Ikusi #29267

  • Haustura.text-justifyKlase jaitsi . Ikusi #29793

  • Haustura <hr>elementuak erabili heightbeharrean atributua borderhobeto onartzeko. sizeHorri esker, betegarrizko utilitateak ere erabil daitezke zatitzaile lodiagoak sortzeko (adibidez, <hr class="py-1">).

  • Berrezarri lehenetsi horizontala padding-leftaktibatuta <ul>eta arakatzailearen <ol>lehenetsitako elementuak .40px2rem

  • Gehituta $enable-smooth-scrolldago, mundu osoan aplikatzen dena, multimedia scroll-behavior: smooth-kontsulten bidez mugimendu murriztua eskatzen duten erabiltzaileentzat izan ezik . Ikusi #31877prefers-reduced-motion

RTL

  • Norabide horizontaleko aldagai espezifikoak, utilitateak eta nahasketak izena aldatu zaie, flexbox diseinuetan aurkitzen diren bezalako propietate logikoak erabiltzeko, adibidez, starteta eta -ren endordez .leftright

Formak

  • Inprimaki flotagarri berriak gehitu dira! Etiketa flotagarriak adibidea guztiz onartzen duten inprimaki-osagaietara sustatu dugu. Ikusi Etiketa flotagarriak orri berria.

  • Haustura Inprimaki-elementu jatorrizko eta pertsonalizatuak bateratuak. v4-n klase natiboak eta pertsonalizatuak zituzten kontrol-laukiak, irratiak, hautaketak eta beste sarrera batzuk finkatu dira. Orain gure inprimaki-elementu ia guztiak guztiz pertsonalizatuak dira, gehienak HTML pertsonalizatu beharrik gabe.

    • .custom-control.custom-checkboxorain da .form-check.
    • .custom-control.custom-custom-radioorain da .form-check.
    • .custom-control.custom-switchorain da .form-check.form-switch.
    • .custom-selectorain da .form-select.
    • .custom-fileeta .form-fileestilo pertsonalizatuek ordezkatu dituzte gainean .form-control.
    • .custom-rangeorain da .form-range.
    • Bertakoa .form-control-fileeta .form-control-range.

  • HausturaJaitsi .input-group-appendeta .input-group-prepend. Orain botoiak gehi ditzakezu eta .input-group-textsarrera-taldeen seme-alaba zuzen gisa.

  • Balidazio-adierazpenen akatsa duen sarrera-taldearen aspaldiko ertz-erradioa falta da azkenean .has-validationbaliozkotzea duten sarrera-taldeei klase gehigarri bat gehituz .

  • Haustura Inprimaki espezifikoen diseinu-klaseak kendu dira gure sare-sistemarako. Erabili gure sarea eta utilitateak .form-group, .form-row, edo .form-inline.

  • HausturaInprimaki-etiketek orain eskatzen dute .form-label.

  • Haustura .form-textjada ez da ezartzen display, HTML elementua aldatuta nahi duzun moduan lerroan edo blokeatzeko laguntza-testua sortzeko aukera emanez.

  • Inprimaki-kontrolak jada ez dira finkoak erabiltzen heightahal denean, atzeratu beharrean min-heightbeste osagai batzuekin pertsonalizazioa eta bateragarritasuna hobetzeko.

  • Balidazio-ikonoak jada ez dira aplikatzen <select>s-rekin multiple.

  • Iturburuko Sass fitxategiak berrantolatu dira scss/forms/, sarrera-taldeen estiloak barne.

Osagaiak

  • Alertak, ogi-birak, txartelak, goitibeherakoak, zerrenda-taldeak, modalak, popover-ak eta tresna-aholkuak gure aldagaian paddingoinarritutako balio bateratuak . Ikusi #30564 .$spacer

Akordeoia

Alertak

  • Alertak ikonodun adibideak dituzte orain .

  • Alerta bakoitzean s- entzako estilo pertsonalizatuak kendu <hr>dira dagoeneko erabiltzen dutelako currentColor.

Txapak

  • HausturaKolore-klase guztiak kendu .badge-*ditu atzeko planoetarako (adibidez, erabili .bg-primaryordez .badge-primary).

  • HausturaJaregin .badge-pill— .rounded-pillerabili utilitatea ordez.

  • HausturaPasatzeko eta fokatzeko estiloak <a>eta <button>elementuentzat kendu dira.

  • / -tik .25em/ .5em-ra bereizgarrientzako betegarri lehenetsia handitu da ..35em.65em

  • paddingOgi-mamien itxura lehenetsia sinplifikatu , background-color, eta kenduz border-radius.

  • CSS propietate pertsonalizatu berria gehitu --bs-breadcrumb-dividerda erraz pertsonalizatzeko CSS berriro konpilatu beharrik gabe.

Botoiak

  • Haustura Aktibatzeko botoiek , kontrol-laukiekin edo irratiekin, jada ez dute JavaScript behar eta marka berria dute. Jada ez dugu biltzeko elementurik behar, gehitu.btn-check,<input>eta parekatu .-ko edozein.btnklaserekin<label>. Ikusi #30650 . Horretarako dokumentuak gure Botoien orritik Inprimakiak atal berrira eraman dira.

  • Haustura .btn-blockUtilitateengatik jaitsi da. Erabili beharrean .btn-block, .btnitzulbiratu zure botoiak .d-grideta .gap-*erabilgarritasun batekin behar den moduan espazioratzeko. Aldatu responsive klaseetara haien gaineko kontrola are gehiago izateko. Irakurri dokumentuak adibide batzuk ikusteko.

  • Gure button-variant()eta button-outline-variant()mixins eguneratu dira parametro osagarriak onartzeko.

  • Botoiak eguneratu dira pasabidean eta aktibo egoeretan kontraste handiagoa bermatzeko.

  • Desgaitutako botoiek orain dute pointer-events: none;.

Txartela

  • Haustura.card-deckGure sarearen alde erorita . Itzulbiratu zure txartelak zutabe-klaseetan eta gehitu .row-cols-*edukiontzi nagusi bat karta-sorta birsortzeko (baina lerrokatze sentikorrari buruzko kontrol handiagoarekin).

  • HausturaIgeltseroaren .card-columnsalde erorita. Ikusi #28922 .

  • Haustura.cardOinarritutako akordeoia akordeoi osagai berri batekin ordezkatu da .

  • Testu, kontrol eta adierazle ilunetarako .carousel-darkaldaera berria gehitu da (hondo argiagoetarako aproposa).

  • Karruselaren kontroletarako chevron ikonoak Bootstrap Icons -en SVG berriekin ordezkatu dira .

Itxi botoia

  • HausturaIzen generikoa ez .closeden izenarekin aldatu da..btn-close

  • Itxi botoiek orain HTMLn bat erabiltzen dute background-image(SVG kapsulatua) bat beharrean &times;, eta errazagoa da pertsonalizatzea ahalbidetuz zure marka ukitu beharrik gabe.

  • Kontraste handiagoko baztertzeko ikonoak atzeko plano ilunetan gaitzeko .btn-close-whiteerabiltzen den aldaera berria gehitu da.filter: invert(1)

Tolestu

  • Akordeoientzako korritze aingura kendu da.

  • Aldaera berria .dropdown-menu-darketa lotutako aldagaiak gehitu dira eskari ilunetarako goitibeherako.

  • Aldagai berria gehitu da $dropdown-padding-x.

  • Goitibeherako banatzailea ilundu du kontrastea hobetzeko.

  • HausturaGoitibeherako gertaera guztiak goitibeherako hautagailuaren botoian abiarazten dira eta, ondoren, elementu nagusira igotzen dira.

  • Goitibeherako menuek data-bs-popper="static"atributu bat ezarri dute goitibeherako kokapena estatikoa denean edo goitibeherako nabigazio-barran dagoenean. Hau gure JavaScript-ek gehitzen du eta posizio-estilo pertsonalizatuak erabiltzen laguntzen digu Popperren posizionamendua oztopatu gabe.

  • HausturaGoitibeherako pluginaren aukera jaitsi flipda Popper jatorrizko konfigurazioaren alde. Orain iraultzeko portaera desgaitu dezakezu array huts bat aukerarako fallbackPlacementsirauli aldatzailean pasatuz.

  • Goitibeherako menuetan klik egin daitezke orain automatikoki ixteko portaeraautoClose kudeatzeko aukera berri batekin . Aukera hau erabil dezakezu goitibeherako menuaren barruan edo kanpoan klika onartzeko, interaktiboa izan dadin.

  • Goitibeharrek orain .dropdown-items-tan bilduta onartzen dute <li>.

Jumbotron

Zerrenda taldea

  • nullAldagai berriak gehitu dira font-size, font-weight, coloreta klasean.:hover color.nav-link
  • HausturaNabigazio-barrek edukiontzi bat behar dute orain (tarte-baldintzak eta CSS beharrezkoak nabarmen errazteko).
  • Haustura.activeKlasea jada ezin da s - ri .nav-itemaplikatu, zuzenean aplikatu behar da .nav-links-ri.

Oihalez kanpokoa

Paginazioa

  • Orrialdeketa estekek pertsonalizagarriak dituzte orain, margin-leftertz guztietan dinamikoki biribiltzen direnak elkarrengandik bereizten direnean.

  • s gehitu transitionda orrialderatze esteketan.

Popovers

  • HausturaGure popover txantiloi lehenetsian izena aldatu .arrowda ..popover-arrow

  • Aukerari izena aldatu whiteListzaio allowList.

Spinners

  • Spinners orain prefers-reduced-motion: reduceanimazioak motelduz ohore egiten dute. Ikusi #31882 .

  • Spinerren lerrokadura bertikala hobetu da.

Tostadak

  • Orain tostadak a batean kokatu daitezke kokapen-utilitateen.toast-container laguntzaz .

  • Topariaren iraupen lehenetsia 5 segundora aldatu da.

  • Tostetatik kendu eta funtzioekin s overflow: hiddenegokiekin ordezkatu .border-radiuscalc()

Erreminta-aholkuak

  • HausturaGure tresna-informazio txantiloi lehenetsian izena aldatu .arrowda ..tooltip-arrow

  • HausturaPopper elementuak hobeto kokatzeko balio lehenetsia fallbackPlacementsaldatzen da .['top', 'right', 'bottom', 'left']

  • HausturaAukerari izena aldatu whiteListzaio allowList.

Utilitateak

  • HausturaHainbat utilitate izena aldatu da jabetza logikoen izenen ordez norabide-izenen ordez RTL euskarria gehituta:

    • Izena aldatu .left-*eta .right-*to .start-*eta .end-*.
    • Izena aldatu .float-lefteta .float-rightto .float-starteta .float-end.
    • Izena aldatu .border-lefteta .border-rightto .border-starteta .border-end.
    • Izena aldatu .rounded-lefteta .rounded-rightto .rounded-starteta .rounded-end.
    • Izena aldatu .ml-*eta .mr-*to .ms-*eta .me-*.
    • Izena aldatu .pl-*eta .pr-*to .ps-*eta .pe-*.
    • Izena aldatu .text-lefteta .text-rightto .text-starteta .text-end.

  • HausturaMarjina negatiboak desgaituta daude lehenespenez.

  • Klase berria gehitu da atzealdea elementu gehigarrietan .bg-bodyazkar ezartzeko .<body>

  • Kokapen-utilitate berriak gehitu dira top, right, bottometa left. Balioek 0, 50%, eta 100%propietate bakoitzeko dira.

  • Erabilgarritasun berriak gehitu dira horizontalki edo bertikalki kokatutako elementu absolutuak/finkoak erdiratzeko .translate-middle-x..translate-middle-y

  • border-widthUtilitate berriak gehitu dira .

  • HausturaIzena aldatu .text-monospacezaio .font-monospace.

  • HausturaKendu .text-hideegin da jada erabili behar ez den testua ezkutatzeko metodo zaharkitua delako.

  • .fs-*Utilitateentzako utilitateak gehitu dira font-size(RFS gaituta). Hauek HTML-ren goiburu lehenetsien eskala bera erabiltzen dute (1-6, handitik txikira), eta Sass maparen bidez alda daitezke.

  • HausturaLaburtasuna eta koherentziagatik .font-weight-*utilitateei izena aldatu zaie..fw-*

  • HausturaLaburtasuna eta koherentziagatik .font-style-*utilitateei izena aldatu zaie..fst-*

  • CSS Grid eta flexbox diseinuetarako .d-gridutilitateak eta utilitate berriak gap( ) bistaratzeko gehitu da..gap

  • HausturaKendu .rounded-smeta rounded-lg, eta klaseen eskala berri bat sartu zuen .rounded-0, .rounded-3. Ikusi #31687 .

  • line-heightUtilitate berriak gehitu dira: .lh-1, .lh-sm, .lh-baseeta .lh-lg. Ikusi hemen .

  • Erabilgarritasuna mugitu dugu .d-nonegure CSS-an pisu gehiago emateko beste pantaila-erabilgarritasun batzuen aldean.

  • Laguntzailea hedatu du .visually-hidden-focusableedukiontzietan ere lan egiteko, :focus-within.

Laguntzaileak

  • Haustura Erantzunzko kapsulatze-laguntzaileak izena aldatu dute klase-izen berriekin eta portaera hobetuekin erlazionatzeko laguntzaileak , baita CSS aldagai lagungarri bat ere.

    • Klaseei izena aldatu byzaie xaspektu-erlazioan aldatzeko. Adibidez, .ratio-16by9orain da .ratio-16x9.
    • .embed-responsive-itemeta elementu-taldearen hautatzailea kendu dugu hautatzaile sinpleago baten alde .ratio > *. Ez da klase gehiago behar, eta ratioaren laguntzaileak edozein HTML elementurekin funtzionatzen du orain.
    • Sass mapari izena aldatu $embed-responsive-aspect-ratioszaio $aspect-ratioseta bere balioak sinplifikatu dira, klasearen izena eta ehunekoa key: valuebikote gisa sartzeko.
    • CSS aldagaiak sortu eta sartzen dira Sass mapan balio bakoitzerako. Aldatu --bs-aspect-ratioaldagaia .ratioedozein aspektu-erlazio pertsonalizatua sortzeko .

  • Haustura "Pantaila irakurgailua" klaseak "bisualki ezkutuko" klaseak dira orain .

    • Sass fitxategia honetatik aldatu scss/helpers/_screenreaders.scssdascss/helpers/_visually-hidden.scss
    • Izena aldatu .sr-onlyeta .sr-only-focusableto .visually-hiddeneta.visually-hidden-focusable
    • Izena aldatu sr-only()eta sr-only-focusable()nahastu visually-hidden()eta visually-hidden-focusable().

  • bootstrap-utilities.cssorain gure laguntzaileak ere sartzen dira. Laguntzaileak ez dira gehiago inportatu behar eraikuntza pertsonalizatuetan.

JavaScript

  • JQuery menpekotasuna kendu eta pluginak berridatzi JavaScript arruntean egoteko.

  • HausturaJavaScript plugin guztien datu-atributuak izen-tartea daude orain Bootstrap funtzionaltasuna hirugarrenengandik eta zure kodea bereizten laguntzeko. Adibidez, erabili data-bs-togglebeharrean data-toggle.

  • Plugin guztiek CSS hautatzaile bat onar dezakete orain lehen argumentu gisa. DOM elementu bat edo baliozko edozein CSS hautatzaile pasa dezakezu pluginaren instantzia berri bat sortzeko:

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

  • popperConfigBootstrap-en Popper konfigurazio lehenetsia argumentu gisa onartzen duen funtzio gisa pasa daiteke, konfigurazio lehenetsi hau zure erara batu dezazun. Goitibehitz, popover eta argibideei dagokie.

  • Balio lehenetsia fallbackPlacementsaldatu da ['top', 'right', 'bottom', 'left']Popper elementuak hobeto kokatzeko. Goitibehitz, popover eta argibideei dagokie.

  • Azpimarra kendu da _getInstance()→ bezalako metodo estatiko publikoetatik getInstance().