Woretu akɔ v5 so
Di akyi na hwɛ nsakrae a aba wɔ Bootstrap fibea fael ahorow, nkrataa, ne nneɛma a ɛwom no mu na aboa wo ma woatu afi v4 akɔ v5.
Nneɛma a wɔde wɔn ho to so
- Wɔagyae jQuery.
- Wɔayɛ no foforo afi Popper v1.x so akɔ Popper v2.x so.
- Wɔde Dart Sass sii Libsass ananmu sɛ yɛn Sass compiler a wɔde maa Libsass no yɛ nea wɔagyae.
- Mitu fii Jekyll kɔɔ Hugo sɛ ɔkyekyee yɛn nkrataa no
Browser mmoa a wɔde ma
- Wogyaee Internet Explorer 10 ne 11 no
- Microsoft Edge a wɔatow agu < 16 (Agyapade Edge) .
- Wɔagyae Firefox < 60
- Safari a wɔatow agu < 12
- Wɔagyae iOS Safari < 12
- Chrome a wɔatow agu < 60
Nwoma ahorow no sesa
- Wɔasan ayɛ homepage, docs nhyehyɛe, ne ase hɔ.
- Wɔde Parcel akwankyerɛ foforo aka ho .
- Wɔde Customize ɔfã foforo aka ho , de nsɛm foforo a ɛfa Sass ho, wiase nyinaa nhyehyeɛ a wobɛpaw, kɔla nhyehyɛe, CSS nsakrae, ne nea ɛkeka ho asi v4 no Theming krataafa ananmu.
- Wɔsan hyehyɛɛ fom nkrataa nyinaa yɛɛ no Fom ɔfã foforo , na ɛpaapaee emu nsɛm no mu yɛɛ no nkratafa a wɔde wɔn adwene si so kɛse.
- Saa ara nso na wɔayɛ Layout ɔfã no foforo , sɛnea ɛbɛyɛ a grid mu nsɛm no bɛda adi pefee.
- Wɔasesa din “Navs” component krataafa no ayɛ no “Navs & Tabs”.
- Wɔsesaa din “Checks” kratafa no ayɛ no “Checks & radios”.
- Yɛsan yɛɛ navbar no ho nhyehyɛe na yɛde subnav foforo kaa ho sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ yɛbɛkyinkyin yɛn sait ne docs nkyerɛase ahorow no ho.
- Wɔde keyboard shortcut foforo aka ho ama nhwehwɛmu afã no: Ctrl + /.
Sass
-
Yɛayɛ ditched default Sass map merges no sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wobeyi redundant values no afi hɔ. Ma ɛntena w'adwenem sɛ afei ɛsɛ sɛ wokyerɛkyerɛ gyinapɛn ahorow nyinaa mu wɔ Sass map ahorow no mu te sɛ
$theme-colors
. Hwɛ sɛnea wodi Sass asase mfonini ahorow ho dwuma . -
AbubuwWɔasan din
color-yiq()
ayɛ adwuma ne nsakrae a ɛfa ho nocolor-contrast()
sɛnea ɛne YIQ colorspace nni abusuabɔ bio. Hwɛ #30168.$yiq-contrasted-threshold
wɔasesa ne din ayɛ no$min-contrast-ratio
.$yiq-text-dark
na$yiq-text-light
wɔasesa din sɛnea ɛte biara ayɛ no$color-contrast-dark
ne$color-contrast-light
.
-
AbubuwMedia query mixins parameters asesa ama ɔkwan a ntease wom kɛse.
media-breakpoint-down()
de breakpoint no ankasa di dwuma sen breakpoint a edi hɔ no (sɛ nhwɛso no,media-breakpoint-down(lg)
sɛ́ anka ɛdemedia-breakpoint-down(md)
targets viewports nketewa senlg
).- Saa ara nso na parameter a ɛtɔ so mmienu wɔ
media-breakpoint-between()
nso de breakpoint no ankasa di dwuma sen sɛ ɛde breakpoint a edi hɔ no bedi dwuma (sɛ nhwɛso no,media-between(sm, lg)
sɛ́ anka ɛdemedia-breakpoint-between(sm, md)
targets viewports bɛtosm
ne ntamlg
).
-
AbubuwWɔayi print styles ne
$enable-print-styles
variable afi hɔ. Print display adesua ahorow da so ara wɔ hɔ. Hwɛ #28339 . -
AbubuwTow
color()
,theme-color()
, negray()
dwumadi ahorow a ɛboa nsakrae ahorow. Hwɛ #29083 . -
AbubuwRenamed
theme-color-level()
function tocolor-level()
na seesei gye kɔla biara a wopɛ sen sɛ$theme-color
ɛbɛgye kɔla nkutoo. Hwɛ #29083 Hwɛ yiye:color-level()
akyiri yi wɔde too hɔv5.0.0-alpha3
. -
AbubuwWɔasesa din
$enable-prefers-reduced-motion-media-query
ne$enable-pointer-cursor-for-buttons
to$enable-reduced-motion
ne sɛnea ɛbɛyɛ a wɔbɛka$enable-button-pointers
no tiawa. -
AbubuwWoyii
bg-gradient-variant()
mixin no fii hɔ. Fa.bg-gradient
adesua no di dwuma fa gradients ka elements ho sen sɛ wode class ahorow a wɔayɛ no bɛka ho.bg-gradient-*
. -
Abubuw Wɔayi mixins a na wɔagyae adwuma no afi hɔ:
hover
,hover-focus
,plain-hover-focus
, nehover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(asan nso gyaee utility class a ɛbata ho no,.text-hide
) .visibility()
form-control-focus()
-
AbubuwWɔasan din
scale-color()
ayɛ adwuma sɛshift-color()
sɛnea ɛbɛyɛ a ɛrenhyia Sass ankasa kɔla scaling adwuma no. -
box-shadow
mixins afei ma kwan manull
values na ɛtɔnone
fi nsɛm pii mu. Hwɛ #30394 . -
Seesei
border-radius()
mixin no wɔ default value.
Kɔla nhyehyɛe
-
Kɔla nhyehyɛe a ɛne adwuma
color-level()
na$theme-color-interval
woyii fii hɔ de boaa kɔla nhyehyɛe foforo. Ne nyinaalighten()
nedarken()
dwumadie a ɛwɔ yɛn codebase no mu no, wɔdetint-color()
neshade-color()
. Saa dwumadi ahorow yi de kɔla no bɛfra fitaa anaa tuntum mu sen sɛ ɛbɛsakra ne hann no dodow bi a wɔahyɛ ato hɔ. Theshift-color()
will either tint or shade a color gyina sɛ ebia ne mu duru parameter yɛ papa anaasɛ bɔne. Hwɛ #30622 ma nsɛm pii. -
Wɔde tints ne shades foforo kaa ho maa kɔla biara, de kɔla ahorow akron a ɛsono emu biara ma kɔla biara a ɛwɔ nnyinaso, sɛ Sass nsakrae foforo.
-
Kɔla ahorow a ɛne ne ho bɔ abira a wɔatu mpɔn. Bumped kɔla nsonsonoe ratio fi 3:1 kosi 4.5:1 ne updated bruu, ahabammono, cyan, ne pink kɔla ahorow de hwɛ hu sɛ WCAG 2.1 AA nsonsonoe. Afei nso wɔsesaa yɛn kɔla a ɛne ne ho bɔ abira kɔla no fii
$gray-900
kɔɔ$black
. -
Sɛnea ɛbɛyɛ a yɛbɛboa yɛn kɔla nhyehyɛe no, yɛde amanne
tint-color()
neshade-color()
dwumadi foforo aka ho a yɛde bɛfrafra yɛn kɔla ahorow no yiye.
Grid no ho nsɛm foforo
-
Nneɛma foforo a ɛma wogyae! Wɔde
xxl
breakpoint foforo aka ho ama1400px
ne soro. Nsakrae biara nni breakpoints afoforo nyinaa mu. -
Gutters a wɔatu mpɔn. Mprempren wɔde gutters ahyɛ rems mu, na ɛyɛ teateaa sen v4 (
1.5rem
, anaasɛ bɛyɛ24px
, ase fi30px
). Eyi ma yɛn grid system no gutters no ne yɛn spacing utilities no hyia.- Wɔde gutter class foforo (
.g-*
,.gx-*
, ne.gy-*
) aka ho de ahwɛ gutters a ɛkɔ soro/ɛgyina hɔ, gutters a ɛkɔ soro, ne gutters a ɛda hɔ so. - AbubuwWɔsesaa din
.no-gutters
sɛ.g-0
ɛne gutter utilities foforo hyia.
- Wɔde gutter class foforo (
-
Nkorabata ahorow no anni dwuma bio
position: relative
, enti ebia ɛsɛ sɛ wode.position-relative
nneɛma bi ka ho na ama woasan de saa suban no aba. -
AbubuwWogyaee
.order-*
adesua ahorow pii a na ɛtaa kɔ a wɔmfa nni dwuma no. Seesei yɛde.order-1
ma.order-5
out of the box nkutoo. -
AbubuwDroped
.media
component no sɛnea wobetumi ayɛ mmerɛw replicated ne utilities. Hwɛ #28265 ne flex utilities krataafa no ma nhwɛso . -
Abubuw
bootstrap-grid.css
mprempren ɛfabox-sizing: border-box
kɔla no nkutoo ho sen sɛ ɛbɛsan ahyɛ wiase nyinaa adaka-kɛse no. Saa kwan yi so no, yebetumi de yɛn grid styles no adi dwuma wɔ mmeae pii a biribiara ntwitware mu. -
$enable-grid-classes
ntumi nsiw awo ntoatoaso a ɛwɔ container class ahorow no ano bio. Hwɛ #29146. -
Wɔayɛ
make-col
mixin no foforo akɔ default so akɔ columns a ɛyɛ pɛ a enni kɛse a wɔakyerɛ.
Nsɛm a ɛwɔ mu, Reboot, ne nea ɛkeka ho
-
Mprempren RFS no ayɛ adwuma default so. Nsɛmti a wɔde
font-size()
mixin no di dwuma no bɛsesa wɔnfont-size
ho sɛnea ɛbɛyɛ a ɛne viewport no bɛsesa no ankasa. Saa ade yi yɛ kan opt-in ne v4. -
AbubuwYɛyɛɛ yɛn display typography no foforo de sii yɛn
$display-*
variables ananmu na yɛde$display-font-sizes
Sass map. Afei nso woyii ankorankoro$display-*-weight
nsakrae ahorow no fii hɔ maa biako$display-font-weight
na wɔayɛ nsakraefont-size
s. -
.display-*
Wɔde asɛmti akɛse foforo abien aka ho ,.display-5
ne.display-6
. -
Wɔahyɛ link ahorow ase default so (ɛnyɛ hover so nkutoo), gye sɛ ɛyɛ nneɛma pɔtee bi fã.
-
Wɔasan ayɛ tables de ayɛ wɔn styles foforo na wɔasan de CSS variables akyekye ama wɔanya tumi kɛse wɔ styling so.
-
AbubuwNested tables nnya styles bio.
-
Abubuw
.thead-light
na.thead-dark
wɔatow agu de agye.table-*
variant classes a wobetumi de adi dwuma ama table elements nyinaa (thead
,tbody
,tfoot
,tr
,th
netd
). -
AbubuwWɔsesa
table-row-variant()
mixin no din ayɛ notable-variant()
na ɛgye parameters 2 pɛ:$color
(kɔla din) ne$value
(kɔla koodu). Wɔbu border kɔla ne accent kɔla no ho akontaa ankasa a egyina table factor variables no so. -
Kyekyɛ table cell padding nsakrae ahorow mu ma ɛyɛ
-y
ne-x
. -
AbubuwWogyaee
.pre-scrollable
adesuakuw no. Hwɛ #29135 -
Abubuw
.text-*
utilities mfa hover ne focus states nka links ho bio..link-*
wobetumi de aboafo adesua ahorow adi dwuma mmom. Hwɛ #29267 -
AbubuwWogyaee
.text-justify
adesuakuw no. Hwɛ #29793 -
Abubuw
<hr>
elements mprempren de di dwumaheight
sen sɛborder
wɔde bɛboasize
su no yiye. Eyi nso ma wotumi de padding utilities di dwuma de yɛ dividers a ɛyɛ den (sɛ nhwɛso no,<hr class="py-1">
). -
Reset default horizontal
padding-left
on<ul>
ne<ol>
elements fi browser default40px
so kɔ2rem
. -
Added
$enable-smooth-scroll
, a ɛfascroll-behavior: smooth
wiase nyinaa ho—gye sɛ wɔn a wɔde di dwuma a wɔsrɛ sɛ wɔtew kankyee so denamprefers-reduced-motion
nsɛm ho amanneɛbɔfo asɛmmisa so. Hwɛ #31877
RTL
- Horizontal direction specific variables, utilities, ne mixins nyinaa wɔasesa din de adi dwuma wɔ logical properties te sɛ nea wohu wɔ flexbox layouts mu —sɛ nhwɛso no,
start
neend
ananmuleft
neright
.
Nkyerɛwee ahorow
-
Wɔde nkrataa foforo a ɛsensɛn nsu so aka ho! Yɛahyɛ Floating labels nhwɛso no ho nkuran akɔ form components a wɔboa koraa. Hwɛ Floating labels kratafa foforo no.
-
Abubuw Consolidated native ne amanne kwan so nneɛma elements. Wɔaboaboa checkboxes, radios, selects, ne inputs afoforo a na ɛwɔ native ne custom classes wɔ v4 mu no ano. Afei ɛkame ayɛ sɛ yɛn form elements no nyinaa yɛ custom koraa, dodow no ara a enhia custom HTML.
.custom-check
no yɛ mprempren.form-check
..custom-check.custom-switch
no yɛ mprempren.form-check.form-switch
..custom-select
no yɛ mprempren.form-select
..custom-file
na.form-file
wɔde amanne kwan so ntadehyɛ asi ananmu wɔ.form-control
..custom-range
no yɛ mprempren.form-range
.- Wogyaee kurom hɔfo
.form-control-file
ne.form-control-range
.
-
AbubuwWɔtow gui
.input-group-append
na.input-group-prepend
. Afei wobɛtumi de buttons aka ho kɛkɛ na.input-group-text
sɛ direct mma a ɛwɔ input akuo no mu. -
Wɔsiesie Missing border radius a akyɛ wɔ input kuw a ɛwɔ validation feedback bug no awiei koraa denam
.has-validation
adesua foforo a wɔde bɛka input akuw a ɛwɔ validation ho no so. -
Abubuw Wogyaee form-specific layout adesua ahorow maa yɛn grid nhyehyɛe no. Fa yɛn grid ne utilities no di dwuma sen sɛ wode
.form-group
,.form-row
, anaa.form-inline
. -
AbubuwMprempren nkrataa a wɔde kyerɛw nsɛm hwehwɛ sɛ
.form-label
. -
Abubuw
.form-text
no longer setsdisplay
, ɛma wo kwan ma wobɔ inline anaa wosiw mmoa nsɛm ano sɛnea wopɛ denam HTML element no a wobɛsakra no ara kwa so. -
Wɔmfa validation icons nni dwuma bio wɔ
<select>
s a ɛwɔmultiple
. -
Wɔasan asiesie source Sass fael ahorow wɔ ase
scss/forms/
, a input kuw styles ka ho.
Nneɛma a ɛwom
- Nsonsonoeɛ a wɔaka abom
padding
ama kɔkɔbɔ, paanoo a wɔayam, kaad, dropdowns, list akuo, modals, popovers, ne nnwinnadeɛ a wɔde bɛgyina yɛn$spacer
nsakraeɛ no so. Hwɛ #30564 .
Accordion a wɔde di dwuma
- Wɔde accordion fã foforo aka ho .
Kɔkɔbɔ ahorow
-
Mprempren kɔkɔbɔ ahorow no wɔ nhwɛso ahorow a ɛwɔ ahyɛnsode ahorow .
-
Woayi custom styles ama
<hr>
s wɔ alert biara mu efisɛ wɔde di dwuma dedawcurrentColor
.
Badge ahorow
-
AbubuwWogyaee
.badge-*
kɔla adesua ahorow nyinaa maa akyi mfaso (sɛ nhwɛso no, fa di dwuma.bg-primary
sen sɛ wode bedi dwuma.badge-primary
). -
AbubuwDroped
.badge-pill
—fa.rounded-pill
utility no di dwuma mmom. -
AbubuwWoayi hover ne focus styles afi hɔ ama
<a>
ne<button>
elements. -
Nkɔanim default padding ma badge fi
.25em
/.5em
kosi.35em
/.65em
.
Abodoo a wɔayam
-
Ɛmaa abodoo a wɔayam no sɛnea ɛte dedaw no yɛɛ mmerɛw denam
padding
,background-color
, neborder-radius
. -
Wɔde CSS amanneɛbɔ agyapade foforo aka ho
--bs-breadcrumb-divider
ama ayɛ mmerɛw sɛ wobɛsakra no a enhia sɛ wosan boaboa CSS ano.
Nsɛmma nhoma no
-
Abubuw Toggle buttons , a ɛwɔ checkboxes anaa radios, nhia JavaScript bio na ɛwɔ markup foforo. Yɛnhia wrapping element bio, de ka
.btn-check
,<input>
na yɛde bata.btn
adesua biara a ɛwɔ<label>
. Hwɛ #30650 . Docs a ɛwɔ eyi ho no afi yɛn Buttons krataafa no so akɔ Forms ɔfã foforo no so. -
Abubuw Wɔde
.btn-block
too hɔ maa utilities. Sɛ́ anka wode bedi dwuma.btn-block
wɔ , fa ne utility bi.btn
kyekyere wo buttons no ho sɛnea ɛho hia. Dan kɔ adesua ahorow a ɛyɛ mmuae so na ama woanya wɔn so tumi kɛse mpo. Kenkan docs no ma nhwɛso ahorow bi..d-grid
.gap-*
-
Updated yɛn
button-variant()
nebutton-outline-variant()
mixins de boa parameters afoforo. -
Updated buttons de hwɛ hu sɛ nsonsonoe a ɛkɔ soro wɔ hover ne active states so.
-
Mprempren bɔton ahorow a wɔadi dɛm no wɔ
pointer-events: none;
.
Kaad a wɔde kyerɛw nsɛm
-
AbubuwDred
.card-deck
in favour of yɛn grid no. Fa wo kaad no kyekyere column classes mu na fa ɔwofo.row-cols-*
container ka ho de san yɛ card decks (nanso fa tumi kɛse wɔ responsive alignment so). -
AbubuwWɔtow gui
.card-columns
de gyee Masonry akyi. Hwɛ #28922 . -
AbubuwWɔde Accordion fã foforo
.card
sii accordion a egyina so no ananmu .
Carousel a wɔde yɛ nneɛma
-
Wɔde
.carousel-dark
variant foforo aka ho ama nsɛm a ɛyɛ sum, controls, ne indicators (eye ma akyi a ɛyɛ hann). -
Wɔde SVG foforo a efi Bootstrap Ahyɛnsode ahorow mu asi chevron ahyɛnsode ahorow a wɔde yɛ carousel controls ananmu .
Fa bɔtn no to mu
-
AbubuwWɔsesaa din
.close
yɛɛ.btn-close
no din a ɛnyɛ generic pii. -
Mprempren bɔtɔn a wɔde to mu no de
background-image
(SVG a wɔde ahyɛ mu) di dwuma sen sɛ wɔde bedi dwuma×
wɔ HTML no mu, na ɛma wotumi yɛ nsakrae a ɛyɛ mmerɛw a enhia sɛ wode wo nsa ka wo agyiraehyɛde no. -
Wɔde
.btn-close-white
variant foforo a ɛde di dwumafilter: invert(1)
ma ɛma nsonsonoe a ɛkorɔn a wɔpow ahyɛnsode ahorow a ɛwɔ akyi a ɛyɛ sum kaa ho.
Gu
- Woyii nhoma mmobɔwee a wɔde hyɛ accordion ahorow mu no fii hɔ.
Nneɛma a wɔde gu fam
-
Wɔde
.dropdown-menu-dark
variant foforo ne variables a ɛbata ho aka ho ama on-demand dark dropdowns. -
Wɔde nsakrae foforo aka ho ama
$dropdown-padding-x
. -
Darkened dropdown divider no maa nsonsonoe a ɛkɔ anim.
-
AbubuwMprempren wɔde nsɛm a esisi ma dropdown no nyinaa ahyɛ ase wɔ dropdown toggle button no so na afei wɔde bubble akɔ ɔwofo element no so.
-
Dropdown menus seesei wɔ
data-bs-popper="static"
attribute a wɔahyehyɛ bere a dropdown no gyinabea yɛ static nadata-bs-popper="none"
bere a dropdown no wɔ navbar no mu. Eyi yɛ yɛn JavaScript de aka ho na ɛboa yɛn ma yɛde gyinabea ahorow a wɔahyɛ da ayɛ no di dwuma a ɛrensiw Popper gyinabea kwan. -
AbubuwWɔagyae
flip
option ma dropdown plugin a ɛboa native Popper nhyehyɛe. Afei wobɛtumi asiw flipping suban no ano denam empty array a wobɛfa so amafallbackPlacements
option wɔ flip modifier mu. -
Mprempren wobetumi akliki dropdown menu ahorow no so denam ɔkwan foforo
autoClose
a wobɛfa so adi auto close suban no ho dwuma . Wubetumi de saa nhyehyɛe yi agye klik a ɛwɔ dropdown menu no mu anaa akyi no atom na ama ayɛ nkitahodi. -
Dropdowns seesei boa
.dropdown-item
s a wɔde s abɔ mu<li>
.
Jumbotron a ɛyɛ hu
- AbubuwDroped jumbotron component sɛnea wobetumi ayɛ no bi ne utilities. Hwɛ yɛn Jumbotron nhwɛso foforo no ma demo.
Kyerɛw kuw no din
- Wɔde
.list-group-numbered
modifier foforo aka ho de ahyɛ akuw ahorow din mu.
Navs ne tabs ahorow
- Wɔde
null
nsakrae foforo akafont-size
,font-weight
,color
, ne adesua no ho:hover
color
..nav-link
Navbar ahorow no
- AbubuwNavbars seesei hwehwɛ container wɔ mu (sɛ ɛbɛma spacing ahwehwɛde ne CSS a wɔhwehwɛ no ayɛ mmerɛw kɛse).
Offcanvas a wɔde di dwuma
- Wɔde offcanvas fã foforo no kaa ho .
Nkratafa a wɔde kyerɛw nsɛm
-
Pagination links seesei wɔ customizable
margin-left
a ɛyɛ dynamically rounded wɔ corners nyinaa bere a wɔatew wɔn ho afi wɔn ho wɔn ho ho. -
Wɔde
transition
s aka nkratafa link ahorow ho.
Popovers a wɔde wɔn ho hyɛ mu
-
AbubuwWɔasesa din
.arrow
no.popover-arrow
wɔ yɛn default popover template no mu. -
Wɔasesa din
whiteList
a wɔde bɛpaw no ayɛ noallowList
.
Nneɛma a wɔde twitwiw nneɛma
-
Mprempren spinners di ni
prefers-reduced-motion: reduce
denam animations a wɔma ɛyɛ brɛoo no so. Hwɛ #31882 . -
Spinner vertical alignment a wɔatu mpɔn.
Toast ahorow a wɔde yɛ aduan
-
Mprempren wobetumi de toast ahorow asi baabi a wɔde nneɛma a wɔde di dwuma wɔ baabi a wɔde di dwuma
.toast-container
no mmoa so . -
Wɔasesa default toast bere tenten kɔɔ 5 seconds.
-
Woyii
overflow: hidden
fi toasts mu na wɔdeborder-radius
s a ɛfata a ɛwɔcalc()
dwumadi ahorow si ananmu.
Nnwinnade Ho Afotu
-
AbubuwWɔasesa din
.arrow
no.tooltip-arrow
wɔ yɛn default tooltip template no mu. -
Abubuw
fallbackPlacements
Wɔasesa default value ma the no kɔ['top', 'right', 'bottom', 'left']
ma popper elements a wɔde besisi hɔ yiye. -
AbubuwWɔasesa din
whiteList
a wɔde bɛpaw no ayɛ noallowList
.
Nneɛma a wɔde di dwuma
-
AbubuwWɔasesaa utilities pii din sɛ wɔde logical property din bedi dwuma mmom sen akwankyerɛ din a wɔde RTL mmoa aka ho:
- Wɔasesa din
.left-*
ne.right-*
to.start-*
ne.end-*
. - Wɔasesa din
.float-left
ne.float-right
to.float-start
ne.float-end
. - Wɔasesa din
.border-left
ne.border-right
to.border-start
ne.border-end
. - Wɔasesa din
.rounded-left
ne.rounded-right
to.rounded-start
ne.rounded-end
. - Wɔasesa din
.ml-*
ne.mr-*
to.ms-*
ne.me-*
. - Wɔasesa din
.pl-*
ne.pr-*
to.ps-*
ne.pe-*
. - Wɔasesa din
.text-left
ne.text-right
to.text-start
ne.text-end
.
- Wɔasesa din
-
AbubuwWɔagyae negative margins no default so.
-
Wɔde
.bg-body
adesuakuw foforo aka ho ma wɔde<body>
's background no si nneɛma foforo so ntɛmntɛm. -
Wɔde gyinabea foforo a mfaso wɔ so aka ho ama
top
,right
,bottom
, neleft
. Nneɛma a ɛsom bo no bi ne0
,50%
, ne100%
agyapade biara ho. -
Wɔde foforo
.translate-middle-x
&.translate-middle-y
mfaso horow kaa ho wɔ horizontally anaa vertically mfinimfini absolute / fixed gyinabea elements. -
Wɔde nneɛma foforo a
border-width
wɔde di dwuma aka ho . -
AbubuwWɔsesaa ne din
.text-monospace
yɛɛ no.font-monospace
. -
AbubuwWɔayi
.text-hide
afi hɔ efisɛ ɛyɛ ɔkwan a akyɛ a wɔfa so de nsɛm sie a ɛnsɛ sɛ wɔde di dwuma bio. -
Wɔde
.fs-*
utilities aka ho amafont-size
utilities (a RFS ayɛ adwuma). Eyinom de nsenia koro no ara na edi dwuma sɛnea HTML no nsɛmti a wɔde ahyɛ hɔ no (1-6, akɛse kosi nketewa), na wobetumi afa Sass map so asesa. -
AbubuwWɔasesa
.font-weight-*
utilities din sɛnea ɛte.fw-*
wɔ tiawa ne nea ɛkɔ so daa ho. -
AbubuwWɔasesa
.font-style-*
utilities din sɛnea ɛte.fst-*
wɔ tiawa ne nea ɛkɔ so daa ho. -
Wɔde aka ho
.d-grid
de akyerɛ mfasoɔ ne mfasoɔ foforɔgap
(.gap
) ama CSS Grid ne flexbox nhyehyɛɛ. -
AbubuwWoyii
.rounded-sm
nerounded-lg
, na wɔde adesua ahorow no nsenia foforo bae,.rounded-0
sɛ.rounded-3
. Hwɛ #31687 . -
Wɔde nneɛma foforo a
line-height
wɔde di dwuma aka ho:.lh-1
,.lh-sm
,.lh-base
ne.lh-lg
. Hwɛ ha . -
Wotutuu
.d-none
utility no wɔ yɛn CSS no mu sɛnea ɛbɛyɛ a ɛbɛma no mu duru pii asen display utilities afoforo. -
Wɔtrɛw
.visually-hidden-focusable
ɔboafo no mu ma ɛyɛɛ adwuma nso wɔ nsukorade so, de:focus-within
.
Aboafo
-
Abubuw Wɔasesa embed aboafoɔ a wɔma mmuaeɛ din ayɛ no ratio aboafoɔ a wɔwɔ adesua din foforɔ ne suban a wɔatu mpɔn, ne CSS nsakraeɛ a ɛboa.
- Wɔasesa adesua ahorow din ma wɔasesa
by
akɔx
wɔ afã horow no mu. Sɛ nhwɛso no,.ratio-16by9
mprempren ne.ratio-16x9
. - Yɛatow
.embed-responsive-item
ne element kuw paw no agu de agye paw a ɛyɛ mmerɛw no atom.ratio > *
. Klas foforo biara nhia, na mprempren ratio boafo no de HTML element biara yɛ adwuma. - Wɔasesa
$embed-responsive-aspect-ratios
Sass map no din ayɛ no$aspect-ratios
na wɔama ne botae ahorow no ayɛ mmerɛw de adesuakuw no din ne ɔha biara mu nkyem no ahyɛ mu sɛkey: value
abien no. - Mprempren wɔayɛ CSS nsakrae ahorow na wɔde aka ho ama botae biara wɔ Sass map no mu. Sesa
--bs-aspect-ratio
variable no wɔ no so.ratio
na woayɛ custom aspect ratio biara .
- Wɔasesa adesua ahorow din ma wɔasesa
-
Abubuw Mprempren “Screen reader” adesua ahorow no yɛ adesua ahorow a “wɔde aniwa hu ahintaw” .
- Sesa Sass fael no fii
scss/helpers/_screenreaders.scss
to soscss/helpers/_visually-hidden.scss
- Wɔasesa din
.sr-only
ne.sr-only-focusable
to.visually-hidden
ne.visually-hidden-focusable
- Wɔsesa din
sr-only()
na wɔdesr-only-focusable()
mixins ayɛvisually-hidden()
nevisually-hidden-focusable()
.
- Sesa Sass fael no fii
-
bootstrap-utilities.css
afei de yɛn aboafo nso ka ho. Ɛho nhia sɛ wɔde aboafoɔ bɛba wɔ custom builds mu bio.
JavaScript a ɛwɔ hɔ no
-
Wogyaee jQuery dependency na wɔsan kyerɛw plugins sɛ ɛbɛtra JavaScript a ɛyɛ daa mu.
-
AbubuwData attributes a ɛwɔ JavaScript plugins nyinaa mu no, seesei wɔde din ahyɛ mu de aboa ma woahu nsonsonoe a ɛda Bootstrap dwumadie no ntam wɔ nnipa foforɔ ne w’ankasa wo koodu ho. Sɛ nhwɛso no, yɛde di dwuma
data-bs-toggle
mmom sen sɛ yɛdedata-toggle
. -
Mprempren plugins nyinaa betumi agye CSS selector sɛ akyinnyegye a edi kan. Wubetumi de DOM element anaa CSS selector biara a ɛfata atwam de ayɛ plugin no nhwɛso foforo:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
wobetumi atwam sɛ dwumadie a ɛgye Bootstrap no default Popper config no tom sɛ akasakasa, sɛdeɛ ɛbɛyɛ a wobɛtumi de saa default nhyehyeɛ yi abɔ mu wɔ wo kwan so. Ɛfa dropdowns, popovers, ne nnwinnade ho nsɛm ho. -
fallbackPlacements
Wɔasesa default value ma the no akɔ['top', 'right', 'bottom', 'left']
ma Popper elements no a wɔde besisi hɔ yiye. Ɛfa dropdowns, popovers, ne nnwinnade ho nsɛm ho. -
Woyii underscore afi ɔmanfo static akwan te sɛ
_getInstance()
→getInstance()
.