Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
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

  • 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

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.

  • 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 .

  • 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 &times;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.

  • 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

Grupa popisa

  • Klasi su dodane nove nullvarijable za font-size, font-weight, colori .:hover color.nav-link
  • RazbijanjeNavigacijske trake sada zahtijevaju spremnik unutar (kako bi se drastično pojednostavili zahtjevi za razmakom i potreban CSS).

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().