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.
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-threshold
es rebateja per$min-contrast-ratio
.$yiq-text-dark
i$yiq-text-light
es canvien de nom respectivament a$color-contrast-dark
i$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 quelg
).- 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 lesmedia-breakpoint-between(sm, md)
finestres físiques entresm
ilg
).
-
TrencamentS'han eliminat els estils d'impressió i la
$enable-print-styles
variable. Encara hi ha classes d'impressió. Veure #28339 . -
TrencamentS'han deixat caure
color()
,theme-color()
, igray()
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-color
colors. Vegeu #29083 Compte:color-level()
es va deixar més tard av5.0.0-alpha3
. -
TrencamentReanomenat
$enable-prefers-reduced-motion-media-query
i$enable-pointer-cursor-for-buttons
a$enable-reduced-motion
i$enable-button-pointers
per a la brevetat. -
TrencamentS'ha eliminat el
bg-gradient-variant()
mixin. Utilitzeu la.bg-gradient
classe 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ó ashift-color()
per evitar la col·lisió amb la funció d'escala de color de Sass. -
box-shadow
Els mixins ara permetennull
valors i eliminar -losnone
de 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-interval
es va eliminar a favor d'un nou sistema de color. Totes les funcionslighten()
idarken()
de la nostra base de codi es substitueixen pertint-color()
ishade-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-900
a$black
. -
Per donar suport al nostre sistema de color, hem afegit noves personalitats
tint-color()
ishade-color()
funcions per barrejar els nostres colors adequadament.
Actualitzacions de la graella
-
Nou punt d'interrupció! S'ha afegit un nou
xxl
punt d'interrupció per1400px
i 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 aproximadament24px
, a partir de30px
). 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-gutters
a.g-0
perquè coincideixi amb les noves utilitats de canalons.
- S'ha afegit una nova classe de canalons (
-
Les columnes ja no s'han
position: relative
aplicat, de manera que és possible que hàgiu d'afegir.position-relative
alguns elements per restaurar aquest comportament. -
TrencamentVa deixar diverses
.order-*
classes que sovint no s'utilitzaven. Ara només proporcionem fora.order-1
de.order-5
la caixa. -
TrencamentS'ha eliminat el
.media
component, 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.css
ara només s'aplicabox-sizing: border-box
a 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-classes
ja no desactiva la generació de classes de contenidors. Veure #29146. -
S'ha actualitzat el
make-col
mixin per defecte a columnes iguals sense una mida especificada.
Contingut, reinici, etc
-
RFS ara està habilitat per defecte. Els encapçalaments que utilitzen el
font-size()
mixin s'ajustaran automàticamentfont-size
a 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-sizes
mapa Sass. També s'han eliminat les$display-*-weight
variables individuals per a un únic$display-font-weight
i ajustatfont-size
. -
S'han afegit dues
.display-*
mides d'encapçalament noves.display-5
i.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-light
i.thead-dark
s'eliminen a favor de les.table-*
classes variants que es poden utilitzar per a tots els elements de la taula (thead
,tbody
,tfoot
,tr
i )th
.td
-
TrencamentEl
table-row-variant()
mixin es canvia de nomtable-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
-y
i-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 -
Restableix l'horitzontal predeterminat i
padding-left
els elements del navegador a .<ul>
<ol>
40px
2rem
-
S'ha afegit
$enable-smooth-scroll
, que s'aplicascroll-behavior: smooth
a nivell mundial, excepte per als usuaris que demanen un moviment reduït mitjançantprefers-reduced-motion
la 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,
start
iend
en lloc deleft
iright
.
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-file
i.form-file
han estat substituïts per estils personalitzats a la part superior de.form-control
..custom-range
és ara.form-range
.- Va caure nadiu
.form-control-file
i.form-control-range
.
-
TrencamentCaigut
.input-group-append
i.input-group-prepend
. Ara només podeu afegir botons i.input-group-text
com 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-validation
classe 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-text
ja no estableixdisplay
, 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 ambmultiple
. -
S'han reordenat els fitxers Sass d'origen a
scss/forms/
, inclosos els estils de grup d'entrada.
Components
- Valors unificats
padding
per a alertes, mides de navegació, targetes, desplegables, grups de llistes, modalitats, popovers i informació sobre eines que es basen en la nostra$spacer
variable. 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 utilitzencurrentColor
.
Insígnies
-
TrencamentS'han eliminat totes
.badge-*
les classes de color per a les utilitats de fons (p. ex., utilitzar.bg-primary
en lloc de.badge-primary
). -
TrencamentEliminat :
.badge-pill
utilitzeu la.rounded-pill
utilitat. -
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
/.5em
a.35em
/.65em
.
Pa ratllat
-
S'ha simplificat l'aspecte predeterminat de les ratlles de pa eliminant
padding
,background-color
iborder-radius
. -
S'ha afegit una nova propietat personalitzada CSS
--bs-breadcrumb-divider
per 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.btn
classe 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-block
per serveis públics. En lloc d'utilitzar.btn-block
a.btn
, emboliqui els botons amb.d-grid
una.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()
ibutton-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-deck
a 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-columns
a favor de la Maçoneria. Veure #28922 . -
TrencamentS'ha substituït l'
.card
acordió basat per un nou component d'acordió .
Carrusel
-
S'ha afegit una nova
.carousel-dark
variant 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
.close
per.btn-close
a 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-white
variant que s'utilitzafilter: 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-dark
variant 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 idata-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
flip
per al complement desplegable a favor de la configuració nativa de Popper. Ara podeu desactivar el comportament d'invertir passant una matriu buida per afallbackPlacements
l'opció al modificador de volteig . -
Ara es pot fer clic als menús desplegables amb una nova
autoClose
opció 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-item
s 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-numbered
modificador nou als grups de llista.
Navegacions i pestanyes
- S'han afegit noves
null
variables per afont-size
,font-weight
,color
i:hover
color
a la.nav-link
classe.
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-left
que s'arrodonien dinàmicament a totes les cantonades quan estan separats entre si. -
S'han afegit
transition
s als enllaços de paginació.
Popovers
-
TrencamentS'ha canviat el nom
.arrow
a.popover-arrow
la nostra plantilla popover predeterminada. -
S'ha canviat el nom
whiteList
de l'opció aallowList
.
Spiners
-
Els spinners ara honoren
prefers-reduced-motion: reduce
alentint les animacions. Veure #31882 . -
Alineació vertical millorada del spinner.
Torrades
-
Ara les torrades es poden col·locar en un
.toast-container
amb l'ajuda de les utilitats de posicionament . -
S'ha canviat la durada predeterminada del brindis a 5 segons.
-
Tret
overflow: hidden
de les torrades i substituït per s adequatsborder-radius
ambcalc()
funcions.
Consells d'eines
-
TrencamentS'ha canviat el nom
.arrow
a.tooltip-arrow
la nostra plantilla d'informació eines predeterminada. -
TrencamentEl valor per defecte
fallbackPlacements
es canvia a['top', 'right', 'bottom', 'left']
per a una millor col·locació dels elements popper. -
TrencamentS'ha canviat el nom
whiteList
de l'opció aallowList
.
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-left
i.float-right
a.float-start
i.float-end
. - Reanomenat
.border-left
i.border-right
a.border-start
i.border-end
. - Reanomenat
.rounded-left
i.rounded-right
a.rounded-start
i.rounded-end
. - Reanomenat
.ml-*
i.mr-*
a.ms-*
i.me-*
. - Reanomenat
.pl-*
i.pr-*
a.ps-*
i.pe-*
. - Reanomenat
.text-left
i.text-right
a.text-start
i.text-end
.
- Reanomenat
-
TrencamentS'han desactivat els marges negatius de manera predeterminada.
-
S'ha afegit una nova
.bg-body
classe per establir ràpidament el<body>
fons de '' a elements addicionals. -
S'han afegit noves utilitats de posició per a
top
,right
,bottom
ileft
. Els valors inclouen0
,50%
, i100%
per a cada propietat. -
S'han afegit nous
.translate-middle-x
i.translate-middle-y
utilitats per centrar horitzontalment o verticalment elements posicionats absoluts/fixos. -
S'han afegit noves
border-width
utilitats . -
TrencamentS'ha canviat de nom
.text-monospace
a.font-monospace
. -
TrencamentS'ha eliminat
.text-hide
perquè és un mètode antiquat per amagar text que ja no s'hauria d'utilitzar. -
S'han afegit
.fs-*
utilitats per afont-size
utilitats (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-grid
a les utilitats de visualització i novesgap
utilitats (.gap
) per a dissenys de quadrícula CSS i flexbox. -
TrencamentS'ha eliminat
.rounded-sm
irounded-lg
, i es va introduir una nova escala de classes,.rounded-0
a.rounded-3
. Veure #31687 . -
S'han afegit noves
line-height
utilitats:.lh-1
,.lh-sm
,.lh-base
i.lh-lg
. Veure aquí . -
Vam moure la
.d-none
utilitat al nostre CSS per donar-li més pes sobre altres utilitats de visualització. -
S'ha ampliat l'
.visually-hidden-focusable
ajudant 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
by
ax
la relació d'aspecte. Per exemple,.ratio-16by9
és ara.ratio-16x9
. - Hem deixat caure el
.embed-responsive-item
selector 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-ratios
canviat el nom del mapa Sass$aspect-ratios
i els seus valors s'han simplificat per incloure el nom de la classe i el percentatge com akey: value
parell. - Ara es generen i s'inclouen variables CSS per a cada valor del mapa Sass. Modifiqueu la
--bs-aspect-ratio
variable.ratio
per crear qualsevol relació d'aspecte personalitzada .
- S'ha canviat el nom de les classes per canviar
-
Trencament Les classes de "lector de pantalla" ara són classes "ocultes visualment" .
- S'ha canviat el fitxer Sass de
scss/helpers/_screenreaders.scss
ascss/helpers/_visually-hidden.scss
- Reanomenat
.sr-only
i.sr-only-focusable
a.visually-hidden
i.visually-hidden-focusable
- S'ha canviat de nom
sr-only()
isr-only-focusable()
barreja avisually-hidden()
ivisually-hidden-focusable()
.
- S'ha canviat el fitxer Sass de
-
bootstrap-utilities.css
ara 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-toggle
en lloc dedata-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"]')
-
popperConfig
es 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
fallbackPlacements
es 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()
.