Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
in English

Selitev na v5

Sledite in pregledujte spremembe izvornih datotek Bootstrap, dokumentacije in komponent, ki vam bodo v pomoč pri prehodu iz v4 na v5.

Na tej strani

Odvisnosti

  • Izpuščen jQuery.
  • Nadgrajen s Popper v1.x na Popper v2.x.
  • Libsass smo zamenjali z Dart Sass, saj je bil naš prevajalnik Sass, ki je dal Libsass, zastarel.
  • Preselili smo se z Jekylla na Huga zaradi gradnje naše dokumentacije

Podpora za brskalnik

  • Opuščen Internet Explorer 10 in 11
  • Izpuščen Microsoft Edge < 16 (Legacy Edge)
  • Izpuščen Firefox < 60
  • Izpuščen Safari < 12
  • Izpuščen iOS Safari < 12
  • Izpuščen Chrome < 60

Spremembe dokumentacije

  • Preoblikovana domača stran, postavitev dokumentov in noga.
  • Dodan nov vodnik po paketih .
  • Dodan nov razdelek za prilagajanje , ki nadomešča stran Tematiziranje v4 z novimi podrobnostmi o Sass, globalnih konfiguracijskih možnostih, barvnih shemah, spremenljivkah CSS in več.
  • Reorganiziral vso dokumentacijo obrazcev v nov razdelek Obrazci , pri čemer je vsebino razdelil na bolj osredotočene strani.
  • Podobno smo posodobili razdelek Postavitev , da bi jasneje opredelili vsebino mreže.
  • Komponentna stran »Navs« je bila preimenovana v »Navs & Tabs«.
  • Stran »Čeki« je bila preimenovana v »Čeki in radijski sprejemniki«.
  • Preoblikovali smo vrstico za krmarjenje in dodali nov subnav za lažje premikanje po različicah naših spletnih mest in dokumentov.
  • Dodana nova bližnjica na tipkovnici za iskalno polje: Ctrl + /.

Sass

  • Opustili smo privzeto spajanje zemljevidov Sass, da bi olajšali odstranjevanje odvečnih vrednosti. Ne pozabite, da morate zdaj definirati vse vrednosti v zemljevidih ​​Sass, kot je $theme-colors. Preverite, kako ravnati z zemljevidi Sass .

  • Lomljenjecolor-yiq()Funkcija in povezane spremenljivke so bile preimenovane v color-contrast(), ker niso več povezane z barvnim prostorom YIQ. Glej #30168.

    • $yiq-contrasted-thresholdse preimenuje v $min-contrast-ratio.
    • $yiq-text-darkin $yiq-text-lightse preimenujejo v $color-contrast-darkin $color-contrast-light.

  • LomljenjeParametri mixins medijske poizvedbe so se spremenili za bolj logičen pristop.

    • media-breakpoint-down()uporablja samo prelomno točko namesto naslednje prekinitvene točke (npr. media-breakpoint-down(lg)namesto media-breakpoint-down(md)ciljnih pogledov, manjših od lg).
    • Podobno tudi drugi parameter v media-breakpoint-between()uporabi samo prelomno točko namesto naslednje prelomne točke (npr. media-between(sm, lg)namesto media-breakpoint-between(sm, md)ciljnih pogledov med smin lg).

  • LomljenjeOdstranjeni slogi tiskanja in $enable-print-stylesspremenljivka. Razredi tiskanja so še vedno na voljo. Glej #28339 .

  • LomljenjeFunkcije color(), theme-color(), in so gray()opuščene v korist spremenljivk. Glej #29083 .

  • LomljenjeFunkcija je bila preimenovana theme-color-level()v color-level()in zdaj sprejema katero koli barvo, ki jo želite, namesto samo $theme-colorbarv. Glejte #29083 Pazi: color-level() je bil pozneje vržen v v5.0.0-alpha3.

  • LomljenjePreimenovano v $enable-prefers-reduced-motion-media-queryin zaradi kratkosti.$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers

  • LomljenjeOdstranjen bg-gradient-variant()mixin. Uporabite .bg-gradientrazred za dodajanje prelivov elementom namesto ustvarjenih .bg-gradient-*razredov.

  • Lomljenje Odstranjeni prej zastareli miksini:

    • hover, hover-focus, plain-hover-focus, inhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(opustil je tudi povezani razred uporabnosti, .text-hide)
    • visibility()
    • form-control-focus()

  • Lomljenjescale-color()Funkcija je bila preimenovana v, shift-color()da se izogne ​​koliziji s Sassovo lastno funkcijo skaliranja barv.

  • box-shadowmiksini zdaj dovoljujejo nullvrednosti in padec noneiz več argumentov. Glej #30394 .

  • Mixin ima border-radius()zdaj privzeto vrednost.

Barvni sistem

  • Barvni sistem, ki je deloval z color-level()in $theme-color-intervalje bil odstranjen v korist novega barvnega sistema. Vse funkcije lighten()in darken()v naši kodni bazi so nadomeščene z tint-color()in shade-color(). Te funkcije bodo mešale barvo z belo ali črno, namesto da bi spremenile njeno svetlost za določeno količino. Barvo shift-color()bo obarvala ali zasenčila, odvisno od tega, ali je njen parameter teže pozitiven ali negativen. Glejte #30622 za več podrobnosti.

  • Dodani novi odtenki in odtenki za vsako barvo, ki zagotavljajo devet ločenih barv za vsako osnovno barvo, kot nove spremenljivke Sass.

  • Izboljšan barvni kontrast. Izboljšano barvno kontrastno razmerje s 3:1 na 4,5:1 in posodobljene modre, zelene, cian in roza barve, da se zagotovi kontrast WCAG 2.1 AA. Prav tako smo spremenili našo barvno kontrastno barvo iz $gray-900v $black.

  • Da bi podprli naš barvni sistem, smo dodali nove meritve tint-color()in shade-color()funkcije za ustrezno mešanje naših barv.

Posodobitve mreže

  • Nova prelomna točka! Dodana nova xxlprelomna točka za 1400pxin navzgor. Brez sprememb vseh drugih prelomnih točk.

  • Izboljšani žlebovi. Žlebovi so zdaj nastavljeni v rems in so ožji od v4 ( 1.5rem, ali približno 24px, navzdol od 30px). To poravna žlebove našega mrežnega sistema z našimi pripomočki za razmik.

    • Dodan nov razred žlebov ( .g-*, .gx-*in .gy-*) za nadzor vodoravnih/navpičnih žlebov, vodoravnih in navpičnih žlebov.
    • LomljenjePreimenovan .no-guttersv, .g-0da se ujema z novimi pripomočki za žlebove.

  • Stolpci se ne position: relativeuporabljajo več, zato boste morda morali dodati .position-relativenekatere elemente, da obnovite to vedenje.

  • LomljenjeIzpuščenih več .order-*razredov, ki so pogosto ostali neuporabljeni. Zdaj ponujamo samo .order-1ven .order-5iz škatle.

  • LomljenjeKomponenta je bila opuščena, .mediasaj jo je mogoče preprosto posnemati s pripomočki. Za primer glejte #28265 in stran s pripomočki flex .

  • Lomljenje bootstrap-grid.csszdaj velja samo box-sizing: border-boxza stolpec namesto ponastavitve globalne velikosti polja. Na ta način lahko naše sloge mreže brez motenj uporabljate na več mestih.

  • $enable-grid-classesne onemogoča več ustvarjanja vsebniških razredov. Glej #29146.

  • Posodobljen make-colmixin na privzeto enake stolpce brez določene velikosti.

Vsebina, ponovni zagon itd

  • RFS je zdaj privzeto omogočen. Naslovi, ki uporabljajofont-size()mixin, se bodo samodejno prilagodilifont-sizemerilu glede na vidno polje. Ta funkcija je bila prej omogočena z v4.

  • LomljenjePrenovili smo našo tipografijo zaslona, ​​da smo zamenjali naše $display-*spremenljivke in $display-font-sizeszemljevid Sass. Odstranjene tudi posamezne $display-*-weightspremenljivke za posamezen $display-font-weightin prilagojen font-sizes.

  • Dodani dve novi .display-*velikosti naslovov .display-5in .display-6.

  • Povezave so privzeto podčrtane (ne le pri premikanju miške), razen če so del določenih komponent.

  • Preoblikovane tabele za osvežitev njihovih slogov in njihovo ponovno izgradnjo s spremenljivkami CSS za večji nadzor nad slogom.

  • LomljenjeUgnezdene tabele ne podedujejo več slogov.

  • Lomljenje .thead-lightin .thead-darkse opustijo v korist .table-*variantnih razredov, ki jih je mogoče uporabiti za vse elemente tabele ( thead, tbody, tfoot, trin ) th.td

  • LomljenjeMixin je table-row-variant()preimenovan v table-variant()in sprejema samo 2 parametra: $color(ime barve) in $value(koda barve). Barva obrobe in barve poudarkov se samodejno izračunajo na podlagi faktorskih spremenljivk tabele.

  • Spremenljivke za polnjenje celic tabele razdelite na -yin -x.

  • LomljenjeIzpuščen .pre-scrollablerazred. Glej #29135

  • Lomljenje .text-*pripomočki povezavam ne dodajajo več stanja lebdenja in fokusa. .link-*namesto tega lahko uporabite pomožne razrede. Glej #29267

  • LomljenjeIzpuščen .text-justifyrazred. Glej #29793

  • Ponastavi privzeto vodoravno padding-leftna <ul>in <ol>elemente iz brskalnika privzeto 40pxna 2rem.

  • Dodano $enable-smooth-scroll, ki velja globalno – razen za uporabnike, ki prek medijske poizvedbe scroll-behavior: smoothzahtevajo zmanjšano gibanje . Glej #31877prefers-reduced-motion

RTL

  • Spremenljivke, pripomočki in miksini, specifični za vodoravno smer, so bili preimenovani tako, da uporabljajo logične lastnosti, kot so tiste, ki jih najdemo v postavitvah flexbox – npr. startin endnamesto leftin right.

Obrazci

  • Dodani novi plavajoči obrazci! Primer plavajočih nalepk smo povišali v popolnoma podprte komponente obrazca. Oglejte si novo stran s plavajočimi nalepkami.

  • Lomljenje Konsolidirani izvirni in prilagojeni elementi obrazca. Potrditvena polja, radii, izbire in drugi vnosi, ki so imeli izvorne razrede in razrede po meri v različici 4, so bili konsolidirani. Zdaj so skoraj vsi naši elementi obrazca popolnoma prilagojeni, večina brez potrebe po HTML-ju po meri.

    • .custom-checkje zdaj .form-check.
    • .custom-check.custom-switchje zdaj .form-check.form-switch.
    • .custom-selectje zdaj .form-select.
    • .custom-filein .form-fileso bili zamenjani s slogi po meri na vrhu .form-control.
    • .custom-rangeje zdaj .form-range.
    • Izpuščeni domači .form-control-filein .form-control-range.

  • LomljenjeSpuščeno .input-group-appendin .input-group-prepend. Zdaj lahko samo dodate gumbe in .input-group-textkot neposredne podrejene vnosnim skupinam.

  • Dolgotrajna napaka Manjkajoči obrobni radij na vhodni skupini s povratnimi informacijami o preverjanju je končno odpravljena z dodajanjem dodatnega .has-validationrazreda v vnosne skupine s preverjanjem.

  • Lomljenje Za naš mrežni sistem smo izpustili razrede postavitve, specifične za obliko. Uporabite naše omrežje in pripomočke namesto .form-group, .form-rowali .form-inline.

  • LomljenjeOznake obrazcev zdaj zahtevajo .form-label.

  • Lomljenje .form-textne nastavlja več display, kar vam omogoča, da ustvarite vstavljeno ali blokirano besedilo pomoči, kot želite, samo s spremembo elementa HTML.

  • Ikone za preverjanje niso več uporabljene za <select>s z multiple.

  • Prerazporejene izvorne datoteke Sass pod scss/forms/, vključno s slogi vnosnih skupin.

Komponente

  • Poenotene paddingvrednosti za opozorila, drobtinice, kartice, spustne menije, skupine seznamov, modale, pojavna okna in namige orodij, ki temeljijo na naši $spacerspremenljivki. Glej #30564 .

Harmonika

Opozorila

  • Opozorila imajo zdaj primere z ikonami .

  • Odstranjeni slogi po meri za <hr>s v vsakem opozorilu, ker že uporabljajo currentColor.

Značke

  • LomljenjeIzpuščeni so vsi .badge-*barvni razredi za pripomočke za ozadje (npr. uporabi .bg-primarynamesto .badge-primary).

  • LomljenjeIzpuščeno — namesto tega .badge-pilluporabite .rounded-pillpripomoček.

  • LomljenjeOdstranjeni slogi lebdenja in fokusa za elemente <a>in .<button>

  • Povečano privzeto oblazinjenje značk od .25em/ .5emdo .35em/ .65em.

  • Poenostavil je privzeti videz drobtin tako, da je odstranil padding, background-colorin border-radius.

  • Dodana je nova lastnost CSS po meri --bs-breadcrumb-dividerza enostavno prilagajanje, ne da bi bilo treba ponovno prevesti CSS.

Gumbi

  • Lomljenje Preklopni gumbi s potrditvenimi polji ali radii ne potrebujejo več JavaScripta in imajo nove oznake. Ne potrebujemo več ovojnega elementa, dodajte.btn-checkga<input>in ga seznanite s katerim koli.btnrazredom na<label>. Glej #30650 . Dokumentacija za to je bila premaknjena z naše strani Gumbi v nov razdelek Obrazci.

  • Lomljenje Padel .btn-blockzaradi komunalnih storitev. Namesto uporabe .btn-blockna .btn, ovijte svoje gumbe s .d-gridpripomočkom .gap-*, da jih po potrebi razmaknete. Preklopite na odzivne razrede za še večji nadzor nad njimi. Preberite dokumente za nekaj primerov.

  • Posodobili smo naše button-variant()in button-outline-variant()mixine za podporo dodatnim parametrom.

  • Posodobljeni gumbi za zagotavljanje povečanega kontrasta pri lebdenju in aktivnih stanjih.

  • Onemogočeni gumbi imajo zdaj pointer-events: none;.

Kartica

  • LomljenjeIzpuščeno .card-deckv korist našega omrežja. Zavijte svoje karte v razrede stolpcev in dodajte nadrejeni .row-cols-*vsebnik, da ponovno ustvarite komplete kart (vendar z več nadzora nad odzivno poravnavo).

  • LomljenjeIzpuščeno .card-columnsv korist zidarstva. Glej #28922 .

  • LomljenjeOsnovna harmonika je bila zamenjana .cardz novo komponento harmonike .

  • Dodana nova .carousel-darkrazličica za temno besedilo, kontrolnike in indikatorje (odlično za svetlejša ozadja).

  • Ikone ševronov za kontrolnike vrtiljaka so bile zamenjane z novimi SVG-ji iz ikon Bootstrap .

Gumb za zapiranje

  • LomljenjePreimenovano .closev .btn-closeza manj splošno ime.

  • Gumbi za zapiranje zdaj uporabljajo background-image(vdelan SVG) namesto &times;v HTML, kar omogoča lažjo prilagoditev, ne da bi se morali dotikati vaše oznake.

  • Dodana nova .btn-close-whiterazličica, ki uporablja filter: invert(1)za omogočanje večjih kontrastnih ikon za opustitev na temnejših ozadjih.

Strni

  • Odstranjeno drsno sidranje za harmonike.

  • Dodana nova .dropdown-menu-darkrazličica in povezane spremenljivke za temne spustne menije na zahtevo.

  • Dodana nova spremenljivka za $dropdown-padding-x.

  • Zatemnjen spustni razdelilnik za boljši kontrast.

  • LomljenjeVsi dogodki za spustni meni se zdaj sprožijo na preklopnem gumbu spustnega menija in se nato prikažejo v mehurčkih do nadrejenega elementa.

  • Spustni meniji imajo zdaj data-bs-popper="static"nastavljen atribut, ko je položaj spustnega menija statičen in data-bs-popper="none"ko je spustni meni v vrstici za krmarjenje. To doda naš JavaScript in nam pomaga pri uporabi stilov položaja po meri, ne da bi posegali v Popperjevo pozicioniranje.

  • LomljenjeOpuščena flipmožnost za spustni vtičnik v korist izvorne konfiguracije Popper. Zdaj lahko onemogočite obnašanje obračanja tako, da podate prazno polje za fallbackPlacementsmožnost v modifikatorju obračanja .

  • Spustne menije je zdaj mogoče klikniti z novo autoClosemožnostjo za upravljanje samodejnega zapiranja . S to možnostjo lahko sprejmete klik znotraj ali zunaj spustnega menija, da postane interaktiven.

  • Spustni meniji zdaj podpirajo .dropdown-items, zavite v <li>s.

Jumbotron

Seznam skupine

  • Dodane nove nullspremenljivke za font-size, font-weight, colorin :hover colorv .nav-linkrazred.
  • LomljenjeVrstice za krmarjenje zdaj zahtevajo vsebnik znotraj (za drastično poenostavitev zahtev glede razmika in potreben CSS).

Offcanvas

Paginacija

  • Povezave za označevanje strani imajo zdaj možnost prilagajanja margin-left, ki je dinamično zaokrožena na vseh vogalih, ko so ločeni drug od drugega.

  • transitionPovezavam na strani je dodan s.

Popoverji

  • LomljenjePreimenovano .arrowv .popover-arrowv naši privzeti pojavni predlogi.

  • whiteListMožnost preimenovana v allowList.

Vrtavke

  • Spinerji zdaj častijo prefers-reduced-motion: reducez upočasnitvijo animacij. Glej #31882 .

  • Izboljšana navpična poravnava vrtavke.

Zdravice

  • Zdravice je zdaj mogoče postaviti v a .toast-containers pomočjo pripomočkov za pozicioniranje .

  • Privzeto trajanje zdravice je spremenjeno na 5 sekund.

  • Odstranjeno overflow: hiddeniz toastov in nadomeščeno z ustreznimi border-radiuss calc()funkcijami.

Namigi orodij

  • LomljenjePreimenovano .arrowv .tooltip-arrowv naši privzeti predlogi orodnih namigov.

  • LomljenjePrivzeta vrednost za fallbackPlacementsje spremenjena v ['top', 'right', 'bottom', 'left']za boljšo postavitev poper elementov.

  • LomljenjewhiteListMožnost preimenovana v allowList.

Pripomočki

  • LomljenjePreimenovanih več pripomočkov za uporabo logičnih imen lastnosti namesto smernih imen z dodatkom podpore RTL:

    • Preimenovan .left-*in .right-*v .start-*in .end-*.
    • Preimenovan .float-leftin .float-rightv .float-startin .float-end.
    • Preimenovan .border-leftin .border-rightv .border-startin .border-end.
    • Preimenovan .rounded-leftin .rounded-rightv .rounded-startin .rounded-end.
    • Preimenovan .ml-*in .mr-*v .ms-*in .me-*.
    • Preimenovan .pl-*in .pr-*v .ps-*in .pe-*.
    • Preimenovan .text-leftin .text-rightv .text-startin .text-end.

  • LomljenjeNegativne marže so privzeto onemogočene.

  • Dodan nov .bg-bodyrazred za hitro nastavitev <body>ozadja za dodatne elemente.

  • Dodani novi pripomočki za položaj za top, right, bottomin left. Vrednosti vključujejo 0, 50%in 100%za vsako lastnost.

  • Dodani novi .translate-middle-x& .translate-middle-ypripomočki za vodoravno ali navpično centriranje absolutno/fiksno postavljenih elementov.

  • Dodani novi border-widthpripomočki .

  • LomljenjePreimenovan .text-monospacev .font-monospace.

  • LomljenjeOdstranjeno .text-hide, ker je to zastarela metoda za skrivanje besedila, ki je ne bi smeli več uporabljati.

  • Dodani .fs-*pripomočki za font-sizepripomočke (z omogočenim RFS). Ti uporabljajo enako lestvico kot privzeti naslovi HTML (1-6, veliki do majhnih) in jih je mogoče spreminjati prek zemljevida Sass.

  • LomljenjePreimenovani .font-weight-*pripomočki .fw-*zaradi jedrnatosti in doslednosti.

  • LomljenjePreimenovani .font-style-*pripomočki .fst-*zaradi jedrnatosti in doslednosti.

  • Dodano .d-gridpripomočkom za prikaz in novim gappripomočkom ( .gap) za postavitve CSS Grid in flexbox.

  • LomljenjeOdstranjeni .rounded-smin rounded-lgin uvedena nova lestvica razredov, .rounded-0na .rounded-3. Glej #31687 .

  • Dodani novi line-heightpripomočki : .lh-1, .lh-smin .lh-base. .lh-lgGlej tukaj .

  • Premaknili smo .d-nonepripomoček v naš CSS, da bi mu dali večjo težo v primerjavi z drugimi prikazovalnimi pripomočki.

  • Pomočnik je razširjen tako, .visually-hidden-focusableda deluje tudi na vsebnikih z uporabo :focus-within.

Pomočniki

  • Lomljenje Odzivni pomočniki za vdelavo so bili preimenovani v pomočnike za razmerja z novimi imeni razredov in izboljšanim vedenjem ter koristno spremenljivko CSS.

    • Razredi so bili preimenovani, da bi spremenili byrazmerje xstranic. Na primer, .ratio-16by9je zdaj .ratio-16x9.
    • Izbirnik skupine elementov in smo opustili .embed-responsive-itemv korist enostavnejšega .ratio > *izbirnika. Ne potrebujete več razreda in pomočnik za razmerje zdaj deluje s katerim koli elementom HTML.
    • Zemljevid $embed-responsive-aspect-ratiosSass je bil preimenovan v $aspect-ratiosin njegove vrednosti so bile poenostavljene tako, da vključujejo ime razreda in odstotek kot key: valuepar.
    • Spremenljivke CSS so zdaj ustvarjene in vključene za vsako vrednost v zemljevidu Sass. Spremenite --bs-aspect-ratiospremenljivko na , .ratioda ustvarite poljubno razmerje stranic po meri .

  • Lomljenje Razredi »bralnika zaslona« so zdaj »vizualno skriti« razredi .

    • Datoteka Sass je spremenjena iz scss/helpers/_screenreaders.scssvscss/helpers/_visually-hidden.scss
    • Preimenovan .sr-onlyin .sr-only-focusablev .visually-hiddenin.visually-hidden-focusable
    • Preimenovan sr-only()in sr-only-focusable()mešan v visually-hidden()in visually-hidden-focusable().

  • bootstrap-utilities.csszdaj vključuje tudi naše pomočnike. Pomočnikov ni več treba uvažati v gradnje po meri.

JavaScript

  • Opuščena je bila odvisnost od jQuery in prepisani vtičniki, da bodo v običajnem JavaScriptu.

  • LomljenjePodatkovni atributi za vse vtičnike JavaScript so zdaj v imenskem prostoru, kar pomaga razlikovati funkcionalnost Bootstrap od tretjih oseb in vaše kode. Na primer, uporabljamo data-bs-togglenamesto data-toggle.

  • Vsi vtičniki lahko zdaj sprejmejo izbirnik CSS kot prvi argument. Lahko posredujete element DOM ali kateri koli veljaven izbirnik CSS, da ustvarite nov primerek vtičnika:

    var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfiglahko posredujete kot funkcijo, ki sprejme Bootstrapovo privzeto konfiguracijo Popper kot argument, tako da lahko to privzeto konfiguracijo združite po svoje. Velja za spustne menije, pojavna okna in namige orodij.

  • Privzeta vrednost zafallbackPlacements je spremenjena v ['top', 'right', 'bottom', 'left']za boljšo postavitev elementov Popper. Velja za spustne menije, pojavna okna in namige orodij.

  • Odstranjen podčrtaj iz javnih statičnih metod, kot je _getInstance()→ getInstance().