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

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-checkje sada .form-check.
- .custom-check.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.
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 i data-bs-popper="none"kada je padajući izbornik 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).

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:
```
var modal = new bootstrap.Modal('#myModal')
var 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().