Treci la conținutul principal Treceți la navigarea documentelor
in English

Migrarea la v5

Urmăriți și examinați modificările aduse fișierelor sursă, documentației și componentelor Bootstrap pentru a vă ajuta să migrați de la v4 la v5.

Pe aceasta pagina

Dependente

  • S-a eliminat jQuery.
  • Actualizat de la Popper v1.x la Popper v2.x.
  • Libsass a fost înlocuit cu Dart Sass, deoarece compilatorul nostru Sass dat de Libsass a fost depreciat.
  • Am migrat de la Jekyll la Hugo pentru a construi documentația noastră

Suport pentru browser

  • S-a renunțat la Internet Explorer 10 și 11
  • S-a renunțat la Microsoft Edge < 16 (Legacy Edge)
  • S-a renunțat la Firefox <60
  • Safari scăpat < 12
  • S-a scăpat iOS Safari < 12
  • S-a scăpat Chrome < 60

Modificări ale documentației

  • Pagina de pornire, aspectul documentelor și subsolul au fost reproiectate.
  • S-a adăugat un nou ghid pentru colete .
  • S-a adăugat o nouă secțiune Personalizare , înlocuind pagina de tematică a v4 , cu noi detalii despre Sass, opțiuni de configurare globală, scheme de culori, variabile CSS și multe altele.
  • S-a reorganizat toată documentația formularelor într- o nouă secțiune Formulare , împărțind conținutul în pagini mai concentrate.
  • În mod similar, a fost actualizată secțiunea Aspect , pentru a dezvolta mai clar conținutul grilei.
  • Pagina componentei „Navs” a fost redenumită în „Navs & Tabs”.
  • Pagina „Cecuri” a fost redenumită „Cecuri și radiouri”.
  • Am reproiectat bara de navigare și am adăugat un nou subnav pentru a facilita navigarea prin site-urile și versiunile noastre de documente.
  • S-a adăugat o nouă comandă rapidă de la tastatură pentru câmpul de căutare: Ctrl + /.

Sass

  • Am renunțat la îmbinările implicite ale hărților Sass pentru a facilita eliminarea valorilor redundante. Rețineți că acum trebuie să definiți toate valorile din hărțile Sass, cum ar fi $theme-colors. Aflați cum să tratați hărțile Sass .

  • Spargerecolor-yiq()Funcția și variabilele asociate au fost redenumite color-contrast(), deoarece nu mai sunt legate de spațiul de culoare YIQ. Vezi #30168.

    • $yiq-contrasted-thresholdeste redenumit în $min-contrast-ratio.
    • $yiq-text-darkși $yiq-text-light, respectiv, sunt redenumite în $color-contrast-darkși $color-contrast-light.

  • SpargereParametrii mixinilor de interogare media s-au modificat pentru o abordare mai logică.

    • media-breakpoint-down()folosește punctul de întrerupere în sine în locul următorului punct de întrerupere (de exemplu, media-breakpoint-down(lg)în loc de ferestre de media-breakpoint-down(md)vizualizare ținte mai mici decât lg).
    • În mod similar, al doilea parametru în media-breakpoint-between()folosește, de asemenea, punctul de întrerupere însuși în loc de următorul punct de întrerupere (de exemplu, media-between(sm, lg)în loc de ferestrele de media-breakpoint-between(sm, md)vizualizare ținte între smși lg).

  • SpargereStilurile de imprimare și $enable-print-stylesvariabilele au fost eliminate. Cursurile de afișare tipărită sunt încă în jur. Vezi #28339 .

  • SpargereS-a eliminat color(), theme-color(), și gray()funcțiile în favoarea variabilelor. Vezi #29083 .

  • Spargeretheme-color-level()Funcția redenumită color-level()și acceptă acum orice culoare doriți în loc de numai $theme-colorculori. Vedeți #29083 Atenție: color-level() a fost trimis mai târziu în v5.0.0-alpha3.

  • SpargereRedenumită $enable-prefers-reduced-motion-media-queryși $enable-pointer-cursor-for-buttonspentru $enable-reduced-motionși $enable-button-pointerspentru concizie.

  • SpargereAm eliminat bg-gradient-variant()mixin-ul. Utilizați .bg-gradientclasa pentru a adăuga gradienți elementelor în loc de .bg-gradient-*clasele generate.

  • Spargere S-au eliminat mixuri depreciate anterior:

    • hover, hover-focus, plain-hover-focus, șihover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(a renunțat și la clasa de utilitate asociată, .text-hide)
    • visibility()
    • form-control-focus()

  • Spargerescale-color()Funcție redenumită pentru shift-color()a evita coliziunea cu propria funcție de scalare a culorilor a lui Sass.

  • box-shadowmixin-urile permit acum nullvalori și drop nonedin mai multe argumente. Vezi #30394 .

  • Mixin -ul border-radius()are acum o valoare implicită.

Sistem de culoare

  • Sistemul de culori care a funcționat color-level()și $theme-color-intervala fost eliminat în favoarea unui nou sistem de culori. Toate lighten()și darken()funcțiile din baza noastră de cod sunt înlocuite cu tint-color()și shade-color(). Aceste funcții vor amesteca culoarea fie cu alb, fie cu negru, în loc să-și schimbe luminozitatea cu o cantitate fixă. Nuanța shift-color()sau nuanța o culoare, în funcție de dacă parametrul său de greutate este pozitiv sau negativ. Consultați #30622 pentru mai multe detalii.

  • S-au adăugat noi nuanțe și nuanțe pentru fiecare culoare, oferind nouă culori separate pentru fiecare culoare de bază, ca noi variabile Sass.

  • Contrast de culoare îmbunătățit. Raport de contrast de culoare crescut de la 3:1 la 4,5:1 și culori actualizate albastru, verde, cyan și roz pentru a asigura contrastul WCAG 2.1 AA. De asemenea, ne-am schimbat culoarea contrastului de culoare de la $gray-900la $black.

  • Pentru a susține sistemul nostru de culori, am adăugat noi personalizări tint-color()și shade-color()funcții pentru a ne amesteca culorile în mod corespunzător.

Actualizări ale rețelei

  • Punct de întrerupere nou! S-a adăugat un nou xxlpunct de întrerupere pentru 1400pxși în sus. Nicio modificare la toate celelalte puncte de întrerupere.

  • Jgheaburi îmbunătățite. Jgheaburile sunt acum așezate în rem și sunt mai înguste decât v4 ( 1.5rem, sau aproximativ 24px, în jos de la 30px). Acest lucru aliniază jgheaburile sistemului nostru de rețea cu utilitățile noastre de spațiere.

    • S-a adăugat o nouă clasă de jgheaburi ( .g-*, .gx-*, și .gy-*) pentru a controla jgheaburi orizontale/verticale, jgheaburi orizontale și jgheaburi verticale.
    • SpargereRedenumită .no-guttersîn pentru .g-0a se potrivi cu noile utilități de jgheab.

  • Coloanele nu mai s-au position: relativeaplicat, așa că poate fi necesar să adăugați .position-relativela unele elemente pentru a restabili acel comportament.

  • SpargereA renunțat la mai multe .order-*clase care de multe ori au rămas nefolosite. Oferim acum doar .order-1la .order-5din cutie.

  • SpargereA renunțat la .mediacomponentă, deoarece poate fi reprodusă cu ușurință cu utilități. Consultați #28265 și pagina de utilități flex pentru un exemplu .

  • Spargere bootstrap-grid.cssacum se aplică numai box-sizing: border-boxcoloanei în loc să resetați dimensiunea globală a casetei. În acest fel, stilurile noastre de grilă pot fi folosite în mai multe locuri fără interferențe.

  • $enable-grid-classesnu mai dezactivează generarea de clase de containere. Vezi #29146.

  • S -a actualizat make-colmixin-ul la valorile implicite la coloane egale fără o dimensiune specificată.

Conținut, repornire etc

  • RFS este acum activat implicit. Titlurile care utilizeazăfont-size()mixin-ul se vor ajusta automatfont-sizela scară cu fereastra de vizualizare. Această funcție a fost înscrisă anterior cu v4.

  • SpargereAm revizuit tipografia noastră de afișare pentru a înlocui $display-*variabilele noastre și cu o $display-font-sizeshartă Sass. De asemenea, au fost eliminate $display-*-weightvariabilele individuale pentru un singur s $display-font-weightși ajustat font-size.

  • S- au adăugat două .display-*dimensiuni noi de titlu .display-5și .display-6.

  • Linkurile sunt subliniate în mod implicit (nu doar la trecerea cursorului), cu excepția cazului în care fac parte din anumite componente.

  • Tabelele reproiectate pentru a le reîmprospăta stilurile și pentru a le reconstrui cu variabile CSS pentru mai mult control asupra stilului.

  • SpargereTabelele imbricate nu mai moștenesc stiluri.

  • Spargere .thead-lightși .thead-darksunt abandonate în favoarea .table-*claselor de variante care pot fi utilizate pentru toate elementele tabelului ( thead, tbody, tfoot, trși ) th.td

  • Spargeretable-row-variant()Mixin -ul este redenumit table-variant()și acceptă doar 2 parametri: $color(numele culorii) și $value(codul culorii). Culoarea chenarului și culorile de accent sunt calculate automat pe baza variabilelor factorului de tabel.

  • Împărțiți variabilele de umplutură de celule de tabel în -yși -x.

  • SpargereS-a renunțat la .pre-scrollableclasă. Vezi #29135

  • Spargere .text-*utilitarele nu mai adaugă stări de hover și focus la legături. .link-*pot fi folosite în schimb clase de ajutor. Vezi #29267

  • SpargereS-a renunțat la .text-justifyclasă. Vezi #29793

  • padding-leftResetați la orizontală implicită <ul>și <ol>elementele din browser 40pxla 2rem.

  • Adăugat $enable-smooth-scroll, care se aplică scroll-behavior: smoothla nivel global, cu excepția utilizatorilor care solicită mișcare redusă prin prefers-reduced-motioninterogare media. Vezi #31877

RTL

  • Variabilele, utilitățile și mixurile specifice direcției orizontale au fost toate redenumite pentru a utiliza proprietăți logice, cum ar fi cele găsite în layout-urile flexbox - de exemplu, startși endîn locul leftși right.

Forme

  • S-au adăugat noi forme plutitoare! Am promovat exemplul de etichete flotante la componente de formular complet acceptate. Consultați noua pagină Etichete flotante.

  • Spargere Elemente de formular native și personalizate consolidate. Casetele de selectare, radiourile, selecțiile și alte intrări care aveau clase native și personalizate în v4 au fost consolidate. Acum aproape toate elementele noastre de formular sunt în întregime personalizate, majoritatea fără a fi nevoie de HTML personalizat.

    • .custom-checkeste acum .form-check.
    • .custom-check.custom-switcheste acum .form-check.form-switch.
    • .custom-selecteste acum .form-select.
    • .custom-fileși .form-fileau fost înlocuite cu stiluri personalizate pe deasupra .form-control.
    • .custom-rangeeste acum .form-range.
    • A scapat nativ .form-control-filesi .form-control-range.

  • SpargereScăpat .input-group-appendși .input-group-prepend. Acum puteți doar să adăugați butoane și .input-group-textca copii direcți ai grupurilor de intrare.

  • Raza de chenar lipsă de lungă durată pe grupul de intrare cu un bug de feedback de validare este în sfârșit remediat prin adăugarea unei .has-validationclase suplimentare la grupurile de intrare cu validare.

  • Spargere S-au renunțat la clasele de aspect specifice formularului pentru sistemul nostru de grilă. Utilizați rețeaua și utilitățile noastre în loc de .form-group, .form-rowsau .form-inline.

  • SpargereEtichetele formularelor necesită acum .form-label.

  • Spargere .form-textnu mai setează display, permițându-vă să creați text de ajutor în linie sau să blocați după cum doriți doar prin schimbarea elementului HTML.

  • Pictogramele de validare nu mai sunt aplicate la <select>s cu multiple.

  • Fișierele Sass sursă rearanjate sub scss/forms/, inclusiv stilurile grupurilor de intrare.

Componente

  • Valorile unificate paddingpentru alerte, breadcrumb, carduri, meniuri derulante, grupuri de liste, modale, popovers și sfaturi cu instrumente să se bazeze pe $spacervariabila noastră. Vezi #30564 .

Acordeon

Alerte

  • Alertele au acum exemple cu pictograme .

  • S-au eliminat stilurile personalizate pentru <hr>s în fiecare alertă, deoarece folosesc deja currentColor.

Ecusoane

  • SpargereS-au eliminat toate .badge-*clasele de culoare pentru utilitățile de fundal (de exemplu, utilizați .bg-primaryîn loc de .badge-primary).

  • SpargereScăpat .badge-pill— utilizați în .rounded-pillschimb utilitarul.

  • SpargereS-au eliminat stilurile de trecere cu mouse-ul și de focalizare pentru <a>și <button>elemente.

  • Suplimentare implicită crescută pentru insigne de la .25em/ .5emla .35em/ .65em.

  • S-a simplificat aspectul implicit al pesmetului prin eliminarea padding, background-colorși border-radius.

  • S- a adăugat o nouă proprietate personalizată CSS --bs-breadcrumb-dividerpentru personalizare ușoară, fără a fi nevoie să recompilați CSS.

Butoane

  • Spargere Butoanele de comutare , cu casete de selectare sau radio, nu mai necesită JavaScript și au un nou marcaj. Nu mai avem nevoie de un element de împachetare, îl adăugăm.btn-checkla<input>, și îl asociam cu orice.btnclase de pe<label>. Vezi #30650 . Documentele pentru aceasta s-au mutat din pagina Butoane în noua secțiune Formulare.

  • Spargere Renunțat .btn-blockpentru utilități. În loc să utilizați .btn-blockpe .btn, înfășurați butoanele cu .d-gridși un .gap-*utilitar pentru a le distanța după cum este necesar. Treceți la clasele receptive pentru un control și mai mare asupra lor. Citiți documentele pentru câteva exemple.

  • Am actualizat button-variant()și button-outline-variant()mixin-urile pentru a accepta parametri suplimentari.

  • Butoane actualizate pentru a asigura un contrast sporit la trecerea cu mouse-ul și stările active.

  • Butoanele dezactivate au acum pointer-events: none;.

Card

  • SpargereA renunțat .card-deckla grila noastră. Împachetați cărțile în clase de coloane și adăugați un .row-cols-*container părinte pentru a recrea pachetele de cărți (dar cu mai mult control asupra alinierii receptive).

  • SpargereRenunțat .card-columnsîn favoarea Masoneriei. Vezi #28922 .

  • SpargereAm înlocuit .cardacordeonul bazat cu o nouă componentă pentru acordeon .

  • S-a adăugat o nouă .carousel-darkvariantă pentru textul întunecat, comenzile și indicatorii (excelent pentru fundaluri mai deschise).

  • Pictogramele chevron au fost înlocuite pentru comenzile carusel cu SVG-uri noi din Bootstrap Icons .

Butonul de închidere

  • SpargereRedenumită .closepentru .btn-closeun nume mai puțin generic.

  • Butoanele de închidere folosesc acum un background-image(SVG încorporat) în loc de un &times;în HTML, permițând o personalizare mai ușoară fără a fi nevoie să vă atingeți marcajul.

  • S-a adăugat o nouă .btn-close-whitevariantă care folosește filter: invert(1)pentru a activa pictogramele de respingere cu contrast mai mare pe fundaluri mai întunecate.

Colaps

  • S-a eliminat ancorarea scroll pentru acordeoane.

  • S-au adăugat o nouă .dropdown-menu-darkvariantă și variabile asociate pentru meniurile derulante întunecate la cerere.

  • S-a adăugat o nouă variabilă pentru $dropdown-padding-x.

  • Divizorul derulant a fost întunecat pentru un contrast îmbunătățit.

  • SpargereToate evenimentele pentru meniul derulant sunt acum declanșate pe butonul de comutare a listei derulante și apoi sunt afișate la elementul părinte.

  • Meniurile drop-down au acum un data-bs-popper="static"atribut setat atunci când poziționarea dropdown-ului este statică și data-bs-popper="none"când dropdown-ul este în bara de navigare. Acest lucru este adăugat de JavaScript și ne ajută să folosim stiluri de poziție personalizate fără a interfera cu poziționarea lui Popper.

  • SpargereOpțiune abandonată flippentru pluginul dropdown în favoarea configurației native Popper. Acum puteți dezactiva comportamentul de răsturnare trecând o matrice goală pentru fallbackPlacementsopțiune în modificatorul de răsturnare .

  • Meniurile drop-down pot fi acum clicabile cu o nouă autoCloseopțiune pentru a gestiona comportamentul de închidere automată . Puteți utiliza această opțiune pentru a accepta clicul în interiorul sau în afara meniului derulant pentru a-l face interactiv.

  • Mențiunile derulante acceptă acum .dropdown-items-urile învelite în <li>s.

Jumbotron

Lista grupului

  • S-au adăugat noi nullvariabile pentru font-size, font-weight, color, și :hover colorla .nav-linkclasă.
  • SpargereBarele de navigare necesită acum un container în interior (pentru a simplifica drastic cerințele de spațiere și este necesar CSS).

Offcanvas

Paginare

  • Linkurile de paginare au acum elemente personalizabile margin-leftcare sunt rotunjite dinamic pe toate colțurile atunci când sunt separate unul de celălalt.

  • S-au adăugat transitionla linkurile de paginare.

Popovers

  • SpargereRedenumit .arrowîn .popover-arrowșablonul nostru popover implicit.

  • whiteListOpțiune redenumită în allowList.

Spineri

  • Spinners onorează acum prefers-reduced-motion: reduceprin încetinirea animațiilor. Vezi #31882 .

  • Alinierea verticală îmbunătățită a spinnerului.

Pâine prăjită

  • Pâinele prăjite pot fi acum poziționate într-o .toast-containercu ajutorul utilităților de poziționare .

  • S-a schimbat durata prestabilită de pâine prăjită la 5 secunde.

  • Scos overflow: hiddendin pâine prăjită și înlocuit cu s- border-radiusuri adecvate cu calc()funcții.

Sfaturi instrumente

  • SpargereRedenumit .arrowîn .tooltip-arrowșablonul nostru implicit de indicații.

  • SpargereValoarea implicită pentru fallbackPlacementseste schimbată în ['top', 'right', 'bottom', 'left']pentru o mai bună plasare a elementelor popper.

  • SpargerewhiteListOpțiune redenumită în allowList.

Utilități

  • SpargereAu fost redenumite mai multe utilitare pentru a utiliza nume de proprietăți logice în loc de nume direcționale cu adăugarea suportului RTL:

    • Redenumit .left-*și .right-*către .start-*și .end-*.
    • Redenumit .float-leftși .float-rightcătre .float-startși .float-end.
    • Redenumit .border-leftși .border-rightcătre .border-startși .border-end.
    • Redenumit .rounded-leftși .rounded-rightcătre .rounded-startși .rounded-end.
    • Redenumit .ml-*și .mr-*către .ms-*și .me-*.
    • Redenumit .pl-*și .pr-*către .ps-*și .pe-*.
    • Redenumit .text-leftși .text-rightcătre .text-startși .text-end.

  • SpargereMarjele negative au fost dezactivate în mod implicit.

  • S-a adăugat o nouă .bg-bodyclasă pentru setarea rapidă a <body>fundalului lui la elemente suplimentare.

  • S- au adăugat noi utilități de poziție pentru top, right, bottomși left. Valorile includ 0, 50%, și 100%pentru fiecare proprietate.

  • S-au adăugat noi .translate-middle-xși .translate-middle-yutilități pentru a centra orizontal sau vertical elementele poziționate absolute/fixe.

  • Au fost adăugate noi border-widthutilități .

  • SpargereRedenumită .text-monospaceîn .font-monospace.

  • SpargereEliminată .text-hidedeoarece este o metodă învechită de a ascunde textul care nu ar trebui să mai fie folosit.

  • Utilități adăugate .fs-*pentru font-sizeutilități (cu RFS activat). Acestea folosesc aceeași scară ca și titlurile implicite ale HTML (1-6, de la mare la mic) și pot fi modificate prin harta Sass.

  • Spargere.font-weight-*Utilități redenumite .fw-*pentru concizie și consecvență.

  • Spargere.font-style-*Utilități redenumite .fst-*pentru concizie și consecvență.

  • Adăugat .d-gridla utilități de afișare și utilități noi gap( .gap) pentru layout-urile CSS Grid și flexbox.

  • SpargereS-au eliminat .rounded-smși rounded-lg, și a introdus o nouă scară de clase, .rounded-0la .rounded-3. Vezi #31687 .

  • Au fost adăugate noi line-heightutilități: .lh-1, .lh-sm, .lh-baseși .lh-lg. Vezi aici .

  • Am mutat .d-noneutilitarul în CSS-ul nostru pentru a-i oferi mai multă greutate față de alte utilitare de afișare.

  • S-a extins .visually-hidden-focusableajutorul pentru a lucra și pe containere, folosind :focus-within.

Ajutoare

  • Spargere Ajutoarele de încorporare responsive au fost redenumite pentru a raporta ajutoarele cu nume de clase noi și comportamente îmbunătățite, precum și o variabilă CSS utilă.

    • Clasele au fost redenumite pentru a se schimba byîn xraportul de aspect. De exemplu, .ratio-16by9este acum .ratio-16x9.
    • Am renunțat la .embed-responsive-itemselectorul de grup de elemente și în favoarea unui .ratio > *selector mai simplu. Nu mai este nevoie de clasă, iar ajutorul de raport funcționează acum cu orice element HTML.
    • Harta $embed-responsive-aspect-ratiosSass a fost redenumită $aspect-ratiosși valorile sale au fost simplificate pentru a include numele clasei și procentul ca key: valuepereche.
    • Variabilele CSS sunt acum generate și incluse pentru fiecare valoare din harta Sass. Modificați --bs-aspect-ratiovariabila pentru .ratioa crea orice raport de aspect personalizat .

  • Spargere Clasele „Cititor de ecran” sunt acum clase „ascunse vizual” .

    • S-a schimbat fișierul Sass de la scss/helpers/_screenreaders.scsslascss/helpers/_visually-hidden.scss
    • Redenumită .sr-onlyși .sr-only-focusablecătre .visually-hiddenși.visually-hidden-focusable
    • Redenumit sr-only()și sr-only-focusable()mixins la visually-hidden()și visually-hidden-focusable().

  • bootstrap-utilities.cssacum include și ajutoarele noștri. Ajutoarele nu mai trebuie importate în versiuni personalizate.

JavaScript

  • S-a renunțat la dependența jQuery și am rescris pluginurile pentru a fi în JavaScript obișnuit.

  • SpargereAtributele de date pentru toate pluginurile JavaScript sunt acum spațiate de nume pentru a ajuta la distingerea funcționalității Bootstrap de terțe părți și de propriul cod. De exemplu, folosim data-bs-toggleîn loc de data-toggle.

  • Toate pluginurile pot accepta acum un selector CSS ca prim argument. Puteți trece fie un element DOM, fie orice selector CSS valid pentru a crea o nouă instanță a pluginului:

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

  • popperConfigpoate fi transmisă ca o funcție care acceptă configurația implicită Popper a Bootstrap ca argument, astfel încât să puteți îmbina această configurație implicită în felul dumneavoastră. Se aplică listelor derulante, ferestrelor popover și sfaturi cu instrumente.

  • Valoarea implicită pentru fallbackPlacementseste schimbată în ['top', 'right', 'bottom', 'left']pentru o mai bună plasare a elementelor Popper. Se aplică listelor derulante, ferestrelor popover și sfaturi cu instrumente.

  • S-a eliminat sublinierea din metodele statice publice precum _getInstance()→ getInstance().