Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
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

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.

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

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

  • 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

Grupa liste

  • Dodane nove nullvarijable za font-size, font-weight, color, i :hover coloru .nav-linkklasu.
  • BreakingNavbarovi sada zahtijevaju kontejner unutar (kako bi se drastično pojednostavili zahtjevi za razmakom i potreban CSS).

Offcanvas

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