Lumilipat sa v5
Subaybayan at suriin ang mga pagbabago sa Bootstrap source file, dokumentasyon, at mga bahagi upang matulungan kang mag-migrate mula v4 hanggang v5.
Dependencies
- Nahulog ang jQuery.
- Na-upgrade mula Popper v1.x patungong Popper v2.x.
- Pinalitan ang Libsass ng Dart Sass dahil hindi na ginagamit ang aming Sass compiler na ibinigay sa Libsass.
- Lumipat mula sa Jekyll patungong Hugo para sa pagbuo ng aming dokumentasyon
Suporta sa browser
- Inalis ang Internet Explorer 10 at 11
- Binaba ang Microsoft Edge < 16 (Legacy Edge)
- Binaba ang Firefox < 60
- Nalaglag ang Safari < 12
- Nahulog ang iOS Safari < 12
- Nahulog ang Chrome < 60
Mga pagbabago sa dokumentasyon
- Muling idinisenyong homepage, layout ng mga dokumento, at footer.
- Nagdagdag ng bagong Parcel guide .
- Nagdagdag ng bagong seksyong I-customize , pinapalitan ang page ng Theming ng v4 , ng mga bagong detalye sa Sass, mga opsyon sa pandaigdigang configuration, mga scheme ng kulay, mga variable ng CSS, at higit pa.
- Muling inayos ang lahat ng dokumentasyon ng form sa bagong seksyon ng Mga Form , na pinaghiwa-hiwalay ang nilalaman sa mga mas nakatutok na pahina.
- Katulad nito, na-update ang seksyong Layout , para mas malinaw na i-flesh ang grid content.
- Pinalitan ang pangalan ng "Navs" component page sa "Navs & Tabs".
- Pinalitan ang pangalan ng page na “Checks” sa “Checks at radios”.
- Muling idinisenyo ang navbar at nagdagdag ng bagong subnav upang gawing mas madali ang paglibot sa aming mga site at mga bersyon ng doc.
- Nagdagdag ng bagong keyboard shortcut para sa field ng paghahanap: Ctrl + /.
Sass
-
Inalis namin ang mga default na pagsasanib ng mapa ng Sass upang gawing mas madali ang pag-alis ng mga kalabisan na halaga. Tandaan na kailangan mo na ngayong tukuyin ang lahat ng mga halaga sa mga mapa ng Sass tulad ng
$theme-colors
. Tingnan kung paano haharapin ang mga mapa ng Sass . -
NasiraPinalitan ang pangalan ng
color-yiq()
function at mga nauugnay na variablecolor-contrast()
dahil hindi na ito nauugnay sa colorspace ng YIQ. Tingnan ang #30168.$yiq-contrasted-threshold
ay pinalitan ng pangalan sa$min-contrast-ratio
.$yiq-text-dark
at$yiq-text-light
ayon sa pagkakabanggit ay pinalitan ng pangalan sa$color-contrast-dark
at$color-contrast-light
.
-
NasiraAng mga parameter ng mixin ng query ng media ay nagbago para sa isang mas lohikal na diskarte.
media-breakpoint-down()
ginagamit ang breakpoint mismo sa halip na ang susunod na breakpoint (hal.,media-breakpoint-down(lg)
sa halip na mgamedia-breakpoint-down(md)
target na viewport na mas maliit kaysa salg
).- Katulad nito, ginagamit din ng pangalawang parameter sa
media-breakpoint-between()
ang breakpoint mismo sa halip na ang susunod na breakpoint (hal.,media-between(sm, lg)
sa halip na i-media-breakpoint-between(sm, md)
target ang mga viewport sa pagitan ngsm
atlg
).
-
NasiraInalis ang mga istilo ng pag-print at
$enable-print-styles
variable. Ang mga klase sa pag-print ng display ay nasa paligid pa rin. Tingnan ang #28339 . -
NasiraNahulog ang
color()
,theme-color()
, atgray()
mga function na pabor sa mga variable. Tingnan ang #29083 . -
NasiraPinalitan ang pangalan ng
theme-color-level()
functioncolor-level()
at tumatanggap na ngayon ng anumang kulay na gusto mo sa halip na mga$theme-color
kulay lamang. Tingnan ang #29083 Mag- ingat:color-level()
sa kalaunan ay ibinaba sav5.0.0-alpha3
. -
NasiraPinalitan ng pangalan
$enable-prefers-reduced-motion-media-query
at$enable-pointer-cursor-for-buttons
sa$enable-reduced-motion
at$enable-button-pointers
para sa maikli. -
NasiraInalis ang
bg-gradient-variant()
mixin. Gamitin ang.bg-gradient
klase upang magdagdag ng mga gradient sa mga elemento sa halip na sa mga nabuong.bg-gradient-*
klase. -
Nasira Inalis ang dating hindi na ginagamit na mga mix:
hover
,hover-focus
,plain-hover-focus
, athover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(tinanggal din ang nauugnay na klase ng utility,.text-hide
)visibility()
form-control-focus()
-
NasiraPinalitan ang pangalan ng
scale-color()
function upangshift-color()
maiwasan ang banggaan sa sariling color scaling function ni Sass. -
box-shadow
pinapayagan na ngayon ng mga mixin ang mganull
halaga at bumabanone
mula sa maraming argumento. Tingnan ang #30394 . -
Ang
border-radius()
mixin ay mayroon na ngayong default na halaga.
Sistema ng kulay
-
Ang sistema ng kulay na nagtrabaho
color-level()
at$theme-color-interval
inalis pabor sa isang bagong sistema ng kulay. Ang lahatlighten()
atdarken()
mga function sa aming codebase ay pinapalitan ngtint-color()
atshade-color()
. Ihahalo ng mga function na ito ang kulay sa puti o itim sa halip na baguhin ang liwanag nito sa isang nakapirming halaga. Angshift-color()
tint o lilim ng isang kulay depende sa kung positibo o negatibo ang parameter ng timbang nito. Tingnan ang #30622 para sa higit pang mga detalye. -
Nagdagdag ng mga bagong tints at shade para sa bawat kulay, na nagbibigay ng siyam na magkakahiwalay na kulay para sa bawat base na kulay, bilang mga bagong Sass variable.
-
Pinahusay na contrast ng kulay. Bumped color contrast ratio mula 3:1 hanggang 4.5:1 at na-update ang asul, berde, cyan, at pink na mga kulay para matiyak ang WCAG 2.1 AA contrast. Binago din ang aming kulay na contrast color mula
$gray-900
sa$black
. -
Upang suportahan ang aming system ng kulay, nagdagdag kami ng bagong custom
tint-color()
atshade-color()
mga function upang paghaluin ang aming mga kulay nang naaangkop.
Mga update sa grid
-
Bagong breakpoint! Nagdagdag ng bagong
xxl
breakpoint para sa1400px
at pataas. Walang pagbabago sa lahat ng iba pang breakpoint. -
Pinahusay na mga kanal. Ang mga kanal ay nakatakda na ngayon sa mga rem, at mas makitid kaysa sa v4 (
1.5rem
, o mga24px
, pababa mula sa30px
). Inihanay nito ang mga gutter ng aming grid system sa aming mga spacing utilities.- Nagdagdag ng bagong klase ng gutter (
.g-*
,.gx-*
, at.gy-*
) para kontrolin ang horizontal/vertical gutters, horizontal gutters, at vertical gutters. - NasiraPinalitan ng pangalan
.no-gutters
upang.g-0
tumugma sa mga bagong utilidad ng gutter.
- Nagdagdag ng bagong klase ng gutter (
-
Hindi na nailapat ang mga column
position: relative
, kaya maaaring kailanganin mong magdagdag.position-relative
sa ilang elemento upang maibalik ang gawi na iyon. -
NasiraNag-drop ng ilang mga
.order-*
klase na madalas na hindi nagamit. Nagbibigay lang kami ngayon.order-1
ng.order-5
out of the box. -
NasiraNahulog ang
.media
bahagi dahil madali itong ma-replicate sa mga utility. Tingnan ang #28265 at ang pahina ng flex utilities para sa isang halimbawa . -
Nasira
bootstrap-grid.css
nalalapat lang ngayonbox-sizing: border-box
sa column sa halip na i-reset ang global box-sizing. Sa ganitong paraan, magagamit ang aming mga istilo ng grid sa mas maraming lugar nang walang panghihimasok. -
$enable-grid-classes
hindi na pinapagana ang pagbuo ng mga klase ng container. Tingnan ang #29146. -
Na -update ang
make-col
mixin sa default sa mga pantay na column na walang tinukoy na laki.
Nilalaman, I-reboot, atbp
-
Ang RFS ay pinagana na ngayon bilang default.
font-size()
Awtomatikong isasaayos ng mgaheading na gumagamit ngfont-size
sa sukat sa viewport. Ang feature na ito ay dating nag-opt-in gamit ang v4. -
NasiraIno-overhaul ang aming display typography upang palitan ang aming
$display-*
mga variable at ng isang$display-font-sizes
Sass na mapa. Inalis din ang mga indibidwal na$display-*-weight
variable para sa isang solong$display-font-weight
at inayos nafont-size
s. -
Nagdagdag ng dalawang bagong
.display-*
laki ng heading,.display-5
at.display-6
. -
Ang mga link ay may salungguhit bilang default (hindi lamang sa pag-hover), maliban kung bahagi sila ng mga partikular na bahagi.
-
Muling idisenyo ang mga talahanayan upang i-refresh ang kanilang mga istilo at muling itayo ang mga ito gamit ang mga variable ng CSS para sa higit na kontrol sa pag-istilo.
-
NasiraHindi na nagmamana ng mga istilo ang mga nested table.
-
Nasira
.thead-light
at.thead-dark
ibinagsak pabor sa mga.table-*
variant na klase na maaaring magamit para sa lahat ng elemento ng talahanayan (thead
,tbody
,tfoot
,tr
,th
attd
). -
NasiraAng
table-row-variant()
mixin ay pinalitan ng pangalantable-variant()
at tumatanggap lamang ng 2 parameter:$color
(pangalan ng kulay) at$value
(code ng kulay). Ang kulay ng hangganan at mga kulay ng accent ay awtomatikong kinakalkula batay sa mga variable ng table factor. -
Hatiin ang mga variable ng table cell padding sa
-y
at-x
. -
NasiraBumagsak ang
.pre-scrollable
klase. Tingnan ang #29135 -
Nasira
.text-*
Ang mga utility ay hindi na nagdaragdag ng mga estado ng hover at focus sa mga link..link-*
maaaring gamitin sa halip ang mga klase ng helper. Tingnan ang #29267 -
NasiraBumagsak ang
.text-justify
klase. Tingnan ang #29793 -
Nasira
<hr>
ginagamit na ngayon ng mga elementoheight
sa halipborder
na mas mahusay na suportahan angsize
katangian. Nagbibigay-daan din ito sa paggamit ng mga kagamitan sa padding upang lumikha ng mas makapal na mga divider (hal.,<hr class="py-1">
). -
I- reset ang default na pahalang
padding-left
sa<ul>
at<ol>
mga elemento mula sa default ng browser40px
sa2rem
. -
Idinagdag
$enable-smooth-scroll
, na nalalapatscroll-behavior: smooth
sa buong mundo—maliban sa mga user na humihiling ng pinababang galaw sa pamamagitan ngprefers-reduced-motion
media query. Tingnan ang #31877
RTL
- Ang mga variable, utility, at mixin na partikular sa pahalang na direksyon ay pinalitan ng pangalan upang gumamit ng mga lohikal na katangian tulad ng makikita sa mga layout ng flexbox—hal,
start
atend
bilang kapalit ngleft
atright
.
Mga porma
-
Nagdagdag ng mga bagong lumulutang na form! Na-promote namin ang halimbawa ng mga Floating label sa ganap na suportadong mga bahagi ng form. Tingnan ang bagong Floating label na page.
-
Nasira Pinagsama-samang native at custom na mga elemento ng form. Ang mga checkbox, radyo, mga pili, at iba pang mga input na may mga native at custom na klase sa v4 ay pinagsama-sama. Ngayon halos lahat ng aming mga elemento ng form ay ganap na custom, karamihan ay hindi nangangailangan ng custom na HTML.
.custom-check
ay ngayon.form-check
..custom-check.custom-switch
ay ngayon.form-check.form-switch
..custom-select
ay ngayon.form-select
..custom-file
at.form-file
napalitan ng mga custom na istilo sa ibabaw ng.form-control
..custom-range
ay ngayon.form-range
.- Nahulog ang katutubong
.form-control-file
at.form-control-range
.
-
NasiraNahulog
.input-group-append
at.input-group-prepend
. Maaari ka na ngayong magdagdag ng mga pindutan at.input-group-text
bilang direktang mga anak ng mga pangkat ng input. -
Ang matagal nang Nawawalang border radius sa input group na may validation feedback bug ay sa wakas ay naayos sa pamamagitan ng pagdaragdag ng karagdagang
.has-validation
klase sa mga input group na may validation. -
Nasira Nag-drop ng mga klase ng layout na tukoy sa form para sa aming grid system. Gamitin ang aming grid at mga utility sa halip na
.form-group
,.form-row
, o.form-inline
. -
NasiraAng mga label ng form ay nangangailangan na ngayon ng
.form-label
. -
Nasira
.form-text
hindi na setsdisplay
, na nagbibigay-daan sa iyong lumikha ng inline o i-block ang text ng tulong ayon sa gusto mo sa pamamagitan lamang ng pagbabago ng HTML element. -
Ang mga icon ng pagpapatunay ay hindi na inilalapat sa
<select>
s na maymultiple
. -
Muling inayos ang pinagmulang Sass file sa ilalim ng
scss/forms/
, kabilang ang mga estilo ng pangkat ng input.
Mga bahagi
- Pinag -isang
padding
value para sa mga alerto, breadcrumb, card, dropdown, list group, modal, popover, at tooltip na ibabatay sa aming$spacer
variable. Tingnan ang #30564 .
Akordyon
- Nagdagdag ng bagong bahagi ng akurdyon .
Mga alerto
-
Ang mga alerto ay mayroon na ngayong mga halimbawa na may mga icon .
-
Inalis ang mga custom na istilo para sa
<hr>
s sa bawat alerto dahil ginagamit na nila angcurrentColor
.
Mga badge
-
NasiraInalis ang lahat ng mga
.badge-*
klase ng kulay para sa mga kagamitan sa background (hal., gamitin.bg-primary
sa halip na.badge-primary
). -
NasiraNahulog
.badge-pill
—gamitin na lang ang.rounded-pill
utility. -
NasiraInalis ang mga estilo ng hover at focus para sa
<a>
at<button>
mga elemento. -
Nadagdagang default na padding para sa mga badge mula sa
.25em
/.5em
hanggang.35em
/.65em
.
Mga mumo ng tinapay
-
Pinasimple ang default na hitsura ng mga breadcrumb sa pamamagitan ng pag-alis ng
padding
,background-color
, atborder-radius
. -
Nagdagdag ng bagong CSS custom na ari-arian
--bs-breadcrumb-divider
para sa madaling pag-customize nang hindi na kailangang muling mag-compile ng CSS.
Mga Pindutan
-
Nasira Ang mga toggle button , na may mga checkbox o radyo, ay hindi na nangangailangan ng JavaScript at may bagong markup. Hindi na kami nangangailangan ng elemento ng pambalot, idagdag
.btn-check
sa<input>
, at ipares ito sa anumang.btn
mga klase sa<label>
. Tingnan ang #30650 . Ang mga doc para dito ay lumipat mula sa aming pahina ng Mga Pindutan patungo sa bagong seksyon ng Mga Form. -
Nasira Nahulog
.btn-block
para sa mga utility. Sa halip na gamitin.btn-block
sa.btn
, balutin ang iyong mga button.d-grid
ng at isang.gap-*
utility upang i-space ang mga ito kung kinakailangan. Lumipat sa mga tumutugong klase para sa higit pang kontrol sa mga ito. Basahin ang mga doc para sa ilang halimbawa. -
Na -update ang aming
button-variant()
atbutton-outline-variant()
mixins upang suportahan ang mga karagdagang parameter. -
Mga na-update na button para matiyak ang tumaas na contrast sa hover at mga aktibong estado.
-
Ang mga naka-disable na button ay mayroon na ngayong
pointer-events: none;
.
Card
-
NasiraBumagsak
.card-deck
pabor sa aming grid. I-wrap ang iyong mga card sa mga klase ng column at magdagdag ng parent.row-cols-*
container para muling likhain ang mga card deck (ngunit may higit na kontrol sa tumutugon na pagkakahanay). -
NasiraBumagsak
.card-columns
sa pabor ng Masonry. Tingnan ang #28922 . -
NasiraPinalitan ang
.card
nakabatay na akurdyon ng isang bagong bahagi ng Accordion .
Carousel
-
Nagdagdag ng bagong
.carousel-dark
variant para sa madilim na text, mga kontrol, at mga indicator (mahusay para sa mas magaan na background). -
Pinalitan ang mga icon ng chevron para sa mga kontrol ng carousel ng mga bagong SVG mula sa Mga Icon ng Bootstrap .
Isara ang pindutan
-
NasiraPinalitan
.close
ng pangalan.btn-close
para sa hindi gaanong generic na pangalan. -
Gumagamit na ngayon ang mga close button ng
background-image
(naka-embed na SVG) sa halip na isang×
sa HTML, na nagbibigay-daan para sa mas madaling pag-customize nang hindi na kailangang pindutin ang iyong markup. -
Nagdagdag ng bagong
.btn-close-white
variant na ginagamitfilter: invert(1)
upang paganahin ang mas mataas na contrast para i-dismiss ang mga icon laban sa mas madidilim na background.
Pagbagsak
- Inalis ang scroll anchoring para sa mga accordion.
Mga dropdown
-
Nagdagdag ng bagong
.dropdown-menu-dark
variant at nauugnay na mga variable para sa on-demand na dark dropdown. -
Nagdagdag ng bagong variable para sa
$dropdown-padding-x
. -
Pinadilim ang dropdown divider para sa pinahusay na contrast.
-
NasiraAng lahat ng mga kaganapan para sa dropdown ay nati-trigger na ngayon sa dropdown na toggle button at pagkatapos ay bubula hanggang sa parent na elemento.
-
Ang mga dropdown na menu ay mayroon na ngayong
data-bs-popper="static"
nakatakdang katangian kapag ang pagpoposisyon ng dropdown ay static atdata-bs-popper="none"
kapag ang dropdown ay nasa navbar. Ito ay idinagdag ng aming JavaScript at tinutulungan kaming gumamit ng mga custom na istilo ng posisyon nang hindi nakakasagabal sa pagpoposisyon ng Popper. -
NasiraNa- drop
flip
na opsyon para sa dropdown na plugin na pabor sa native na configuration ng Popper. Maaari mo na ngayong i-disable ang flipping behavior sa pamamagitan ng pagpasa ng isang bakanteng array para safallbackPlacements
opsyon sa flip modifier. -
Ang mga dropdown na menu ay maaari na ngayong ma-click gamit ang isang bagong
autoClose
opsyon upang mahawakan ang awtomatikong pagsasara ng gawi . Maaari mong gamitin ang opsyong ito upang tanggapin ang pag-click sa loob o labas ng dropdown na menu upang gawin itong interactive. -
Sinusuportahan na ngayon ng mga dropdown ang
.dropdown-item
s na nakabalot sa<li>
s.
Jumbotron
- NasiraNahulog ang jumbotron component dahil maaari itong kopyahin sa mga utility. Tingnan ang aming bagong halimbawa ng Jumbotron para sa isang demo.
Listahan ng pangkat
- Nagdagdag ng bagong
.list-group-numbered
modifier sa listahan ng mga pangkat.
Mga Nav at tab
- Nagdagdag ng mga bagong
null
variable para safont-size
,font-weight
,color
, at:hover
color
sa.nav-link
klase.
Mga Navbar
- NasiraNangangailangan na ngayon ang mga Navbar ng lalagyan sa loob (upang lubos na pasimplehin ang mga kinakailangan sa espasyo at kinakailangan ang CSS).
Offcanvas
- Idinagdag ang bagong bahagi ng offcanvas .
Pagbilang ng pahina
-
Ang mga link sa pagbilang ng pahina ay mayroon na ngayong nako-customize
margin-left
na dynamic na bilugan sa lahat ng sulok kapag pinaghiwalay sa isa't isa. -
Nagdagdag ng
transition
s sa mga link ng pagination.
Mga Popover
-
NasiraPinalitan ng pangalan
.arrow
sa.popover-arrow
aming default na template ng popover. -
Pinalitan ang pangalan ng
whiteList
opsyon saallowList
.
Mga Spinner
-
Pinarangalan na ngayon
prefers-reduced-motion: reduce
ng mga Spinner ang pagpapabagal ng mga animation. Tingnan ang #31882 . -
Pinahusay na spinner vertical alignment.
Mga toast
-
Ang mga toast ay maaari na ngayong ilagay sa isang sa tulong ng mga kagamitan sa pagpoposisyon .
.toast-container
-
Binago ang default na tagal ng toast sa 5 segundo.
-
Inalis
overflow: hidden
mula sa mga toast at pinalitan ng tamangborder-radius
s ng mgacalc()
function.
Mga tooltip
-
NasiraPinalitan
.arrow
ng pangalan.tooltip-arrow
sa aming default na template ng tooltip. -
NasiraAng default na halaga para sa
fallbackPlacements
ay binago sa['top', 'right', 'bottom', 'left']
para sa mas mahusay na paglalagay ng mga elemento ng popper. -
NasiraPinalitan ang pangalan ng
whiteList
opsyon saallowList
.
Mga utility
-
NasiraPinalitan ang pangalan ng ilang mga utility upang gumamit ng mga lohikal na pangalan ng ari-arian sa halip na mga pangalan ng direksyon kasama ang pagdaragdag ng suporta sa RTL:
- Pinalitan ng pangalan
.left-*
at.right-*
sa.start-*
at.end-*
. - Pinalitan ng pangalan
.float-left
at.float-right
sa.float-start
at.float-end
. - Pinalitan ng pangalan
.border-left
at.border-right
sa.border-start
at.border-end
. - Pinalitan ng pangalan
.rounded-left
at.rounded-right
sa.rounded-start
at.rounded-end
. - Pinalitan ng pangalan
.ml-*
at.mr-*
sa.ms-*
at.me-*
. - Pinalitan ng pangalan
.pl-*
at.pr-*
sa.ps-*
at.pe-*
. - Pinalitan ng pangalan
.text-left
at.text-right
sa.text-start
at.text-end
.
- Pinalitan ng pangalan
-
NasiraNaka-disable ang mga negatibong margin bilang default.
-
Nagdagdag ng bagong
.bg-body
klase para sa mabilis na pagtatakda ng<body>
background ni sa mga karagdagang elemento. -
Nagdagdag ng mga bagong kagamitan sa posisyon para sa
top
,right
,bottom
, atleft
. Kasama sa mga value ang0
,50%
, at100%
para sa bawat property. -
Nagdagdag ng bago
.translate-middle-x
at.translate-middle-y
mga utilidad sa pahalang o patayo na nakasentro sa ganap/nakaayos na mga elementong nakaposisyon. -
Nagdagdag ng mga bagong
border-width
utility . -
NasiraPinalitan ng pangalan
.text-monospace
sa.font-monospace
. -
NasiraInalis
.text-hide
dahil isa itong lumang paraan para sa pagtatago ng text na hindi na dapat gamitin. -
Nagdagdag
.fs-*
ng mga utility para safont-size
mga utility (na may RFS enabled). Gumagamit ang mga ito ng parehong sukat gaya ng mga default na heading ng HTML (1-6, malaki hanggang maliit), at maaaring mabago sa pamamagitan ng Sass map. -
NasiraPinalitan ang pangalan
.font-weight-*
ng mga utility.fw-*
para sa kaiklian at pagkakapare-pareho. -
NasiraPinalitan ang pangalan
.font-style-*
ng mga utility.fst-*
para sa kaiklian at pagkakapare-pareho. -
Idinagdag
.d-grid
upang ipakita ang mga utility at bagonggap
utility (.gap
) para sa CSS Grid at flexbox na mga layout. -
NasiraInalis
.rounded-sm
atrounded-lg
, at ipinakilala ang isang bagong sukat ng mga klase,.rounded-0
sa.rounded-3
. Tingnan ang #31687 . -
Nagdagdag ng mga bagong
line-height
utility:.lh-1
,.lh-sm
,.lh-base
at.lh-lg
. Tingnan dito . -
Inilipat ang
.d-none
utility sa aming CSS upang bigyan ito ng higit na timbang kaysa sa iba pang mga utility sa display. -
Pinahaba ang
.visually-hidden-focusable
katulong para magtrabaho din sa mga lalagyan, gamit ang:focus-within
.
Mga katulong
-
Nasira Ang mga tumutugon na naka-embed na katulong ay pinalitan ng pangalan sa ratio ng mga katulong na may mga bagong pangalan ng klase at pinahusay na pag-uugali, pati na rin ang isang kapaki-pakinabang na variable ng CSS.
- Ang mga klase ay pinalitan ng pangalan upang mapalitan
by
sax
aspect ratio. Halimbawa,.ratio-16by9
ngayon ay.ratio-16x9
. - Inalis namin ang
.embed-responsive-item
at element group selector pabor sa isang mas simpleng.ratio > *
selector. Wala nang klase ang kailangan, at gumagana na ngayon ang ratio helper sa anumang elemento ng HTML. - Ang
$embed-responsive-aspect-ratios
mapa ng Sass ay pinalitan ng pangalan$aspect-ratios
at ang mga halaga nito ay pinasimple upang isama ang pangalan ng klase at ang porsyento bilangkey: value
pares. - Ang mga variable ng CSS ay nabuo na ngayon at kasama para sa bawat halaga sa mapa ng Sass. Baguhin ang
--bs-aspect-ratio
variable sa.ratio
upang lumikha ng anumang custom na aspect ratio .
- Ang mga klase ay pinalitan ng pangalan upang mapalitan
-
Nasira Ang mga klase sa "Screen reader" ay mga klase na ngayon na "visually hidden" .
- Binago ang Sass file mula
scss/helpers/_screenreaders.scss
sascss/helpers/_visually-hidden.scss
- Pinalitan ng pangalan
.sr-only
at.sr-only-focusable
sa.visually-hidden
at.visually-hidden-focusable
- Pinalitan ang pangalan
sr-only()
atsr-only-focusable()
pinaghalo savisually-hidden()
atvisually-hidden-focusable()
.
- Binago ang Sass file mula
-
bootstrap-utilities.css
kasama na rin ngayon ang ating mga katulong. Hindi na kailangang i-import ang mga katulong sa mga custom na build.
JavaScript
-
Inalis ang dependency sa jQuery at muling isinulat ang mga plugin upang maging regular na JavaScript.
-
NasiraAng mga attribute ng data para sa lahat ng plugin ng JavaScript ay namespace na ngayon upang makatulong na makilala ang functionality ng Bootstrap mula sa mga third party at sa iyong sariling code. Halimbawa, ginagamit namin
data-bs-toggle
sa halip nadata-toggle
. -
Ang lahat ng mga plugin ay maaari na ngayong tumanggap ng isang CSS selector bilang ang unang argumento. Maaari kang magpasa ng elemento ng DOM o anumang wastong CSS selector para gumawa ng bagong instance ng plugin:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
maaaring ipasa bilang isang function na tumatanggap ng default na Popper config ng Bootstrap bilang argumento, para mapagsama mo ang default na configuration na ito sa iyong paraan. Nalalapat sa mga dropdown, popover, at tooltip. -
Ang default na halaga para sa
fallbackPlacements
ay binago sa['top', 'right', 'bottom', 'left']
para sa mas mahusay na paglalagay ng mga elemento ng Popper. Nalalapat sa mga dropdown, popover, at tooltip. -
Inalis ang underscore mula sa mga pampublikong static na pamamaraan tulad
_getInstance()
ng →getInstance()
.