in English

Migracija na v5

Pratite i pregledajte promjene izvornih datoteka Bootstrapa, dokumentacije i komponenti koje će vam pomoći da pređete sa v4 na v5.

Na ovoj stranici

v5.2.0

Osvježen dizajn

Bootstrap v5.2.0 sadrži suptilno ažuriranje dizajna za pregršt komponenti i svojstava u cijelom projektu, posebno kroz rafinirane border-radiusvrijednosti na dugmadima i kontrolama obrasca . Naša dokumentacija je također 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 da koriste CSS varijable. Iako Sass još uvijek podupire sve, svaka komponenta je ažurirana kako bi uključila CSS varijable u osnovne klase komponenti (npr. .btn), što omogućava više prilagođavanja Bootstrapa u realnom vremenu. U narednim izdanjima, nastavit ćemo širiti našu upotrebu CSS varijabli u naš izgled, obrasce, pomoćnike i uslužne programe. Pročitajte više o CSS varijablama u svakoj komponenti na njihovim odgovarajućim stranicama dokumentacije.

Naša upotreba CSS varijable će biti pomalo nepotpuna sve do Bootstrapa 6. Iako bismo voljeli da ih u potpunosti implementiramo u cijelosti, postoji rizik od prouzročenja neograničenih promjena. Na primjer, postavljanje $alert-border-width: var(--bs-border-width)u naš izvorni kod razbija potencijalni Sass u vašem vlastitom kodu ako ste to 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 naša implementacija može biti malo ograničena u v5.

Novo`_maps.scss`

Bootstrap v5.2.0 je predstavio novi Sass fajl sa _maps.scss. Izvlači nekoliko Sass mapa _variables.scssda bi riješio problem gdje ažuriranja originalne karte nisu primijenjena na sekundarne karte koje ih proširuju. Na primjer, ažuriranja se $theme-colorsnisu primjenjivala na druge mape tema koje su se oslanjale na $theme-colors, što je prekinulo ključne tokove rada prilagođavanja. Ukratko, Sass ima ograničenje gdje se jednom kada se koristi zadana varijabla ili mapa , ne može ažurirati. Postoji sličan nedostatak sa CSS varijablama kada se koriste za sastavljanje drugih CSS varijabli.

Zbog toga prilagođavanja varijabli u Bootstrapu moraju doći nakon @import "functions", ali prije @import "variables"i ostatka našeg uvoznog steka. Isto se odnosi i na Sass mape—morate poništiti zadane postavke prije nego što se koriste. Sljedeće mape su premještene na novi _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 bi sada trebale izgledati otprilike ovako sa zasebnim uvozom mapa.

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

Novi uslužni programi

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

Dodatne promjene

Uvedena nova $enable-container-classesopcija. — Sada kada se uključite u eksperimentalni CSS Grid izgled, .container-*klase će i dalje biti kompajlirane, osim ako je ova opcija postavljena na false. Kontejneri također sada zadržavaju svoje vrijednosti oluka.
Offcanvas komponenta sada ima prilagodljive varijacije . Originalna .offcanvasklasa ostaje nepromijenjena—sakriva sadržaj u svim okvirima za prikaz. Da biste ga učinili responzivnim, promijenite tu .offcanvasklasu u bilo koju .offcanvas-{sm|md|lg|xl|xxl}klasu.
Deblji razdjelnici stolova su sada uključeni. — Uklonili smo deblju i teže za zaobići granicu između grupa tablica i premjestili je u neobaveznu klasu koju možete primijeniti, .table-group-divider. Pogledajte dokumente u tabeli za primjer.
Scrollspy je prepisan da koristi Intersection Observer API , što znači da vam više nisu potrebni relativni roditeljski omoti, zastarjelaoffsetkonfiguracija i još mnogo toga. Potražite svoje Scrollspy implementacije kako bi bile preciznije i dosljednije u njihovom navigacijskom isticanje.
Popovers i tooltips sada koriste CSS varijable. Neke CSS varijable su ažurirane od svojih Sass kolega kako bi se smanjio broj varijabli. Kao rezultat toga, tri varijable su zastarjele u ovom izdanju: $popover-arrow-color, $popover-arrow-outer-color, i $tooltip-arrow-color.
Dodani novi .text-bg-{color}pomoćnici. Umjesto postavljanja pojedinačnih .text-*i uslužnih programa, sada možete.bg-* koristiti pomoćnike.text-bg-* za postavljanje background-colors kontrastnim prednjim planom color.
Dodan .form-check-reversemodifikator za okretanje redoslijeda oznaka i povezanih potvrdnih okvira/radija.
Dodata podrška prugastih kolona u tabele preko nove .table-striped-columnsklase.

Za kompletnu listu promjena, pogledajte projekat v5.2.0 na GitHubu .

v5.1.0

Dodata eksperimentalna podrška za CSS Grid izgled . — Ovo je rad u toku i još nije spreman za proizvodnu upotrebu, ali se možete uključiti u novu funkciju putem Sass-a. Da biste ga omogućili, onemogućite zadanu mrežu postavljanjem $enable-grid-classes: falsei omogućite CSS mrežu postavljanjem $enable-cssgrid: true.
Ažurirane navigacijske trake da podrže offcanvas. — Dodajte ladice van platna u bilo koju navigacijsku traku s responzivnim .navbar-expand-*klasama i nekim oznakama van platna.
Dodata nova komponenta čuvara mjesta . — Naša najnovija komponenta, način pružanja privremenih blokova umjesto stvarnog sadržaja kako bi se naznačilo da se nešto još uvijek učitava na vašoj web lokaciji ili u aplikaciji.
Dodatak Collapse sada podržava horizontalno sažimanje . — Dodajte .collapse-horizontalu svoj .collapseza sažimanje widthumjesto height. Izbjegnite ponovno bojenje pretraživača postavljanjem min-heightili height.
Dodan novi stek i pomoćnici vertikalnih pravila. — Brzo primijenite višestruka svojstva flexbox-a za brzo kreiranje prilagođenih izgleda sa stekovima . Birajte između horizontalnih ( .hstack) i okomitih ( .vstack) snopova. Dodajte vertikalne razdjelnike slične <hr>elementima s novim .vrpomoćnicima .
Dodane nove globalne :rootCSS varijable. — Dodano nekoliko novih CSS varijabli na :rootnivo za kontrolu <body>stilova. Više je u izradi, uključujući naše uslužne programe i komponente, ali za sada pročitajte CSS varijable u odjeljku Prilagodi .
Revidirani su uslužni programi za boje i pozadinu za korištenje CSS varijabli, te dodani novi uslužni programi za neprozirnost teksta i neprozirnost pozadine . — .text-* a .bg-*uslužni programi su sada izgrađeni sa CSS varijablama i rgba()vrijednostima boja, što vam omogućava da lako prilagodite bilo koji uslužni program novim uslužnim programima za neprozirnost.
Dodani su novi primjeri isječaka koji pokazuju kako prilagoditi naše komponente. — Izvucite spremne za upotrebu prilagođene komponente i druge uobičajene obrasce dizajna s našim novim primjerima isječaka . Uključuje podnožja , padajuće liste , grupe lista i modale .
Uklonjeni nekorišteni stilovi pozicioniranja iz iskačućih prozora i opisa alata jer njima upravlja isključivo Popper. $tooltip-marginje zastarjelo i postavljeno na nullu procesu.

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

Hej tamo! Promjene našeg prvog većeg izdanja Bootstrap 5, v5.0.0, dokumentirane su u nastavku. Oni ne odražavaju gore prikazane dodatne promjene.

Zavisnosti

Izbačen jQuery.
Nadograđen sa Popper v1.x na Popper v2.x.
Libsass je zamijenjen Dart Sass-om jer je naš Sass kompajler s obzirom da je Libsass zastario.
Migrirao iz Jekyll-a u Hugo radi izrade naše dokumentacije

Podrška za pretraživač

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

Promjene u dokumentaciji

Redizajnirana početna stranica, izgled dokumenata i podnožje.
Dodan novi vodič za pakete .
Dodan je novi odjeljak za prilagođavanje , zamjenjujući stranicu Theming v4 , s novim detaljima o Sass-u, opcijama globalne konfiguracije, shemama boja, CSS varijablama i još mnogo toga.
Reorganizirana je sva dokumentacija obrasca u novi odjeljak Obrasci , razdvajajući sadržaj na više fokusirane stranice.
Slično, ažuriran je odjeljak Layout , kako bi se jasnije prikazao sadržaj mreže.
Stranica komponente “Navs” je preimenovana u “Navs & Tabs”.
Stranica „Čekovi“ je preimenovana u „Čekovi i radio“.
Redizajnirali smo navigacijsku traku i dodali novu podnav kako bismo olakšali kretanje po našim stranicama i verzijama dokumenata.
Dodata nova prečica na tastaturi za polje za pretragu: Ctrl + /.

Sass

Odbacili smo zadano spajanje Sass mapa 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 mapama .
BreakingPreimenovana color-yiq()funkcija i povezane varijable u color-contrast()jer više nije povezana s YIQ prostorom boja. Vidi #30168.
- $yiq-contrasted-thresholdje preimenovan u $min-contrast-ratio.
- $yiq-text-darki $yiq-text-lightpreimenovani su u $color-contrast-darki $color-contrast-light.
BreakingParametri mixina medijskog upita su promijenjeni za logičniji pristup.
- media-breakpoint-down()koristi samu tačku prekida umesto sledeće tačke prekida (npr. media-breakpoint-down(lg)umesto media-breakpoint-down(md)ciljanih prozora manjeg od lg).
- Slično, drugi parametar u media-breakpoint-between()takođe koristi samu tačku prekida umesto sledeće tačke prekida (npr. media-between(sm, lg)umesto media-breakpoint-between(sm, md)ciljnih prozora između smi lg).
BreakingUklonjeni stilovi ispisa i $enable-print-stylesvarijabla. Još uvijek postoje klase za prikaz printa. Vidi #28339 .
BreakingIspuštene color(), theme-color(), i gray()funkcije u korist varijabli. Vidi #29083 .
BreakingFunkcija je preimenovana theme-color-level()u color-level()i sada prihvata bilo koju boju koju želite umjesto samo $theme-colorboja. Vidi #29083 Pazi: color-level() kasnije je ubačen u v5.0.0-alpha3.
BreakingPreimenovano $enable-prefers-reduced-motion-media-queryi $enable-pointer-cursor-for-buttonsu $enable-reduced-motioni $enable-button-pointersradi kratkoće.
BreakingUklonio mixin bg-gradient-variant(). Koristite .bg-gradientklasu da dodate gradijente elementima umjesto generiranih .bg-gradient-*klasa.
Breaking Uklonjeni prethodno zastarjeli mixini:
- hover, hover-focus, plain-hover-focus, ihover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(takođe je ispuštena pridružena uslužna klasa, .text-hide)
- visibility()
- form-control-focus()
Breakingscale-color()Funkcija je preimenovana u shift-color()kako bi se izbjegla kolizija sa Sassovom vlastitom funkcijom skaliranja boja.
box-shadowmixini sada dozvoljavaju nullvrijednosti i ispadaju noneiz više argumenata. Vidi #30394 .
Mixin border-radius()sada ima zadanu vrijednost.

Sistem boja

Sistem boja koji je radio color-level()i $theme-color-intervaluklonjen je u korist novog sistema boja. Sve lighten()i darken()funkcije u našoj bazi kodova zamijenjene su sa tint-color()i shade-color(). Ove funkcije će pomiješati boju s bijelom ili crnom umjesto da mijenjaju njenu svjetlinu za fiksni iznos. Boja shift-color()će ili nijansirati ili zasjeniti boju ovisno o tome je li njen 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 je povećan sa 3:1 na 4,5:1 i ažurirane plave, zelene, cijan i ružičaste boje kako bi se osigurao WCAG 2.1 AA kontrast. Također smo promijenili našu kontrastnu boju iz $gray-900na $black.
Kako bismo podržali naš sistem boja, dodali smo nove prilagođene tint-color()i shade-color()funkcije za odgovarajuće miješanje boja.

Ažuriranja mreže

Nova tačka prekida! Dodata nova xxltačka prekida za 1400pxi više. Nema promjena na svim ostalim tačkama prekida.
Poboljšani oluci. Oluci su sada postavljeni u rems, i uži su od v4 ( 1.5rem, ili oko 24px, dolje od 30px). Ovo poravnava oluke našeg mrežnog sistema sa našim razmacima.
- Dodata nova klasa oluka ( .g-*, .gx-*, i .gy-*) za kontrolu horizontalnih/vertikalnih oluka, horizontalnih oluka i vertikalnih oluka.
- BreakingPreimenovano .no-guttersu kako .g-0bi odgovaralo novim kanalima.
Kolone se više ne position: relativeprimjenjuju, pa ćete možda morati dodati .position-relativeneke elemente da biste vratili to ponašanje.
BreakingOdustao od nekoliko .order-*časova koji su često ostajali neiskorišteni. Mi sada pružamo samo .order-1iz .order-5kutije.
BreakingIzbačena .mediakomponenta jer se lako može replicirati uslužnim programima. Pogledajte #28265 i stranicu sa fleksibilnim uslužnim programima za primjer .
Breaking bootstrap-grid.csssada se primjenjuje samo box-sizing: border-boxna kolonu umjesto resetovanja globalne veličine kutije. Na ovaj način, naši stilovi mreže mogu se koristiti na više mjesta bez smetnji.
$enable-grid-classesviše ne onemogućuje generiranje kontejnerskih klasa. Vidi #29146.
Mixin je make-colažuriran na zadane na jednake stupce bez određene veličine.

Sadržaj, ponovno pokretanje itd

RFS je sada podrazumevano omogućen. Naslovi koji koristefont-size()mixin će automatski prilagoditi svojufont-sizeveličinu s okvirom za prikaz. Ova funkcija je ranije bila uključena u v4.
BreakingRevidirali smo tipografiju prikaza kako bismo zamijenili naše $display-*varijable i $display-font-sizesSass mapom. Također su uklonjene pojedinačne $display-*-weightvarijable za jedan $display-font-weighti prilagođen font-sizes.
Dodane su dvije nove .display-*veličine naslova .display-5i .display-6.
Veze su podrazumevano podvučene (ne samo pri lebdenju), osim ako nisu deo određenih komponenti.
Redizajnirane tabele da osveže svoje stilove i ponovo ih sagrade pomoću CSS varijabli za veću kontrolu nad stilizovanjem.
BreakingUgniježđene tablice više ne nasljeđuju stilove.
Breaking .thead-lighti .thead-darkodbačeni su u korist .table-*varijantnih klasa koje se mogu koristiti za sve elemente tabele ( thead, tbody, tfoot, tr, thi td).
BreakingMiksin table-row-variant()je preimenovan u table-variant()i prihvata samo 2 parametra: $color(naziv boje) i $value(kod boje). Boja ivice i boje akcenta se automatski izračunavaju na osnovu faktorskih varijabli tabele.
Podijelite varijable popunjavanja ćelija tablice na -yi -x.
BreakingPao .pre-scrollablerazred. Vidi #29135
Breaking .text-*uslužni programi više ne dodaju stanja lebdenja i fokusa vezama. .link-*umjesto toga se mogu koristiti pomoćne klase. Vidi #29267
BreakingPao .text-justifyrazred. Vidi #29793
Breaking <hr>elementi sada koriste heightumjesto borderza bolju podršku sizeatributa. Ovo također omogućava korištenje uslužnih programa za punjenje za kreiranje debljih razdjelnika (npr. <hr class="py-1">).
Vrati zadano horizontalno padding-leftna <ul>i <ol>elemente sa zadanog pretraživača 40pxna 2rem.
Dodano $enable-smooth-scroll, koji se primjenjuje scroll-behavior: smoothglobalno – osim za korisnike koji traže smanjeno kretanje putem prefers-reduced-motionmedijskog upita. Vidi #31877

RTL

Varijable, uslužni programi i miksinovi specifični za horizontalni smjer su preimenovani da koriste logička svojstva poput onih u flexbox rasporedima—npr. starti endumjesto lefti right.

Forms

Dodane nove plutajuće forme! Promovirali smo primjer plutajućih oznaka na potpuno podržane komponente obrasca. Pogledajte novu stranicu plutajućih naljepnica.
Breaking Konsolidovani izvorni i prilagođeni elementi forme. Potvrdni okviri, radio, odabiri i drugi ulazi koji su imali izvorne i prilagođene klase u v4 su konsolidirani. Sada su skoro 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.
- Odbačen native .form-control-filei .form-control-range.
BreakingPao .input-group-appendi .input-group-prepend. Sada možete samo dodati dugmad i .input-group-textkao direktne potomke grupa za unos.
Dugogodišnji nedostajući radijus granice na ulaznoj grupi sa greškom za povratne informacije o validaciji je konačno popravljen dodavanjem dodatne .has-validationklase ulaznim grupama sa validacijom.
Breaking Izbačene su klase rasporeda specifične za formu za naš mrežni sistem. Koristite našu mrežu i uslužne programe umjesto .form-group, .form-row, ili .form-inline.
BreakingOznake obrasca sada zahtijevaju .form-label.
Breaking .form-textviše ne postavlja display, što vam omogućava da kreirate umetnuti ili blok tekst pomoći po želji samo promjenom HTML elementa.
Kontrole obrasca se više ne koriste fiksno heightkada je to moguće, umjesto toga se odlažu min-heightradi poboljšanja prilagođavanja i kompatibilnosti s drugim komponentama.
Ikone za provjeru valjanosti se više ne primjenjuju na <select>s sa multiple.
Preuređeni izvorni Sass fajlovi pod scss/forms/, uključujući stilove grupe unosa.

Komponente

Objedinjene paddingvrijednosti za upozorenja, krušne mrvice, kartice, padajuće menije, grupe lista, modale, iskačuće stranice i opise alata koje se zasnivaju na našoj $spacervarijabli. Vidi #30564 .

Harmonika

Dodata nova komponenta harmonike .

Alerts

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

Značke

BreakingIzbačene su sve .badge-*klase boja za pozadinske uslužne programe (npr. koristite .bg-primaryumjesto .badge-primary).
BreakingIspušteno — umjesto toga koristite uslužni program .badge-pill..rounded-pill
BreakingUklonjeni stilovi lebdenja i fokusa za elemente <a>i <button>elemente.
Povećani zadani padding za značke od .25em/ .5emdo .35em/ .65em.

Mrvice hljeba

Pojednostavljeni zadani izgled krušnih mrvica uklanjanjem padding, background-color, i border-radius.
Dodano je novo prilagođeno svojstvo CSS-a --bs-breadcrumb-dividerza jednostavno prilagođavanje bez potrebe za ponovnim kompajliranjem CSS-a.

Dugmad

Breaking Dugmad za prebacivanje , sa potvrdnim okvirima ili radijima, više ne zahtijevaju JavaScript i imaju nove oznake. Više nam nije potreban element omotača, dodavanje.btn-checku<input>, i uparivanje sa bilo kojom.btnklasom na<label>. Vidi #30650 . Dokumenti za ovo premješteni su sa naše stranice Dugmad u novi odjeljak Obrasci.
Breaking Otpušteno .btn-blockzbog komunalija. Umjesto da koristite .btn-blockna .btn, omotajte dugmad sa .d-gridi .gap-*uslužnim programom da ih razmaknete po potrebi. Prebacite se na responsive klase za još veću kontrolu nad njima. Pročitajte dokumente za neke primjere.
Ažurirali smo naše button-variant()i button-outline-variant()miksine da podrže dodatne parametre.
Ažurirana dugmad kako bi se osigurao povećan kontrast pri lebdenju i aktivnim stanjima.
Onemogućena dugmad sada imaju pointer-events: none;.

Card

BreakingPao .card-decku korist naše mreže. Umotajte svoje karte u klase kolona i dodajte roditeljski .row-cols-*kontejner za ponovno kreiranje špilova karata (ali s većom kontrolom nad odgovarajućim poravnanjem).
BreakingPao .card-columnsu korist masonerije. Vidi #28922 .
BreakingZamijenjena .cardharmonika sa novom komponentom harmonike .

Carousel

Dodana je nova .carousel-darkvarijanta za tamni tekst, kontrole i indikatore (odlično za svjetlije pozadine).
Zamijenjene ikone ševrona za kontrole vrtuljka novim SVG-ovima iz Bootstrap Icons .

Dugme za zatvaranje

BreakingPreimenovano .closeu .btn-closeza manje generički naziv.
Dugmad za zatvaranje sada koriste background-image(ugrađeni SVG) umjesto a ×u HTML-u, što omogućava lakše prilagođavanje bez potrebe za dodirivanjem vaše oznake.
Dodana je nova .btn-close-whitevarijanta koja koristi filter: invert(1)za omogućavanje većeg kontrasta ikona odbacivanja na tamnijim pozadinama.

Kolaps

Uklonjeno sidrenje za harmonike.

Padajući meni

Dodana je nova .dropdown-menu-darkvarijanta i povezane varijable za tamne padajuće menije na zahtjev.
Dodata nova varijabla za $dropdown-padding-x.
Zatamnjen padajući razdjelnik radi poboljšanog kontrasta.
BreakingSvi događaji za padajući meni sada se pokreću na dugmetu za prebacivanje padajućeg menija, a zatim se prikazuju u mehurićima do nadređenog elementa.
Padajući meniji sada imaju postavljene data-bs-popper="static"atribute kada je pozicioniranje padajućeg menija statično ili je padajući meni na navigacionoj traci. Ovo dodaje naš JavaScript i pomaže nam da koristimo prilagođene stilove položaja bez ometanja Popperovog pozicioniranja.
BreakingIzbačena flipopcija za padajući dodatak u korist izvorne Popper konfiguracije. Sada možete onemogućiti ponašanje okretanja prosljeđivanjem praznog niza za fallbackPlacementsopciju u modifikatoru okretanja .
Padajući meniji sada se mogu kliknuti uz novu autoCloseopciju za upravljanje ponašanjem automatskog zatvaranja . Ovu opciju možete koristiti da prihvatite klik unutar ili izvan padajućeg izbornika kako biste ga učinili interaktivnim.
Padajući meni sada podržavaju .dropdown-items umotane u <li>s.

Jumbotron

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

Grupa liste

Dodan novi .list-group-numberedmodifikator grupama liste.

Navigacije i kartice

Dodane nove nullvarijable za font-size, font-weight, color, i :hover coloru .nav-linkklasu.

Navbars

BreakingNavbarovi sada zahtijevaju kontejner unutar (kako bi se drastično pojednostavili zahtjevi za razmakom i potreban CSS).
BreakingKlasa .activese više ne može primijeniti na .nav-items, mora se primijeniti direktno na .nav-links.

Offcanvas

Dodana je nova komponenta van platna .

Paginacija

Veze za paginaciju sada imaju prilagodljive margin-leftkoje se dinamički zaokružuju na svim uglovima kada su odvojene jedna od druge.
Dodano transitions linkovima za paginaciju.

Popovers

BreakingPreimenovano .arrowu .popover-arrowu našem zadanom predlošku skočnog prozora.
whiteListOpcija je preimenovana u allowList.

Spinners

Spinneri sada poštuju prefers-reduced-motion: reduceusporavanje animacija. Vidi #31882 .
Poboljšano vertikalno poravnanje spinnera.

Zdravice

Zdravice se sada mogu postaviti u a .toast-containeruz pomoć uslužnih programa za pozicioniranje .
Promijenjeno zadano trajanje tosta na 5 sekundi.
Uklonjeno overflow: hiddeniz tostova i zamijenjeno odgovarajućim border-radiuss calc()funkcijama.

Alati

BreakingPreimenovano .arrowu .tooltip-arrowu našem zadanom predlošku opisa alata.
BreakingZadana vrijednost za fallbackPlacementsje promijenjena u ['top', 'right', 'bottom', 'left']radi boljeg postavljanja popper elemenata.
BreakingwhiteListOpcija je preimenovana u allowList.

Komunalne usluge

BreakingPreimenovano nekoliko uslužnih programa za korištenje logičkih imena svojstava umjesto imena usmjerenih 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.
BreakingPodrazumevano onemogućene negativne margine.
Dodata nova .bg-bodyklasa za brzo postavljanje <body>pozadine na dodatne elemente.
Dodani su novi uslužni programi položaja za top, right, bottom, i left. Vrijednosti uključuju 0, 50%, i 100%za svako svojstvo.
Dodani su novi .translate-middle-xi .translate-middle-yuslužni programi horizontalno ili vertikalno centrirati apsolutno/fiksno pozicionirane elemente.
Dodati novi border-widthuslužni programi .
BreakingPreimenovano .text-monospaceu .font-monospace.
BreakingUklonjeno .text-hidejer je to zastarjela metoda za skrivanje teksta koji se više ne bi trebao koristiti.
Dodati .fs-*uslužni programi za font-sizeuslužne programe (sa uključenim RFS-om). Oni koriste istu skalu kao i HTML-ovi zadani naslovi (1-6, veliki prema malim) i mogu se mijenjati putem Sass mape.
BreakingPreimenovani .font-weight-*uslužni programi .fw-*zbog sažetosti i dosljednosti.
BreakingPreimenovani .font-style-*uslužni programi .fst-*zbog sažetosti i dosljednosti.
Dodato .d-griduslužnim programima za prikaz i novim gapuslužnim programima ( .gap) za CSS Grid i flexbox rasporede.
BreakingUklonjen .rounded-smi rounded-lg, i uvedena nova skala klasa, .rounded-0u .rounded-3. Vidi #31687 .
Dodani novi line-heightuslužni programi: .lh-1, .lh-sm, .lh-basei .lh-lg. Vidite ovdje .
Premješten je .d-noneuslužni program u naš CSS kako bi mu dao veću težinu u odnosu na druge uslužne programe za prikaz.
Proširen .visually-hidden-focusablepomoćnik da radi i na kontejnerima, koristeći :focus-within.

Pomagači

Breaking Responzivni pomoćnici za ugrađivanje preimenovani su u pomoćnike omjera s novim imenima klasa i poboljšanim ponašanjem, kao i korisnom CSS varijablom.
- Klase su preimenovane kako bi se promijenile byu xomjeru stranica. Na primjer, .ratio-16by9sada je .ratio-16x9.
- Izbacili smo .embed-responsive-itemi selektor grupe elemenata u korist jednostavnijeg .ratio > *selektora. Nije potrebna više klasa, a pomoćnik za omjer sada radi sa bilo kojim HTML elementom.
- Sass mapa je $embed-responsive-aspect-ratiospreimenovana u $aspect-ratiosi njene vrijednosti su pojednostavljene kako bi uključile ime klase i postotak kao key: valuepar.
- CSS varijable su sada generirane i uključene za svaku vrijednost u Sass mapi. Izmijenite --bs-aspect-ratiovarijablu na da .ratiobiste stvorili bilo koji prilagođeni omjer širine i visine .
Breaking Klase “čitača ekrana” su sada “vizuelno skrivene” klase .
- Promijenjen Sass fajl iz scss/helpers/_screenreaders.scssuscss/helpers/_visually-hidden.scss
- Preimenovan .sr-onlyi .sr-only-focusableu .visually-hiddeni.visually-hidden-focusable
- Preimenovano sr-only()i sr-only-focusable()miješanje u visually-hidden()i visually-hidden-focusable().
bootstrap-utilities.csssada uključuje i naše pomagače. Pomoćnici više ne moraju biti uvezeni u prilagođene verzije.

JavaScript

Izbačena je jQuery zavisnost i prepravljeni dodaci da budu u običnom JavaScriptu.
BreakingAtributi podataka za sve JavaScript dodatke su sada raspoređeni u imenskom prostoru kako bi se pomoglo 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 da kreirate novu instancu 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 Bootstrap-ovu zadanu Popper konfiguraciju kao argument, tako da možete spojiti ovu zadanu konfiguraciju na svoj način. Primjenjuje se na padajuće menije, skočne prozore i opise alata.
Zadana vrijednost za fallbackPlacementsje promijenjena u ['top', 'right', 'bottom', 'left']radi boljeg postavljanja Popper elemenata. Primjenjuje se na padajuće menije, skočne prozore i opise alata.
Uklonjena donja crta iz javnih statičkih metoda kao što je _getInstance()→ getInstance().