S'està migrant a la v5

Feu un seguiment i reviseu els canvis als fitxers font, la documentació i els components d'Bootstrap per ajudar-vos a migrar de la v4 a la v5.

En aquesta pàgina

Dependències

S'ha deixat caure jQuery.
S'ha actualitzat de Popper v1.x a Popper v2.x.
S'ha substituït Libsass per Dart Sass, ja que el nostre compilador Sass donat a Libsass estava obsolet.
Hem migrat de Jekyll a Hugo per crear la nostra documentació

Suport del navegador

S'ha caigut Internet Explorer 10 i 11
S'ha caigut Microsoft Edge < 16 (Legacy Edge)
S'ha caigut Firefox <60
Safari abandonat < 12
S'ha caigut iOS Safari < 12
S'ha caigut Chrome <60

Canvis de documentació

Pàgina d'inici, disseny de documents i peu de pàgina redissenyats.
S'ha afegit una nova guia de paquets .
S'ha afegit una nova secció Personalitza , que substitueix la pàgina Theming de la v4 , amb nous detalls sobre Sass, opcions de configuració global, esquemes de colors, variables CSS i molt més.
S'ha reorganitzat tota la documentació del formulari en una nova secció de Formularis , dividint el contingut en pàgines més centrades.
De la mateixa manera, s'ha actualitzat la secció Disseny , per concretar el contingut de la quadrícula amb més claredat.
S'ha canviat el nom de la pàgina del component "Navs" a "Navs & Tabs".
S'ha canviat el nom de la pàgina "Checks" a "Checks i ràdios".
S'ha redissenyat la barra de navegació i s'ha afegit un nou subnav per facilitar la navegació pels nostres llocs i versions de documents.
S'ha afegit una nova drecera de teclat per al camp de cerca: Ctrl + /.

Sass

Hem abandonat les combinacions de mapes Sass predeterminades per facilitar l'eliminació de valors redundants. Tingueu en compte que ara heu de definir tots els valors dels mapes Sass com $theme-colors. Consulteu com tractar amb els mapes Sass .
TrencamentS'ha canviat el nom color-yiq()de la funció i les variables relacionades perquè color-contrast()ja no està relacionada amb l'espai de color YIQ. Veure #30168.
- $yiq-contrasted-thresholdes rebateja per $min-contrast-ratio.
- $yiq-text-darki $yiq-text-lightes canvien de nom respectivament a $color-contrast-darki $color-contrast-light.
TrencamentEls paràmetres de mixins de consulta de mitjans han canviat per a un enfocament més lògic.
- media-breakpoint-down()utilitza el punt d'interrupció en si en comptes del següent punt d'interrupció (p. ex., media-breakpoint-down(lg)en comptes d' media-breakpoint-down(md)orientar les finestres més petites que lg).
- De la mateixa manera, el segon paràmetre a media-breakpoint-between()també utilitza el punt d'interrupció en comptes del següent punt d'interrupció (p. ex., media-between(sm, lg)en comptes de les media-breakpoint-between(sm, md)finestres físiques entre smi lg).
TrencamentS'han eliminat els estils d'impressió i la $enable-print-stylesvariable. Encara hi ha classes d'impressió. Veure #28339 .
TrencamentS'han deixat caure color(), theme-color(), i gray()funcions a favor de variables. Veure #29083 .
TrencamentS'ha canviat el nom theme-color-level()de la funció color-level()i ara accepta qualsevol color que vulgueu en comptes de només $theme-colorcolors. Vegeu #29083 Compte: color-level() es va deixar més tard a v5.0.0-alpha3.
TrencamentReanomenat $enable-prefers-reduced-motion-media-queryi $enable-pointer-cursor-for-buttonsa $enable-reduced-motioni $enable-button-pointersper a la brevetat.
TrencamentS'ha eliminat el bg-gradient-variant()mixin. Utilitzeu la .bg-gradientclasse per afegir degradats als elements en lloc de les .bg-gradient-*classes generades.
Trencament S'han eliminat mixins anteriorment obsolets:
- hover, hover-focus, plain-hover-focus, ihover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(també va deixar caure la classe d'utilitat associada, .text-hide)
- visibility()
- form-control-focus()
TrencamentS'ha canviat el nom scale-color()de la funció a shift-color()per evitar la col·lisió amb la funció d'escala de color de Sass.
box-shadowEls mixins ara permeten nullvalors i eliminar -los nonede diversos arguments. Veure #30394 .
El border-radius()mixin ara té un valor per defecte.

Sistema de color

El sistema de color que funcionava color-level()i $theme-color-intervales va eliminar a favor d'un nou sistema de color. Totes les funcions lighten()i darken()de la nostra base de codi es substitueixen per tint-color()i shade-color(). Aquestes funcions barrejaran el color amb blanc o negre en lloc de canviar-ne la lluminositat en una quantitat fixa. shift-color()Tindrà o matisarà un color depenent de si el seu paràmetre de pes és positiu o negatiu . Vegeu #30622 per a més detalls.
S'han afegit nous matisos i matisos per a cada color, proporcionant nou colors separats per a cada color base, com a noves variables de Sass.
Contrast de color millorat. Relació de contrast de color augmentada de 3:1 a 4,5:1 i colors blau, verd, cian i rosa actualitzats per garantir el contrast WCAG 2.1 AA. També hem canviat el nostre color de contrast de color de $gray-900a $black.
Per donar suport al nostre sistema de color, hem afegit noves personalitats tint-color()i shade-color()funcions per barrejar els nostres colors adequadament.

Actualitzacions de la graella

Nou punt d'interrupció! S'ha afegit un nou xxlpunt d'interrupció per 1400pxi amunt. No hi ha canvis a la resta de punts d'interrupció.
Canals millorats. Els canalons ara s'estableixen en rems i són més estrets que v4 ( 1.5rem, o aproximadament 24px, a partir de 30px). Això alinea els canals del nostre sistema de xarxa amb les nostres utilitats d'espaiat.
- S'ha afegit una nova classe de canalons ( .g-*, .gx-*, i .gy-*) per controlar canalons horitzontals/verticals, canalons horitzontals i canalons verticals.
- TrencamentS'ha canviat el nom .no-guttersa .g-0perquè coincideixi amb les noves utilitats de canalons.
Les columnes ja no s'han position: relativeaplicat, de manera que és possible que hàgiu d'afegir .position-relativealguns elements per restaurar aquest comportament.
TrencamentVa deixar diverses .order-*classes que sovint no s'utilitzaven. Ara només proporcionem fora .order-1de .order-5la caixa.
TrencamentS'ha eliminat el .mediacomponent, ja que es pot replicar fàcilment amb utilitats. Vegeu #28265 i la pàgina d'utilitats flexibles per obtenir un exemple .
Trencament bootstrap-grid.cssara només s'aplica box-sizing: border-boxa la columna en lloc de restablir la mida global de la caixa. D'aquesta manera, els nostres estils de quadrícula es poden utilitzar en més llocs sense interferències.
$enable-grid-classesja no desactiva la generació de classes de contenidors. Veure #29146.
S'ha actualitzat el make-colmixin per defecte a columnes iguals sense una mida especificada.

Contingut, reinici, etc

RFS ara està habilitat per defecte. Els encapçalaments que utilitzen elfont-size()mixin s'ajustaran automàticamentfont-sizea escala amb la finestra gràfica. Aquesta funció anteriorment estava activada amb la v4.
TrencamentHem revisat la nostra tipografia de visualització per substituir les nostres $display-*variables i amb un $display-font-sizesmapa Sass. També s'han eliminat les $display-*-weightvariables individuals per a un únic $display-font-weighti ajustat font-size.
S'han afegit dues .display-*mides d'encapçalament noves .display-5i .display-6.
Els enllaços es subratllen de manera predeterminada (no només al passar el cursor), tret que formen part de components específics.
S'han redissenyat taules per actualitzar els seus estils i reconstruir-los amb variables CSS per obtenir més control sobre l'estil.
TrencamentLes taules imbricades ja no hereten estils.
Trencament .thead-lighti .thead-darks'eliminen a favor de les .table-*classes variants que es poden utilitzar per a tots els elements de la taula ( thead, tbody, tfoot, tri ) th.td
TrencamentEl table-row-variant()mixin es canvia de nom table-variant()i només accepta 2 paràmetres: $color(nom del color) i $value(codi de color). El color de la vora i els colors d'accent es calculen automàticament a partir de les variables del factor de la taula.
Dividiu les variables de farciment de cel·les de la taula en -yi -x.
TrencamentClasse abandonada .pre-scrollable. Veure #29135
Trencament .text-*Les utilitats ja no afegeixen estats de flotació i focus als enllaços. .link-*En el seu lloc, es poden utilitzar classes auxiliars. Veure #29267
TrencamentClasse abandonada .text-justify. Veure #29793
Trencament <hr>Els elements ara s'utilitzen heighten lloc de borderper donar suport millor a l' sizeatribut. Això també permet l'ús d'utilitats de farciment per crear divisors més gruixuts (p. ex., <hr class="py-1">).
Restableix l'horitzontal predeterminat i padding-leftels elements del navegador a .<ul><ol>40px2rem
S'ha afegit $enable-smooth-scroll, que s'aplica scroll-behavior: smootha nivell mundial, excepte per als usuaris que demanen un moviment reduït mitjançant prefers-reduced-motionla consulta de mitjans. Veure #31877

RTL

Les variables, utilitats i mixins específiques de direcció horitzontal s'han canviat de nom per utilitzar propietats lògiques com les que es troben als dissenys de flexbox, per exemple, starti enden lloc de lefti right.

Formes

S'han afegit nous formularis flotants! Hem promocionat l'exemple d'etiquetes flotants a components de formulari totalment compatibles. Consulteu la nova pàgina d'etiquetes flotants.
Trencament Elements de formulari nadius i personalitzats consolidats. S'han consolidat les caselles de selecció, les ràdios, les seleccions i altres entrades que tenien classes natives i personalitzades a la v4. Ara gairebé tots els nostres elements de formulari són totalment personalitzats, la majoria sense necessitat d'HTML personalitzat.
- .custom-checkés ara .form-check.
- .custom-check.custom-switchés ara .form-check.form-switch.
- .custom-selectés ara .form-select.
- .custom-filei .form-filehan estat substituïts per estils personalitzats a la part superior de .form-control.
- .custom-rangeés ara .form-range.
- Va caure nadiu .form-control-filei .form-control-range.
TrencamentCaigut .input-group-appendi .input-group-prepend. Ara només podeu afegir botons i .input-group-textcom a fills directes dels grups d'entrada.
Finalment, es corregeix el radi de la vora desaparegut al grup d'entrada amb un error de validació afegint una .has-validationclasse addicional als grups d'entrada amb validació.
Trencament S'han eliminat les classes de disseny específiques del formulari per al nostre sistema de quadrícula. Utilitzeu la nostra xarxa i les nostres utilitats en lloc de .form-group, .form-row, o .form-inline.
TrencamentLes etiquetes dels formularis ara requereixen .form-label.
Trencament .form-textja no estableix display, la qual cosa us permet crear text d'ajuda en línia o bloquejar com vulgueu només canviant l'element HTML.
Les icones de validació ja no s'apliquen a <select>s amb multiple.
S'han reordenat els fitxers Sass d'origen a scss/forms/, inclosos els estils de grup d'entrada.

Components

Valors unificats paddingper a alertes, mides de navegació, targetes, desplegables, grups de llistes, modalitats, popovers i informació sobre eines que es basen en la nostra $spacervariable. Veure #30564 .

Acordió

S'ha afegit un nou component d'acordió .

Alertes

Les alertes ara tenen exemples amb icones .
S'han eliminat els estils personalitzats per a <hr>s a cada alerta ja que ja utilitzen currentColor.

Insígnies

TrencamentS'han eliminat totes .badge-*les classes de color per a les utilitats de fons (p. ex., utilitzar .bg-primaryen lloc de .badge-primary).
TrencamentEliminat : .badge-pillutilitzeu la .rounded-pillutilitat.
TrencamentS'han eliminat els estils de desplaçament i focus per als elements <a>i <button>.
S'ha augmentat el farciment predeterminat per a les insígnies de .25em/ .5ema .35em/ .65em.

Pa ratllat

S'ha simplificat l'aspecte predeterminat de les ratlles de pa eliminant padding, background-colori border-radius.
S'ha afegit una nova propietat personalitzada CSS --bs-breadcrumb-dividerper a una personalització fàcil sense necessitat de recompilar CSS.

Botons

Trencament Els botons de commutació , amb caselles de selecció o ràdios, ja no requereixen JavaScript i tenen un marcatge nou. Ja no necessitem un element d'embolcall, afegir.btn-check-lo a<input>, i emparellar-lo amb cap.btnclasse de<label>. Veure #30650 . Els documents per a això s'han mogut de la nostra pàgina de botons a la nova secció de formularis.
Trencament Abandonat .btn-blockper serveis públics. En lloc d'utilitzar .btn-blocka .btn, emboliqui els botons amb .d-griduna .gap-*utilitat per espaiar-los segons sigui necessari. Canvia a classes responsives per controlar-les encara més. Llegiu els documents per obtenir alguns exemples.
Hem actualitzat els nostres button-variant()i button-outline-variant()mixins per admetre paràmetres addicionals.
S'han actualitzat els botons per garantir un contrast més gran en els estats actius i en passar el cursor.
Els botons desactivats ara tenen pointer-events: none;.

Targeta

TrencamentCaigut .card-decka favor de la nostra graella. Emboliqueu les vostres cartes en classes de columnes i afegiu un .row-cols-*contenidor principal per recrear les baralles de cartes (però amb més control sobre l'alineació sensible).
TrencamentAbandonat .card-columnsa favor de la Maçoneria. Veure #28922 .
TrencamentS'ha substituït l' .cardacordió basat per un nou component d'acordió .

Carrusel

S'ha afegit una nova .carousel-darkvariant per a text fosc, controls i indicadors (ideal per a fons més clars).
S'han substituït les icones de chevron per als controls de carrusel amb nous SVG de Bootstrap Icons .

Botó de tancament

TrencamentS'ha canviat de nom .closeper .btn-closea un nom menys genèric.
Els botons de tanca ara utilitzen un background-image(SVG incrustat) en lloc d'un ×a l'HTML, cosa que permet una personalització més fàcil sense necessitat de tocar el vostre marcatge.
S'ha afegit una nova .btn-close-whitevariant que s'utilitza filter: invert(1)per habilitar les icones d'ignorar un contrast més alt sobre fons més foscos.

Col·lapse

S'ha eliminat l'ancoratge de desplaçament per als acordions.

Desplegables

S'ha afegit una nova .dropdown-menu-darkvariant i variables associades per als menús desplegables foscos sota demanda.
S'ha afegit una nova variable per a $dropdown-padding-x.
S'ha enfosquit el divisor desplegable per millorar el contrast.
TrencamentTots els esdeveniments del menú desplegable s'activen ara al botó de commutació del menú desplegable i, a continuació, s'envien a l'element principal.
Els menús desplegables ara tenen un data-bs-popper="static"atribut establert quan el posicionament del desplegable és estàtic i data-bs-popper="none"quan el desplegable està a la barra de navegació. Això s'afegeix amb el nostre JavaScript i ens ajuda a utilitzar estils de posició personalitzats sense interferir amb el posicionament de Popper.
TrencamentOpció abandonada flipper al complement desplegable a favor de la configuració nativa de Popper. Ara podeu desactivar el comportament d'invertir passant una matriu buida per a fallbackPlacementsl'opció al modificador de volteig .
Ara es pot fer clic als menús desplegables amb una nova autoCloseopció per gestionar el comportament de tancament automàtic . Podeu utilitzar aquesta opció per acceptar el clic dins o fora del menú desplegable per fer-lo interactiu.
Els desplegables ara admeten .dropdown-items embolcallats en <li>s.

Jumbotron

TrencamentS'ha deixat caure el component jumbotron, ja que es pot replicar amb utilitats. Vegeu el nostre nou exemple de Jumbotron per obtenir una demostració.

Grup de llista

S'ha afegit un .list-group-numberedmodificador nou als grups de llista.

Navegacions i pestanyes

S'han afegit noves nullvariables per a font-size, font-weight, colori :hover colora la .nav-linkclasse.

Barres de navegació

TrencamentLes barres de navegació ara requereixen un contenidor dins (per simplificar dràsticament els requisits d'espaiat i cal CSS).

Offcanvas

S'ha afegit el nou component offcanvas .

Paginació

Els enllaços de paginació ara es poden personalitzar margin-leftque s'arrodonien dinàmicament a totes les cantonades quan estan separats entre si.
S'han afegit transitions als enllaços de paginació.

Popovers

TrencamentS'ha canviat el nom .arrowa .popover-arrowla nostra plantilla popover predeterminada.
S'ha canviat el nom whiteListde l'opció a allowList.

Spiners

Els spinners ara honoren prefers-reduced-motion: reducealentint les animacions. Veure #31882 .
Alineació vertical millorada del spinner.

Torrades

Ara les torrades es poden col·locar en un .toast-containeramb l'ajuda de les utilitats de posicionament .
S'ha canviat la durada predeterminada del brindis a 5 segons.
Tret overflow: hiddende les torrades i substituït per s adequats border-radiusamb calc()funcions.

Consells d'eines

TrencamentS'ha canviat el nom .arrowa .tooltip-arrowla nostra plantilla d'informació eines predeterminada.
TrencamentEl valor per defecte fallbackPlacementses canvia a ['top', 'right', 'bottom', 'left']per a una millor col·locació dels elements popper.
TrencamentS'ha canviat el nom whiteListde l'opció a allowList.

Utilitats

TrencamentS'han canviat el nom de diverses utilitats per utilitzar noms de propietats lògiques en lloc de noms direccionals amb l'addició de suport RTL:
- Reanomenat .left-*i .right-*a .start-*i .end-*.
- Reanomenat .float-lefti .float-righta .float-starti .float-end.
- Reanomenat .border-lefti .border-righta .border-starti .border-end.
- Reanomenat .rounded-lefti .rounded-righta .rounded-starti .rounded-end.
- Reanomenat .ml-*i .mr-*a .ms-*i .me-*.
- Reanomenat .pl-*i .pr-*a .ps-*i .pe-*.
- Reanomenat .text-lefti .text-righta .text-starti .text-end.
TrencamentS'han desactivat els marges negatius de manera predeterminada.
S'ha afegit una nova .bg-bodyclasse per establir ràpidament el <body>fons de '' a elements addicionals.
S'han afegit noves utilitats de posició per a top, right, bottomi left. Els valors inclouen 0, 50%, i 100%per a cada propietat.
S'han afegit nous .translate-middle-xi .translate-middle-yutilitats per centrar horitzontalment o verticalment elements posicionats absoluts/fixos.
S'han afegit noves border-widthutilitats .
TrencamentS'ha canviat de nom .text-monospacea .font-monospace.
TrencamentS'ha eliminat .text-hideperquè és un mètode antiquat per amagar text que ja no s'hauria d'utilitzar.
S'han afegit .fs-*utilitats per a font-sizeutilitats (amb RFS habilitat). Aquests utilitzen la mateixa escala que els encapçalaments predeterminats d'HTML (1-6, de gran a petit) i es poden modificar mitjançant el mapa Sass.
Trencament.font-weight-*Utilitats rebatejades pel que .fw-*fa a la brevetat i la coherència.
Trencament.font-style-*Utilitats rebatejades pel que .fst-*fa a la brevetat i la coherència.
S'ha afegit .d-grida les utilitats de visualització i noves gaputilitats ( .gap) per a dissenys de quadrícula CSS i flexbox.
TrencamentS'ha eliminat .rounded-smi rounded-lg, i es va introduir una nova escala de classes, .rounded-0a .rounded-3. Veure #31687 .
S'han afegit noves line-heightutilitats: .lh-1, .lh-sm, .lh-basei .lh-lg. Veure aquí .
Vam moure la .d-noneutilitat al nostre CSS per donar-li més pes sobre altres utilitats de visualització.
S'ha ampliat l' .visually-hidden-focusableajudant per treballar també en contenidors, utilitzant :focus-within.

Ajudants

Trencament Els ajudants d'inserció responsius s'han canviat de nom a ajudants de proporció amb noms de classe nous i comportaments millorats, així com una variable CSS útil.
- S'ha canviat el nom de les classes per canviar bya xla relació d'aspecte. Per exemple, .ratio-16by9és ara .ratio-16x9.
- Hem deixat caure el .embed-responsive-itemselector de grup d'elements i a favor d'un .ratio > *selector més senzill. No es necessita més classe i l'ajudant de proporció ara funciona amb qualsevol element HTML.
- S'ha $embed-responsive-aspect-ratioscanviat el nom del mapa Sass $aspect-ratiosi els seus valors s'han simplificat per incloure el nom de la classe i el percentatge com a key: valueparell.
- Ara es generen i s'inclouen variables CSS per a cada valor del mapa Sass. Modifiqueu la --bs-aspect-ratiovariable .ratioper crear qualsevol relació d'aspecte personalitzada .
Trencament Les classes de "lector de pantalla" ara són classes "ocultes visualment" .
- S'ha canviat el fitxer Sass de scss/helpers/_screenreaders.scssascss/helpers/_visually-hidden.scss
- Reanomenat .sr-onlyi .sr-only-focusablea .visually-hiddeni.visually-hidden-focusable
- S'ha canviat de nom sr-only()i sr-only-focusable()barreja a visually-hidden()i visually-hidden-focusable().
bootstrap-utilities.cssara també inclou els nostres ajudants. Els ajudants ja no s'han d'importar a les compilacions personalitzades.

JavaScript

S'ha eliminat la dependència de jQuery i s'han reescrit els connectors perquè estiguin en JavaScript normal.
TrencamentEls atributs de dades de tots els connectors de JavaScript ara tenen espais de noms per ajudar a distingir la funcionalitat Bootstrap de tercers i del vostre propi codi. Per exemple, fem servir data-bs-toggleen lloc de data-toggle.
Ara tots els connectors poden acceptar un selector CSS com a primer argument. Podeu passar un element DOM o qualsevol selector CSS vàlid per crear una nova instància del connector:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfiges pot passar com una funció que accepta la configuració de Popper per defecte de Bootstrap com a argument, de manera que pugueu combinar aquesta configuració predeterminada a la vostra manera. S'aplica a menús desplegables, finestres emergents i informació sobre eines.
El valor predeterminat fallbackPlacementses canvia a ['top', 'right', 'bottom', 'left']per a una millor col·locació dels elements Popper. S'aplica a menús desplegables, finestres emergents i informació sobre eines.
S'ha eliminat el guió baix dels mètodes estàtics públics com _getInstance()→ getInstance().