Treci la conținutul principal Treceți la navigarea documentelor
Check
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

v5.2.0

Design reîmprospătat

Bootstrap v5.2.0 oferă o actualizare subtilă a designului pentru o mână de componente și proprietăți din cadrul proiectului, mai ales prin valori rafinate border-radiusale butoanelor și controalelor de formulare . Documentația noastră a fost, de asemenea, actualizată cu o nouă pagină de pornire, un aspect mai simplu al documentelor, care nu mai restrânge secțiunile barei laterale și exemple mai proeminente de pictograme Bootstrap .

Mai multe variabile CSS

Am actualizat toate componentele noastre pentru a folosi variabile CSS. În timp ce Sass încă susține totul, fiecare componentă a fost actualizată pentru a include variabile CSS în clasele de bază ale componentelor (de exemplu, .btn), permițând mai multă personalizare în timp real a Bootstrap. În versiunile ulterioare, vom continua să extindem utilizarea variabilelor CSS în aspectul, formularele, ajutoarele și utilitățile noastre. Citiți mai multe despre variabilele CSS din fiecare componentă pe paginile de documentație respective.

Utilizarea variabilei noastre CSS va fi oarecum incompletă până la Bootstrap 6. Deși ne-ar plăcea să le implementăm pe deplin, riscă să provoace modificări nerespective. De exemplu, setarea $alert-border-width: var(--bs-border-width)în codul nostru sursă sparge potențialul Sass în propriul tău cod dacă ai făcut- o dintr- $alert-border-width * 2un motiv oarecare.

Ca atare, ori de câte ori este posibil, vom continua să facem eforturi către mai multe variabile CSS, dar vă rugăm să recunoașteți că implementarea noastră poate fi ușor limitată în v5.

Nou_maps.scss

Bootstrap v5.2.0 a introdus un nou fișier Sass cu _maps.scss. Scoate mai multe hărți Sass _variables.scsspentru a remedia o problemă în care actualizările unei hărți inițiale nu au fost aplicate hărților secundare care le extind. De exemplu, actualizările la $theme-colorsnu au fost aplicate altor hărți tematice care se bazau pe $theme-colors, rupând fluxurile de lucru de personalizare cheie. Pe scurt, Sass are o limitare în care odată ce o variabilă sau o hartă implicită a fost utilizată , aceasta nu poate fi actualizată. Există un dezavantaj similar cu variabilele CSS atunci când sunt folosite pentru a compune alte variabile CSS.

Acesta este motivul pentru care personalizările variabile din Bootstrap trebuie să apară după @import "functions", dar înainte @import "variables"și restul stivei noastre de import. Același lucru este valabil și pentru hărțile Sass - trebuie să înlocuiți valorile implicite înainte de a fi utilizate. Următoarele hărți au fost mutate în noua _maps.scss:

  • $theme-colors-rgb
  • $utilities-colors
  • $utilities-text
  • $utilities-text-colors
  • $utilities-bg
  • $utilities-bg-colors
  • $negative-spacers
  • $gutters

Compilările dvs. personalizate CSS Bootstrap ar trebui să arate acum cam așa cu un import separat de hărți.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Utilitati noi

Modificări suplimentare

  • S-a introdus o nouă $enable-container-classesopțiune. — Acum, când optați pentru aspectul experimental CSS Grid, .container-*clasele vor fi în continuare compilate, cu excepția cazului în care această opțiune este setată la false. De asemenea, containerele își păstrează acum valorile jgheabului.

  • Componenta Offcanvas are acum variații receptive . Clasa inițială .offcanvasrămâne neschimbată – ascunde conținutul în toate ferestrele de vizualizare. Pentru a o face receptivă, schimbați acea .offcanvasclasă în orice .offcanvas-{sm|md|lg|xl|xxl}clasă.

  • Despărțitoarele de masă mai groase sunt acum opt-in. — Am eliminat marginea mai groasă și mai dificil de suprascris dintre grupurile de tabele și am mutat-o ​​într-o clasă opțională pe care o puteți aplica, .table-group-divider. Consultați documentele din tabel pentru un exemplu.

  • Scrollspy a fost rescris pentru a utiliza API-ul Intersection Observer , ceea ce înseamnă că nu mai aveți nevoie de wrapper-uri parentale relative,offsetconfigurația depreciată și multe altele. Căutați ca implementările dvs. Scrollspy să fie mai precise și mai consecvente în evidențierea navigației.

  • Popover-urile și sfaturile instrumente folosesc acum variabile CSS. Unele variabile CSS au fost actualizate de la omologii lor Sass pentru a reduce numărul de variabile. Drept urmare, trei variabile au fost depreciate în această ediție: $popover-arrow-color, $popover-arrow-outer-color, și $tooltip-arrow-color.

  • S-au adăugat noi .text-bg-{color}ajutoare. În loc să setați individual .text-*și .bg-*utilități, puteți utiliza acum ajutorul pentru a .text-bg-*seta un background-colorprim plan contrastant color.

  • S-a adăugat .form-check-reverseun modificator pentru a inversa ordinea etichetelor și a casetelor de selectare/radiourilor asociate.

  • S-a adăugat suport pentru coloane cu dungi la tabele prin noua .table-striped-columnsclasă.

Pentru o listă completă a modificărilor, consultați proiectul v5.2.0 pe GitHub .

v5.1.0

  • S-a adăugat suport experimental pentru aspectul CSS Grid . — Aceasta este o lucrare în desfășurare și nu este încă gata pentru utilizare în producție, dar puteți opta pentru noua funcție prin Sass. Pentru a o activa, dezactivați grila implicită, setând $enable-grid-classes: falseși activați Grila CSS setând $enable-cssgrid: true.

  • Barele de navigare actualizate pentru a accepta offcanvas. — Adăugați sertare offcanvas în orice bară de navigare cu clasele receptive .navbar-expand-*și unele markupuri offcanvas.

  • A fost adăugată o nouă componentă substituent . — Cea mai nouă componentă a noastră, o modalitate de a oferi blocări temporare în locul conținutului real pentru a indica faptul că ceva încă se încarcă pe site-ul sau aplicația dvs.

  • Pluginul de restrângere acceptă acum restrângerea orizontală . — Adăugați .collapse-horizontalla dvs. .collapsepentru a restrânge în widthloc de height. Evitați revopsirea browserului setând un min-heightsau height.

  • S-au adăugat ajutoare noi pentru stivă și reguli verticale. — Aplicați rapid mai multe proprietăți flexbox pentru a crea rapid machete personalizate cu stive . Alegeți dintre stivele orizontale ( .hstack) și verticale ( ). .vstackAdăugați divizoare verticale similare <hr>elementelor cu noile .vrajutoare .

  • S-au adăugat noi :rootvariabile CSS globale. — S- au adăugat câteva variabile CSS noi la :rootnivelul de control al <body>stilurilor. Mai multe sunt în lucru, inclusiv în utilitățile și componentele noastre, dar pentru moment citiți variabilele CSS în secțiunea Personalizare .

  • Utilitare de culoare și de fundal revizuite pentru a utiliza variabilele CSS și au adăugat noi utilitare pentru opacitatea textului și opacitatea fundalului . — .text-* iar .bg-*utilitarele sunt acum construite cu variabile CSS și rgba()valori de culoare, permițându-vă să personalizați cu ușurință orice utilitar cu noi utilitare de opacitate.

  • S-au adăugat noi exemple de fragmente bazate pentru a arăta cum să personalizăm componentele noastre. — Trageți gata de utilizare componente personalizate și alte modele de design obișnuite cu noile noastre exemple de fragmente . Include subsoluri , liste derulante , grupuri de liste și modal .

  • S-au eliminat stilurile de poziționare neutilizate din popovers și tooltips , deoarece acestea sunt gestionate exclusiv de Popper. $tooltip-margina fost depreciat și setat nullîn acest proces.

Doriți mai multe informații? Citiți articolul de blog v5.1.0.

Hei acolo! Modificările aduse primei noastre versiuni majore de Bootstrap 5, v5.0.0, sunt documentate mai jos. Ele nu reflectă modificările suplimentare prezentate mai sus.

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

  • Spargere <hr>elementele folosesc acum heightîn loc de borderpentru a susține mai bine sizeatributul. Acest lucru permite, de asemenea, utilizarea utilităților de umplutură pentru a crea separatoare mai groase (de exemplu, <hr class="py-1">).

  • 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-control.custom-checkboxeste acum .form-check.
    • .custom-control.custom-custom-radioeste acum .form-check.
    • .custom-control.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.

  • Controalele formularului nu mai sunt folosite fixe heightatunci când este posibil, în schimb amânând pentru min-heighta îmbunătăți personalizarea și compatibilitatea cu alte componente.

  • 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 drop-down-ului este statică sau drop-down 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).
  • SpargereClasa .activenu mai poate fi aplicată la .nav-items, trebuie aplicată direct pe .nav-links.

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-*la .start-*și .end-*.
    • Redenumită .float-leftși .float-rightla .float-startși .float-end.
    • Redenumită .border-leftși .border-rightla .border-startși .border-end.
    • Redenumită .rounded-leftși .rounded-rightla .rounded-startși .rounded-end.
    • Redenumită .ml-*și .mr-*la .ms-*și .me-*.
    • Redenumită .pl-*și .pr-*la .ps-*și .pe-*.
    • Redenumită .text-leftși .text-rightla .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:

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