Migracija na v5
Pratite i pregledajte promjene na Bootstrap izvornim datotekama, dokumentaciji i komponentama kako biste lakše migrirali s v4 na v5.
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 . -
Razbijanje
color-yiq()
Funkcija i povezane varijable su preimenovane ucolor-contrast()
jer više nisu povezane s YIQ prostorom boja. Vidi #30168.$yiq-contrasted-threshold
je preimenovan u$min-contrast-ratio
.$yiq-text-dark
i$yiq-text-light
redom su preimenovani u$color-contrast-dark
i$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)
umjestomedia-breakpoint-down(md)
ciljanih prozora manjih odlg
).- 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)
umjestomedia-breakpoint-between(sm, md)
ciljnih prozora izmeđusm
ilg
).
-
RazbijanjeUklonjeni stilovi ispisa i
$enable-print-styles
varijable. Časovi za prikaz ispisa još uvijek postoje. Vidi #28339 . -
RazbijanjeIspuštene
color()
,theme-color()
, igray()
funkcije u korist varijabli. Vidi #29083 . -
Razbijanje
theme-color-level()
Funkcija je preimenovana ucolor-level()
i sada prihvaća bilo koju boju koju želite umjesto samo$theme-color
boja. Vidi #29083 Pazi:color-level()
kasnije je ubačen uv5.0.0-alpha3
. -
RazbijanjePreimenovano
$enable-prefers-reduced-motion-media-query
i$enable-pointer-cursor-for-buttons
u$enable-reduced-motion
i$enable-button-pointers
radi kratkoće. -
RazbijanjeUklonio
bg-gradient-variant()
mixin. Koristite.bg-gradient
klasu 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()
-
Razbijanje
scale-color()
Funkcija je preimenovana ushift-color()
kako bi se izbjegla kolizija sa Sassovom vlastitom funkcijom skaliranja boja. -
box-shadow
mixins sada dopuštajunull
vrijednosti i ispuštajunone
iz više argumenata. Vidi #30394 . -
Mixin
border-radius()
sada ima zadanu vrijednost.
Sustav boja
-
Sustav boja koji je funkcionirao
color-level()
i$theme-color-interval
uklonjen je u korist novog sustava boja. Sve funkcijelighten()
idarken()
u našoj bazi kodova zamijenjene su stint-color()
ishade-color()
. Ove će funkcije miješati boju s bijelom ili crnom umjesto da mijenjaju njezinu svjetlinu za fiksni iznos. Bojushift-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-900
u$black
. -
Kako bismo podržali naš sustav boja, dodali smo nove prilagođene funkcije
tint-color()
ishade-color()
funkcije za odgovarajuće miješanje boja.
Ažuriranja mreže
-
Nova prijelomna točka! Dodana nova
xxl
prijelomna točka za1400px
i 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 oko24px
, prema dolje od30px
). 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-gutters
u kako.g-0
bi odgovaralo novim uslužnim programima oluka.
- Dodana nova klasa oluka (
-
Stupci se više ne
position: relative
primjenjuju, pa ćete možda morati dodati.position-relative
neke elemente da vratite to ponašanje. -
RazbijanjeIzbačeno je nekoliko
.order-*
klasa koje su često ostale neiskorištene. Sada pružamo samo.order-1
izvan.order-5
kutije. -
RazbijanjeIzostavljena
.media
komponenta jer se može lako replicirati pomoću uslužnih programa. Pogledajte #28265 i stranicu flex pomoćnih programa za primjer . -
Razbijanje
bootstrap-grid.css
sada se primjenjuje samobox-sizing: border-box
na 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-classes
više ne onemogućuje generiranje klasa spremnika. Vidi #29146. -
Miksin je ažuriran
make-col
na zadane jednake stupce bez navedene veličine.
Sadržaj, ponovno pokretanje itd
-
RFS je sada omogućen prema zadanim postavkama. Naslovi koji koriste
font-size()
mixin automatski će se prilagoditifont-size
velič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-sizes
Sass mapom. Također su uklonjene pojedinačne$display-*-weight
varijable za jednu$display-font-weight
i prilagođenufont-size
s. -
Dodane su dvije nove
.display-*
veličine naslova.display-5
i.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-light
i.thead-dark
odbačeni su u korist.table-*
varijantnih klasa koje se mogu koristiti za sve elemente tablice (thead
,tbody
,tfoot
,tr
i )th
.td
-
RazbijanjeMiksin
table-row-variant()
je preimenovan utable-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
-y
i-x
. -
RazbijanjePao
.pre-scrollable
razred. 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-justify
razred. Vidi #29793 -
Vrati zadane vodoravne
padding-left
na<ul>
i<ol>
elemente iz preglednika zadane40px
na2rem
. -
Dodano
$enable-smooth-scroll
, koje se primjenjujescroll-behavior: smooth
globalno—osim za korisnike koji traže smanjeno kretanje putemprefers-reduced-motion
medijskog 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.,
start
iend
umjestoleft
iright
.
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-check
je sada.form-check
..custom-check.custom-switch
je sada.form-check.form-switch
..custom-select
je sada.form-select
..custom-file
i.form-file
zamijenjeni su prilagođenim stilovima na vrhu.form-control
..custom-range
je sada.form-range
.- Ispao izvorni
.form-control-file
i.form-control-range
.
-
RazbijanjeIspustio
.input-group-append
i.input-group-prepend
. Sada možete samo dodati gumbe i.input-group-text
kao 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-validation
klase 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-text
više ne postavljadisplay
, š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 smultiple
. -
Preuređene izvorne Sass datoteke pod
scss/forms/
, uključujući stilove ulaznih grupa.
Komponente
- Objedinjene
padding
vrijednosti za upozorenja, putove, kartice, padajuće liste, grupe popisa, modale, skočne prozore i opise koji se temelje na našoj$spacer
varijabli. 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ć koristecurrentColor
.
Značke
-
RazbijanjeIspuštene su sve
.badge-*
klase boja za pozadinske pomoćne programe (npr. upotrijebi.bg-primary
umjesto.badge-primary
). -
RazbijanjeIspušteno
.badge-pill
—.rounded-pill
umjesto 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
/.5em
do.35em
/.65em
.
Krušne mrvice
-
Pojednostavljen je zadani izgled puteva kroz koje smo uklonili
padding
,background-color
iborder-radius
. -
Dodano je novo CSS prilagođeno svojstvo
--bs-breadcrumb-divider
za 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-check
u<input>
, i uparite ga s bilo kojom.btn
klasom na<label>
. Vidi #30650 . Dokumenti za to premješteni su s naše stranice Gumbi u novi odjeljak Obrasci. -
Razbijanje Odbačeno
.btn-block
zbog režija. Umjesto da ih koristite.btn-block
na.btn
, omotajte svoje gumbe s.d-grid
i.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()
ibutton-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-deck
u 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-columns
u korist masonerije. Vidi #28922 . -
RazbijanjeZamijenjena temeljna
.card
harmonika novom komponentom harmonike .
Karusel
-
Dodana je nova
.carousel-dark
varijanta 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
.close
u.btn-close
za 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-white
varijanta koja se koristifilter: 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-dark
varijanta 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 idata-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
flip
opcija za padajući dodatak u korist izvorne Popper konfiguracije. Sada možete onemogućiti ponašanje okretanja prosljeđivanjem praznog polja zafallbackPlacements
opciju u modifikatoru okretanja . -
Padajući izbornici sada se mogu kliknuti s novom
autoClose
opcijom 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-item
s 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-numbered
modifikator grupama popisa.
Navigacije i kartice
- Klasi su dodane nove
null
varijable zafont-size
,font-weight
,color
i .: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-left
koje su dinamički zaobljene na svim kutovima kada su odvojene jedna od druge. -
Dodano
transition
s vezama za označavanje stranica.
Popovers
-
RazbijanjePreimenovano
.arrow
u.popover-arrow
u našem zadanom skočnom predlošku. -
whiteList
Opcija je preimenovana uallowList
.
Vrtilice
-
Spineri sada poštuju
prefers-reduced-motion: reduce
usporavanjem animacija. Vidi #31882 . -
Poboljšano okomito poravnanje spinera.
Zdravice
-
Tostovi se sada mogu postaviti u
.toast-container
uz pomoć uslužnih programa za pozicioniranje . -
Zadano trajanje zdravice promijenjeno je na 5 sekundi.
-
Uklonjeno
overflow: hidden
iz tosta i zamijenjeno ispravnimborder-radius
scalc()
funkcijama.
Opisi alata
-
RazbijanjePreimenovano
.arrow
u.tooltip-arrow
u našem zadanom predlošku opisa alata. -
RazbijanjeZadana vrijednost za
fallbackPlacements
promijenjena je u['top', 'right', 'bottom', 'left']
radi boljeg postavljanja popper elemenata. -
Razbijanje
whiteList
Opcija je preimenovana uallowList
.
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-left
i.float-right
u.float-start
i.float-end
. - Preimenovano
.border-left
i.border-right
u.border-start
i.border-end
. - Preimenovano
.rounded-left
i.rounded-right
u.rounded-start
i.rounded-end
. - Preimenovano
.ml-*
i.mr-*
u.ms-*
i.me-*
. - Preimenovano
.pl-*
i.pr-*
u.ps-*
i.pe-*
. - Preimenovano
.text-left
i.text-right
u.text-start
i.text-end
.
- Preimenovano
-
RazbijanjePrema zadanim postavkama onemogućene negativne margine.
-
Dodana nova
.bg-body
klasa za brzo postavljanje<body>
pozadine dodatnih elemenata. -
Dodani novi pomoćni programi za položaj za
top
,right
,bottom
ileft
. Vrijednosti uključuju0
,50%
i100%
za svako svojstvo. -
Dodani novi
.translate-middle-x
i.translate-middle-y
pomoćni programi za vodoravno ili okomito centriranje apsolutno/fiksno pozicioniranih elemenata. -
Dodani novi
border-width
uslužni programi . -
RazbijanjePreimenovano
.text-monospace
u.font-monospace
. -
RazbijanjeUklonjeno
.text-hide
jer je to zastarjela metoda za skrivanje teksta koja se više ne bi trebala koristiti. -
Dodani
.fs-*
pomoćni programi zafont-size
pomoć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-grid
programe za prikaz i nove pomoćnegap
programe (.gap
) za CSS Grid i flexbox rasporede. -
RazbijanjeUklonjeni su
.rounded-sm
irounded-lg
, i uvedena nova ljestvica razreda,.rounded-0
na.rounded-3
. Vidi #31687 . -
Dodani novi uslužni programi
line-height
:.lh-1
,.lh-sm
i.lh-base
..lh-lg
Pogledajte ovdje . -
Premjestili smo
.d-none
pomoć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-focusable
za 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
by
omjerx
slike. Na primjer,.ratio-16by9
sada je.ratio-16x9
. - Odbacili smo
.embed-responsive-item
selektor 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-ratios
preimenovana u$aspect-ratios
i njene vrijednosti su pojednostavljene kako bi uključile naziv klase i postotak kaokey: value
par. - CSS varijable sada su generirane i uključene za svaku vrijednost u Sass mapi. Izmijenite
--bs-aspect-ratio
varijablu na da.ratio
biste stvorili bilo koji prilagođeni omjer slike .
- Klase su preimenovane kako bi promijenile
-
Razbijanje Klase "čitača zaslona" sada su "vizualno skrivene" klase .
- Sass datoteka je promijenjena iz
scss/helpers/_screenreaders.scss
uscss/helpers/_visually-hidden.scss
- Preimenovano
.sr-only
i.sr-only-focusable
u.visually-hidden
i.visually-hidden-focusable
- Preimenovano
sr-only()
isr-only-focusable()
miješa se uvisually-hidden()
ivisually-hidden-focusable()
.
- Sass datoteka je promijenjena iz
-
bootstrap-utilities.css
sada 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-toggle
umjestodata-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"]')
-
popperConfig
mož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
fallbackPlacements
promijenjena 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()
.