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

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-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.
- 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.
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 postavljen data-bs-popper="static"atribut kada je pozicioniranje padajućeg menija statično i data-bs-popper="none"kada 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).

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