in English

Migracija na v5

Pratite i pregledajte promjene na Bootstrap izvornim datotekama, dokumentaciji i komponentama kako biste lakše migrirali s v4 na v5.

Na ovoj stranici

v5.2.0

Osvježeni dizajn

Bootstrap v5.2.0 ima suptilno ažuriranje dizajna za pregršt komponenti i svojstava u cijelom projektu, ponajviše kroz rafinirane border-radiusvrijednosti na gumbima i kontrolama obrazaca . Naša dokumentacija također je ažurirana novom početnom stranicom, jednostavnijim izgledom dokumenata koji više ne sažima dijelove bočne trake i istaknutijim primjerima Bootstrap ikona .

Više CSS varijabli

Ažurirali smo sve naše komponente za korištenje CSS varijabli. Dok Sass i dalje podupire sve, svaka je komponenta ažurirana kako bi uključila CSS varijable na osnovnim klasama komponenti (npr., .btn), što omogućuje veću prilagodbu Bootstrapa u stvarnom vremenu. U narednim izdanjima nastavit ćemo proširivati našu upotrebu CSS varijabli na naš izgled, obrasce, pomoćne programe i uslužne programe. Pročitajte više o CSS varijablama u svakoj komponenti na odgovarajućim stranicama dokumentacije.

Upotreba naše CSS varijable bit će donekle nepotpuna do Bootstrapa 6. Iako bismo ih voljeli u potpunosti implementirati u cijelosti, postoji rizik od prouzročenja neispravnih promjena. Na primjer, postavka $alert-border-width: var(--bs-border-width)u našem izvornom kodu prekida potencijalni Sass u vašem vlastitom kodu ako ste radili $alert-border-width * 2iz nekog razloga.

Kao takvi, gdje god je to moguće, nastavit ćemo se zalagati za više CSS varijabli, ali imajte na umu da bi naša implementacija mogla biti malo ograničena u verziji 5.

Novi`_maps.scss`

Bootstrap v5.2.0 predstavio je novu Sass datoteku s _maps.scss. Izvlači nekoliko Sass mapa _variables.scsskako bi riješio problem u kojem ažuriranja izvorne karte nisu primijenjena na sekundarne karte koje ih proširuju. Na primjer, ažuriranja za $theme-colorsnisu primjenjivana na druge tematske karte koje su se oslanjale na $theme-colors, prekidajući ključne tijekove rada prilagodbe. Ukratko, Sass ima ograničenje gdje se jednom kada se zadana varijabla ili mapa koriste , ne mogu ažurirati. Postoji sličan nedostatak kod CSS varijabli kada se koriste za sastavljanje drugih CSS varijabli.

Zbog toga prilagodbe varijabli u Bootstrapu moraju doći nakon @import "functions", ali prije @import "variables"ostatka našeg uvoznog skupa. Isto se odnosi i na Sass mape—morate nadjačati zadane postavke prije nego što se počnu koristiti. Sljedeće su karte premještene na novu verziju _maps.scss:

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

Vaše prilagođene Bootstrap CSS verzije sada bi trebale izgledati otprilike ovako s zasebnim uvozom karata.

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

Nove komunalije

Prošireni font-weightpomoćni programi za uključivanje .fw-semiboldpolupodebljanih fontova.
Prošireni border-radiususlužni programi koji uključuju dvije nove veličine .rounded-4i .rounded-5, za više opcija.

Dodatne izmjene

Uvedena nova $enable-container-classesopcija. — Sada kada odaberete eksperimentalni CSS Grid raspored, .container-*klase će se i dalje kompilirati, osim ako je ova opcija postavljena na false. Kontejneri također sada zadržavaju svoje vrijednosti oluka.
Offcanvas komponenta sada ima responzivne varijacije . Izvorna .offcanvasklasa ostaje nepromijenjena—sakriva sadržaj u svim prozorima. Da bi bio osjetljiv, promijenite tu .offcanvasklasu u bilo koju .offcanvas-{sm|md|lg|xl|xxl}klasu.
Deblje pregrade za stol sada su izborne. — Uklonili smo deblju granicu između grupa tablica koju je teže nadjačati i premjestili je u neobaveznu klasu koju možete primijeniti, .table-group-divider. Za primjer pogledajte dokumente tablice.
Scrollspy je ponovno napisan za korištenje Intersection Observer API -ja , što znači da više ne trebate relativne nadređene omote, zastarjelaoffsetkonfiguracija i više. Potražite da vaše Scrollspy implementacije budu preciznije i dosljednije u isticanju navigacije.
Skočni prozori i opisi sada koriste CSS varijable. Neke CSS varijable su ažurirane u odnosu na svoje Sass varijable kako bi se smanjio broj varijabli. Kao rezultat toga, tri varijable su zastarjele u ovom izdanju: $popover-arrow-color, $popover-arrow-outer-colori $tooltip-arrow-color.
Dodani novi .text-bg-{color}pomagači. Umjesto postavljanja pojedinačnih .text-*i .bg-*uslužnih programa, sada možete koristiti pomoćnike.text-bg-* za postavljanje background-colors kontrastnim prednjim planomcolor .
Dodan .form-check-reversemodifikator za promjenu redoslijeda oznaka i povezanih potvrdnih okvira/radioaparata.
Dodana je podrška za prugaste stupce tablicama putem nove .table-striped-columnsklase.

Za potpuni popis promjena pogledajte projekt v5.2.0 na GitHubu .

v5.1.0

Dodana je eksperimentalna podrška za CSS Grid raspored . — Ovo je u tijeku i još nije spremno za proizvodnu upotrebu, ali možete se uključiti u novu značajku putem Sassa. Da biste ga omogućili, onemogućite zadanu rešetku postavljanjem $enable-grid-classes: falsei omogućite CSS mrežu postavljanjem $enable-cssgrid: true.
Ažurirane navigacijske trake za podršku offcanvas. — Dodajte offcanvas ladice u bilo koju navigacijsku traku s responzivnim .navbar-expand-*klasama i nekim offcanvas oznakama.
Dodana nova komponenta rezerviranog mjesta . — Naša najnovija komponenta, način pružanja privremenih blokada umjesto stvarnog sadržaja kako bi se pokazalo da se nešto još uvijek učitava na vašoj web-lokaciji ili u aplikaciji.
Dodatak za sažimanje sada podržava horizontalno sažimanje . — Dodajte .collapse-horizontalsvome .collapseza sažimanje widthumjesto height. Izbjegnite ponovno slikanje preglednika postavljanjem min-heightili height.
Dodani su novi pomoćnici za skup i vertikalna pravila. — Brzo primijenite višestruka svojstva flexboxa za brzo stvaranje prilagođenih izgleda s nizovima . Odaberite između horizontalnih ( .hstack) i okomitih ( .vstack) nizova. Dodajte okomite razdjelnike slične <hr>elementima s novim .vrpomoćnicima .
Dodane su nove globalne :rootCSS varijable. — Dodano nekoliko novih CSS varijabli na :rootrazinu za kontrolu <body>stilova. Još ih se radi, uključujući naše pomoćne programe i komponente, ali za sada pročitajte CSS varijable u odjeljku Prilagodba .
Prerađeni uslužni programi za boju i pozadinu za korištenje CSS varijabli i dodani novi uslužni programi za neprozirnost teksta i pozadinu . — .text-* a .bg-*uslužni programi sada su izgrađeni s CSS varijablama i rgba()vrijednostima boja, što vam omogućuje jednostavno prilagođavanje bilo kojeg uslužnog programa s novim uslužnim programima neprozirnosti.
Dodani su novi primjeri isječaka koji pokazuju kako prilagoditi naše komponente. — Povucite spremne za korištenje prilagođenih komponenti i drugih uobičajenih obrazaca dizajna s našim novim primjerima isječaka . Uključuje podnožje , padajuće izbornike , grupe popisa i modale .
Uklonjeni su nekorišteni stilovi pozicioniranja iz skočnih prozora i opisa jer njima upravlja isključivo Popper. $tooltip-marginje zastario i postavljen na nullu procesu.

Želite više informacija? Pročitajte post na blogu v5.1.0.

Bok tamo! Promjene našeg prvog velikog izdanja Bootstrapa 5, v5.0.0, dokumentirane su u nastavku. Oni ne odražavaju gore prikazane dodatne promjene.

Ovisnosti

Odbačen jQuery.
Nadograđen s Popper v1.x na Popper v2.x.
Libsass je zamijenjen s Dart Sass jer je naš Sass prevodilac dao Libsass zastario.
Migrirao s Jekylla na Huga za izradu naše dokumentacije

Podrška za preglednik

Izbačen Internet Explorer 10 i 11
Odbačen Microsoft Edge < 16 (Legacy Edge)
Odbačen Firefox < 60
Odbačen Safari < 12
Odbačen iOS Safari < 12
Izbačen Chrome < 60

Promjene dokumentacije

Redizajnirana početna stranica, izgled dokumenata i podnožje.
Dodan novi vodič za parcele .
Dodan je novi odjeljak Customize , zamjenjujući stranicu Theming verzije v4 , s novim detaljima o Sass-u, opcijama globalne konfiguracije, shemama boja, CSS varijablama i više.
Reorganizirao svu dokumentaciju obrasca u novi odjeljak Obrasci , rastavljajući sadržaj na fokusiranije stranice.
Slično tome, ažuriran je odjeljak Izgled kako bi se jasnije razradio sadržaj mreže.
Stranica komponente "Navigacije" preimenovana je u "Navigacije i kartice".
Stranica "Čekovi" preimenovana u "Čekovi i radio".
Redizajnirana je navigacijska traka i dodana nova podnavigacija kako bi se lakše snalazili u verzijama naših stranica i dokumenata.
Dodan novi tipkovnički prečac za polje za pretraživanje: Ctrl + /.

Sass

Odbacili smo zadana spajanja Sass karte kako bismo olakšali uklanjanje suvišnih vrijednosti. Imajte na umu da sada morate definirati sve vrijednosti u Sass mapama poput $theme-colors. Provjerite kako se nositi sa Sass kartama .
Razbijanjecolor-yiq()Funkcija i povezane varijable su preimenovane u color-contrast()jer više nisu povezane s YIQ prostorom boja. Vidi #30168.
- $yiq-contrasted-thresholdje preimenovan u $min-contrast-ratio.
- $yiq-text-darki $yiq-text-lightredom su preimenovani u $color-contrast-darki $color-contrast-light.
RazbijanjeParametri miksina medijskih upita su promijenjeni radi logičnijeg pristupa.
- media-breakpoint-down()koristi samu prijelomnu točku umjesto sljedeće prijelomne točke (npr. media-breakpoint-down(lg)umjesto media-breakpoint-down(md)ciljanih prozora manjih od lg).
- Slično, drugi parametar u media-breakpoint-between()također koristi samu prijelomnu točku umjesto sljedeće prijelomne točke (npr. media-between(sm, lg)umjesto media-breakpoint-between(sm, md)ciljnih prozora između smi lg).
RazbijanjeUklonjeni stilovi ispisa i $enable-print-stylesvarijable. Časovi za prikaz ispisa još uvijek postoje. Vidi #28339 .
RazbijanjeIspuštene color(), theme-color(), i gray()funkcije u korist varijabli. Vidi #29083 .
Razbijanjetheme-color-level()Funkcija je preimenovana u color-level()i sada prihvaća bilo koju boju koju želite umjesto samo $theme-colorboja. Vidi #29083 Pazi: color-level() kasnije je ubačen u v5.0.0-alpha3.
RazbijanjePreimenovano $enable-prefers-reduced-motion-media-queryi $enable-pointer-cursor-for-buttonsu $enable-reduced-motioni $enable-button-pointersradi kratkoće.
RazbijanjeUklonio bg-gradient-variant()mixin. Koristite .bg-gradientklasu za dodavanje gradijenata elementima umjesto generiranih .bg-gradient-*klasa.
Razbijanje Uklonjeni prethodno zastarjeli miksini:
- hover, hover-focus, plain-hover-focus, ihover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(također izbačena povezana klasa korisnosti, .text-hide)
- visibility()
- form-control-focus()
Razbijanjescale-color()Funkcija je preimenovana u shift-color()kako bi se izbjegla kolizija sa Sassovom vlastitom funkcijom skaliranja boja.
box-shadowmixins sada dopuštaju nullvrijednosti i ispuštaju noneiz više argumenata. Vidi #30394 .
Mixin border-radius()sada ima zadanu vrijednost.

Sustav boja

Sustav boja koji je funkcionirao color-level()i $theme-color-intervaluklonjen je u korist novog sustava boja. Sve funkcije lighten()i darken()u našoj bazi kodova zamijenjene su s tint-color()i shade-color(). Ove će funkcije miješati boju s bijelom ili crnom umjesto da mijenjaju njezinu svjetlinu za fiksni iznos. Boju shift-color()će nijansirati ili zasjeniti ovisno o tome je li njezin parametar težine pozitivan ili negativan. Pogledajte #30622 za više detalja.
Dodane su nove nijanse i nijanse za svaku boju, pružajući devet zasebnih boja za svaku osnovnu boju, kao nove Sass varijable.
Poboljšan kontrast boja. Omjer kontrasta boja povećan s 3:1 na 4,5:1 i ažurirane plava, zelena, cijan i ružičasta boja kako bi se osigurao WCAG 2.1 AA kontrast. Također smo promijenili našu boju kontrasta u boji iz $gray-900u $black.
Kako bismo podržali naš sustav boja, dodali smo nove prilagođene funkcije tint-color()i shade-color()funkcije za odgovarajuće miješanje boja.

Ažuriranja mreže

Nova prijelomna točka! Dodana nova xxlprijelomna točka za 1400pxi gore. Nema promjena na svim drugim prijelomnim točkama.
Poboljšani oluci. Oluci su sada postavljeni u remsima i uži su od v4 ( 1.5rem, ili oko 24px, prema dolje od 30px). Ovo usklađuje oluke našeg mrežnog sustava s našim razmacima.
- Dodana nova klasa oluka ( .g-*, .gx-*, i .gy-*) za kontrolu vodoravnih/okomitih oluka, vodoravnih oluka i okomitih oluka.
- RazbijanjePreimenovano .no-guttersu kako .g-0bi odgovaralo novim uslužnim programima oluka.
Stupci se više ne position: relativeprimjenjuju, pa ćete možda morati dodati .position-relativeneke elemente da vratite to ponašanje.
RazbijanjeIzbačeno je nekoliko .order-*klasa koje su često ostale neiskorištene. Sada pružamo samo .order-1izvan .order-5kutije.
RazbijanjeIzostavljena .mediakomponenta jer se može lako replicirati pomoću uslužnih programa. Pogledajte #28265 i stranicu flex pomoćnih programa za primjer .
Razbijanje bootstrap-grid.csssada se primjenjuje samo box-sizing: border-boxna stupac umjesto resetiranja globalne veličine okvira. Na taj se način naši stilovi rešetki mogu koristiti na više mjesta bez smetnji.
$enable-grid-classesviše ne onemogućuje generiranje klasa spremnika. Vidi #29146.
Miksin je ažuriran make-colna zadane jednake stupce bez navedene veličine.

Sadržaj, ponovno pokretanje itd

RFS je sada omogućen prema zadanim postavkama. Naslovi koji koristefont-size()mixin automatski će se prilagoditifont-sizeveličini s okvirom za prikaz. Ova je značajka prethodno bila uključena s v4.
RazbijanjePregledali smo našu tipografiju zaslona kako bismo zamijenili naše $display-*varijable i $display-font-sizesSass mapom. Također su uklonjene pojedinačne $display-*-weightvarijable za jednu $display-font-weighti prilagođenu font-sizes.
Dodane su dvije nove .display-*veličine naslova .display-5i .display-6.
Veze su prema zadanim postavkama podcrtane (ne samo kada lebde), osim ako nisu dio određenih komponenti.
Redizajnirane tablice kako bi se osvježili njihovi stilovi i ponovno izgradile s CSS varijablama za veću kontrolu nad stilom.
RazbijanjeUgniježđene tablice više ne nasljeđuju stilove.
Razbijanje .thead-lighti .thead-darkodbačeni su u korist .table-*varijantnih klasa koje se mogu koristiti za sve elemente tablice ( thead, tbody, tfoot, tri ) th.td
RazbijanjeMiksin table-row-variant()je preimenovan u table-variant()i prihvaća samo 2 parametra: $color(naziv boje) i $value(kod boje). Boja ruba i boje akcenta automatski se izračunavaju na temelju faktorskih varijabli tablice.
Podijelite varijable za punjenje ćelija tablice u -yi -x.
RazbijanjePao .pre-scrollablerazred. Vidi #29135
Razbijanje .text-*pomoćni programi vezama više ne dodaju stanja lebdenja i fokusa. .link-*umjesto toga mogu se koristiti pomoćne klase. Vidi #29267
RazbijanjePao .text-justifyrazred. Vidi #29793
Razbijanje <hr>elementi sada koriste heightumjesto borderza bolju podršku sizeatributu. To također omogućuje korištenje uslužnih programa za podstavu za stvaranje debljih razdjelnika (npr. <hr class="py-1">).
Vrati zadane vodoravne padding-leftna <ul>i <ol>elemente iz preglednika zadane 40pxna 2rem.
Dodano $enable-smooth-scroll, koje se primjenjuje scroll-behavior: smoothglobalno—osim za korisnike koji traže smanjeno kretanje putem prefers-reduced-motionmedijskog upita. Vidi #31877

RTL

Varijable specifične za vodoravni smjer, pomoćni programi i miksini svi su preimenovani kako bi koristili logička svojstva poput onih koja se nalaze u flexbox rasporedima—npr., starti endumjesto lefti right.

Obrasci

Dodani novi plutajući obrasci! Promaknuli smo primjer plutajućih naljepnica u potpuno podržane komponente obrazaca. Pogledajte novu stranicu s plutajućim naljepnicama.
Razbijanje Konsolidirani izvorni i prilagođeni elementi obrasca. Potvrdni okviri, radio, odabiri i drugi ulazi koji su imali izvorne i prilagođene klase u v4 su konsolidirani. Sada su gotovo svi naši elementi obrasca potpuno prilagođeni, većina bez potrebe za prilagođenim HTML-om.
- .custom-control.custom-checkboxje sada .form-check.
- .custom-control.custom-custom-radioje sada .form-check.
- .custom-control.custom-switchje sada .form-check.form-switch.
- .custom-selectje sada .form-select.
- .custom-filei .form-filezamijenjeni su prilagođenim stilovima na vrhu .form-control.
- .custom-rangeje sada .form-range.
- Ispao izvorni .form-control-filei .form-control-range.
RazbijanjeIspustio .input-group-appendi .input-group-prepend. Sada možete samo dodati gumbe i .input-group-textkao izravnu djecu ulaznih grupa.
Dugotrajni nedostajući granični radijus na ulaznoj grupi s povratnim informacijama o validaciji konačno je popravljen dodavanjem dodatne .has-validationklase ulaznim grupama s validacijom.
Razbijanje Izbačene su klase rasporeda specifične za obrazac za naš mrežni sustav. Koristite našu mrežu i pomoćne programe umjesto .form-group, .form-row, ili .form-inline.
RazbijanjeOznake obrazaca sada zahtijevaju .form-label.
Razbijanje .form-textviše ne postavlja display, što vam omogućuje da stvorite ugrađeni ili blokirani tekst pomoći po želji jednostavnom promjenom HTML elementa.
Kontrole obrasca više se ne koriste fiksne heightkada je to moguće, već se odgađaju min-heightradi poboljšanja prilagodbe i kompatibilnosti s drugim komponentama.
Ikone za provjeru valjanosti više se ne primjenjuju na <select>s s multiple.
Preuređene izvorne Sass datoteke pod scss/forms/, uključujući stilove ulaznih grupa.

Komponente

Objedinjene paddingvrijednosti za upozorenja, putove, kartice, padajuće liste, grupe popisa, modale, skočne prozore i opise koji se temelje na našoj $spacervarijabli. Vidi #30564 .

Harmonika

Dodana nova komponenta harmonike .

upozorenja

Upozorenja sada imaju primjere s ikonama .
Uklonjeni su prilagođeni stilovi za <hr>s u svakom upozorenju jer već koriste currentColor.

Značke

RazbijanjeIspuštene su sve .badge-*klase boja za pozadinske pomoćne programe (npr. upotrijebi .bg-primaryumjesto .badge-primary).
RazbijanjeIspušteno .badge-pill— .rounded-pillumjesto toga koristite pomoćni program.
RazbijanjeUklonjeni su stilovi lebdenja i fokusa za <a>i <button>elemente.
Povećano zadano punjenje za značke od .25em/ .5emdo .35em/ .65em.

Krušne mrvice

Pojednostavljen je zadani izgled puteva kroz koje smo uklonili padding, background-colori border-radius.
Dodano je novo CSS prilagođeno svojstvo --bs-breadcrumb-dividerza jednostavno prilagođavanje bez potrebe za ponovnim kompajliranjem CSS-a.

Gumbi

Razbijanje Gumbi za prebacivanje , s potvrdnim okvirima ili radijima, više ne zahtijevaju JavaScript i imaju nove oznake. Više nam nije potreban element za omatanje, dodajte.btn-checku<input>, i uparite ga s bilo kojom.btnklasom na<label>. Vidi #30650 . Dokumenti za to premješteni su s naše stranice Gumbi u novi odjeljak Obrasci.
Razbijanje Odbačeno .btn-blockzbog režija. Umjesto da ih koristite .btn-blockna .btn, omotajte svoje gumbe s .d-gridi .gap-*uslužnim programom da ih razmaknete po potrebi. Prebacite se na responzivne razrede za još veću kontrolu nad njima. Pročitajte dokumente za neke primjere.
Ažurirani su naši button-variant()i button-outline-variant()mixini za podršku dodatnim parametrima.
Ažurirani gumbi kako bi se osigurao povećani kontrast pri lebdenju i aktivnim stanjima.
Onemogućeni gumbi sada imaju pointer-events: none;.

Kartica

RazbijanjeOdbačeno .card-decku korist naše mreže. Zamotajte svoje karte u klase stupaca i dodajte nadređeni .row-cols-*spremnik za ponovno stvaranje špilova karata (ali s više kontrole nad responzivnim poravnavanjem).
RazbijanjeOdbačeno .card-columnsu korist masonerije. Vidi #28922 .
RazbijanjeZamijenjena temeljna .cardharmonika novom komponentom harmonike .

Karusel

Dodana je nova .carousel-darkvarijanta za tamni tekst, kontrole i indikatore (izvrsno za svjetlije pozadine).
Ikone ševrona za kontrole vrtuljka zamijenjene su novim SVG-ovima iz Bootstrap ikona .

Gumb za zatvaranje

RazbijanjePreimenovano .closeu .btn-closeza manje generičko ime.
Gumbi za zatvaranje sada koriste background-image(ugrađeni SVG) umjesto a ×u HTML-u, što omogućuje lakšu prilagodbu bez potrebe za dodirivanjem vaših oznaka.
Dodana je nova .btn-close-whitevarijanta koja se koristi filter: invert(1)za omogućavanje ikona za odbacivanje većeg kontrasta na tamnijoj pozadini.

Kolaps

Uklonjeno sidrenje pomicanja za harmonike.

padajuće liste

Dodana je nova .dropdown-menu-darkvarijanta i povezane varijable za tamne padajuće izbornike na zahtjev.
Dodana je nova varijabla za $dropdown-padding-x.
Zatamnio padajući razdjelnik radi poboljšanog kontrasta.
RazbijanjeSvi događaji za padajući izbornik sada se pokreću na padajućem gumbu za uključivanje i zatim se prikazuju u obliku mjehurića do nadređenog elementa.
Padajući izbornici sada imaju postavljen data-bs-popper="static"atribut kada je pozicioniranje padajućeg izbornika statično ili se padajući izbornik nalazi u navigacijskoj traci. Ovo dodaje naš JavaScript i pomaže nam da koristimo prilagođene stilove položaja bez ometanja Popperovog pozicioniranja.
RazbijanjeIzbačena flipopcija za padajući dodatak u korist izvorne Popper konfiguracije. Sada možete onemogućiti ponašanje okretanja prosljeđivanjem praznog polja za fallbackPlacementsopciju u modifikatoru okretanja .
Padajući izbornici sada se mogu kliknuti s novom autoCloseopcijom za rukovanje ponašanjem automatskog zatvaranja . Ovu opciju možete koristiti za prihvaćanje klika unutar ili izvan padajućeg izbornika kako biste ga učinili interaktivnim.
Padajući izbornici sada podržavaju .dropdown-items omotane u <li>s.

Jumbotron

RazbijanjeIzbačena je jumbotron komponenta jer se može replicirati s uslužnim programima. Pogledajte naš novi Jumbotron primjer za demo.

Grupa popisa

Dodan novi .list-group-numberedmodifikator grupama popisa.

Navigacije i kartice

Klasi su dodane nove nullvarijable za font-size, font-weight, colori .:hover color.nav-link

Navigacijske trake

RazbijanjeNavigacijske trake sada zahtijevaju spremnik unutar (kako bi se drastično pojednostavili zahtjevi za razmakom i potreban CSS).
RazbijanjeKlasa .activese više ne može primijeniti na .nav-items, mora se primijeniti izravno na .nav-links.

Offcanvas

Dodana je nova komponenta offcanvas .

Paginacija

Veze za označavanje stranica sada imaju mogućnosti prilagođavanja margin-leftkoje su dinamički zaobljene na svim kutovima kada su odvojene jedna od druge.
Dodano transitions vezama za označavanje stranica.

Popovers

RazbijanjePreimenovano .arrowu .popover-arrowu našem zadanom skočnom predlošku.
whiteListOpcija je preimenovana u allowList.

Vrtilice

Spineri sada poštuju prefers-reduced-motion: reduceusporavanjem animacija. Vidi #31882 .
Poboljšano okomito poravnanje spinera.

Zdravice

Tostovi se sada mogu postaviti u .toast-containeruz pomoć uslužnih programa za pozicioniranje .
Zadano trajanje zdravice promijenjeno je na 5 sekundi.
Uklonjeno overflow: hiddeniz tosta i zamijenjeno ispravnim border-radiuss calc()funkcijama.

Opisi alata

RazbijanjePreimenovano .arrowu .tooltip-arrowu našem zadanom predlošku opisa alata.
RazbijanjeZadana vrijednost za fallbackPlacementspromijenjena je u ['top', 'right', 'bottom', 'left']radi boljeg postavljanja popper elemenata.
RazbijanjewhiteListOpcija je preimenovana u allowList.

Komunalije

RazbijanjePreimenovano je nekoliko uslužnih programa da koriste nazive logičkih svojstava umjesto usmjerenih naziva uz dodatak RTL podrške:
- Preimenovano .left-*i .right-*u .start-*i .end-*.
- Preimenovano .float-lefti .float-rightu .float-starti .float-end.
- Preimenovano .border-lefti .border-rightu .border-starti .border-end.
- Preimenovano .rounded-lefti .rounded-rightu .rounded-starti .rounded-end.
- Preimenovano .ml-*i .mr-*u .ms-*i .me-*.
- Preimenovano .pl-*i .pr-*u .ps-*i .pe-*.
- Preimenovano .text-lefti .text-rightu .text-starti .text-end.
RazbijanjePrema zadanim postavkama onemogućene negativne margine.
Dodana nova .bg-bodyklasa za brzo postavljanje <body>pozadine dodatnih elemenata.
Dodani novi pomoćni programi za položaj za top, right, bottomi left. Vrijednosti uključuju 0, 50%i 100%za svako svojstvo.
Dodani novi .translate-middle-xi .translate-middle-ypomoćni programi za vodoravno ili okomito centriranje apsolutno/fiksno pozicioniranih elemenata.
Dodani novi border-widthuslužni programi .
RazbijanjePreimenovano .text-monospaceu .font-monospace.
RazbijanjeUklonjeno .text-hidejer je to zastarjela metoda za skrivanje teksta koja se više ne bi trebala koristiti.
Dodani .fs-*pomoćni programi za font-sizepomoćne programe (s omogućenim RFS-om). Oni koriste istu ljestvicu kao i HTML-ovi zadani naslovi (1-6, veliki prema malim) i mogu se mijenjati putem Sass karte.
RazbijanjePreimenovani .font-weight-*uslužni programi .fw-*radi sažetosti i dosljednosti.
RazbijanjePreimenovani .font-style-*uslužni programi .fst-*radi sažetosti i dosljednosti.
Dodano u pomoćne .d-gridprograme za prikaz i nove pomoćne gapprograme ( .gap) za CSS Grid i flexbox rasporede.
RazbijanjeUklonjeni su .rounded-smi rounded-lg, i uvedena nova ljestvica razreda, .rounded-0na .rounded-3. Vidi #31687 .
Dodani novi uslužni programi line-height: .lh-1, .lh-smi .lh-base. .lh-lgPogledajte ovdje .
Premjestili smo .d-nonepomoćni program u naš CSS kako bismo mu dali veću težinu u odnosu na druge pomoćne programe za prikaz.
Pomoćnik je proširen .visually-hidden-focusableza rad na spremnicima, koristeći :focus-within.

Pomagači

Razbijanje Responzivni pomoćnici za ugradnju preimenovani su u pomoćnike omjera s novim nazivima klasa i poboljšanim ponašanjem, kao i korisnom CSS varijablom.
- Klase su preimenovane kako bi promijenile byomjer xslike. Na primjer, .ratio-16by9sada je .ratio-16x9.
- Odbacili smo .embed-responsive-itemselektor grupe elemenata i u korist jednostavnijeg .ratio > *selektora. Nije potrebna više klasa, a pomoćnik omjera sada radi s bilo kojim HTML elementom.
- Sass karta je $embed-responsive-aspect-ratiospreimenovana u $aspect-ratiosi njene vrijednosti su pojednostavljene kako bi uključile naziv klase i postotak kao key: valuepar.
- CSS varijable sada su generirane i uključene za svaku vrijednost u Sass mapi. Izmijenite --bs-aspect-ratiovarijablu na da .ratiobiste stvorili bilo koji prilagođeni omjer slike .
Razbijanje Klase "čitača zaslona" sada su "vizualno skrivene" klase .
- Sass datoteka je promijenjena iz scss/helpers/_screenreaders.scssuscss/helpers/_visually-hidden.scss
- Preimenovano .sr-onlyi .sr-only-focusableu .visually-hiddeni.visually-hidden-focusable
- Preimenovano sr-only()i sr-only-focusable()miješa se u visually-hidden()i visually-hidden-focusable().
bootstrap-utilities.csssada uključuje i naše pomagače. Pomoćnike više nije potrebno uvoziti u prilagođene gradnje.

JavaScript

Odbačena je ovisnost o jQueryju i prepravljeni dodaci da budu u uobičajenom JavaScriptu.
RazbijanjeAtributi podataka za sve JavaScript dodatke sada imaju prostor imena kako bi pomogli razlikovati Bootstrap funkcionalnost od trećih strana i vašeg vlastitog koda. Na primjer, koristimo data-bs-toggleumjesto data-toggle.
Svi dodaci sada mogu prihvatiti CSS selektor kao prvi argument. Možete proslijediti DOM element ili bilo koji važeći CSS selektor za stvaranje nove instance dodatka:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigmože se proslijediti kao funkcija koja prihvaća Bootstrapovu zadanu Popper konfiguraciju kao argument, tako da možete spojiti ovu zadanu konfiguraciju na svoj način. Primjenjuje se na padajuće izbornike, skočne prozore i opise alata.
Zadana vrijednost za fallbackPlacementspromijenjena je u ['top', 'right', 'bottom', 'left']radi boljeg postavljanja Popper elemenata. Primjenjuje se na padajuće izbornike, skočne prozore i opise alata.
Uklonjena podvlaka iz javnih statičkih metoda poput _getInstance()→ getInstance().