in English

A’ gluasad gu v5

Cum sùil air agus ath-sgrùdaich atharrachaidhean air faidhlichean stòr Bootstrap, sgrìobhainnean, agus co-phàirtean gus do chuideachadh le bhith a’ gluasad bho v4 gu v5.

Air an duilleig seo

v5.2.0

Dealbhadh ath-leasaichte

Tha Bootstrap v5.2.0 a’ nochdadh ùrachadh dealbhaidh seòlta airson dòrlach de cho-phàirtean agus thogalaichean thairis air a’ phròiseact, gu sònraichte tro border-radiusluachan ath-leasaichte air putanan agus smachdan cruth . Chaidh na sgrìobhainnean againn ùrachadh cuideachd le duilleag-dachaigh ùr, cruth docaichean nas sìmplidh nach tuit earrannan den bhàr-thaobh tuilleadh, agus eisimpleirean nas follaisiche de Bootstrap Icons .

Barrachd chaochladairean CSS

Tha sinn air na pàirtean againn uile ùrachadh gus caochladairean CSS a chleachdadh. Fhad ‘s a tha Sass fhathast mar bhunait air a h-uile càil, chaidh gach pàirt ùrachadh gus caochladairean CSS a thoirt a-steach air na clasaichean bunaiteach co-phàirteach (me, .btn), a’ ceadachadh barrachd gnàthachadh fìor-ùine air Bootstrap. Ann am fiosan às deidh sin, cumaidh sinn oirnn a’ leudachadh ar cleachdadh de chaochladairean CSS gu ar cruth, foirmean, luchd-cuideachaidh agus goireasan. Leugh tuilleadh mu chaochladairean CSS anns gach pàirt air na duilleagan sgrìobhainnean aca.

Bidh an cleachdadh caochladair CSS againn rudeigin neo-choileanta gu Bootstrap 6. Ged a bu mhath leinn iad sin a chuir an gnìomh gu h-iomlan, tha cunnart ann gun atharraich iad briseadh. Mar eisimpleir, bidh suidheachadh $alert-border-width: var(--bs-border-width)sa chòd stòr againn a’ briseadh Sass a dh’fhaodadh a bhith anns a’ chòd agad fhèin ma bha thu a’ dèanamh $alert-border-width * 2airson adhbhar air choireigin.

Mar sin, far an gabh sin dèanamh, cumaidh sinn oirnn a’ putadh a dh’ionnsaigh barrachd chaochladairean CSS, ach feuch an aithnich thu gur dòcha gu bheil ar buileachadh beagan cuibhrichte ann an v5.

Ùr`_maps.scss`

Thug Bootstrap v5.2.0 a-steach faidhle Sass ùr le _maps.scss. Bidh e a’ tarraing a-mach grunn mhapaichean Sass _variables.scssgus cùis a rèiteach far nach deach ùrachadh air mapa tùsail a chuir an sàs ann am mapaichean àrd-sgoile a leudaicheas iad. Mar eisimpleir, $theme-colorscha robh ùrachaidhean air an cur an sàs ann am mapaichean cuspair eile air an robh earbsa $theme-colors, a’ briseadh prìomh shruth-obrach gnàthachaidh. Ann an ùine ghoirid, tha cuingealachadh aig Sass far a bheil aon uair ‘s gu bheil caochladair no mapa bunaiteach air a chleachdadh , chan urrainnear ùrachadh. Tha an aon easbhaidh ann le caochladairean CSS nuair a bhios iad air an cleachdadh gus caochladairean CSS eile a chruthachadh.

Sin as coireach gum feum gnàthachadh caochlaideach ann am Bootstrap a thighinn às deidh @import "functions", ach roimhe @import "variables"seo agus an còrr den stac in-mhalairt againn. Tha an aon rud a 'buntainn ri mapaichean Sass - feumaidh tu a dhol thairis air na roghainnean bunaiteach mus tèid an cleachdadh. Chaidh na mapaichean a leanas a ghluasad chun an fhear ùr _maps.scss:

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

Bu chòir gum biodh na togalaichean àbhaisteach Bootstrap CSS agad a-nis a’ coimhead rudeigin mar seo le in-mhalairt mhapaichean air leth.

  // 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

Goireasan ùra

font-weightGoireasan leudaichte gus a bhith a’ toirt a-steach .fw-semiboldclòidean leth-dhreuchdail.
border-radiusGoireasan leudaichte gus dà mheud ùr a thoirt a-steach, .rounded-4agus .rounded-5, airson barrachd roghainnean.

Atharrachaidhean a bharrachd

$enable-container-classesRoghainn ùr air a thoirt a-steach. - A- nis nuair a thaghas tu a-steach do chruth deuchainneach CSS Grid, .container-*bidh clasaichean fhathast air an cur ri chèile, mura h-eil an roghainn seo air a shuidheachadh gu false. Bidh soithichean cuideachd a’ cumail an luachan gutter.
Tha atharrachaidhean freagairteach aig co-phàirt Offcanvas a-nis . Tha an .offcanvasclas tùsail fhathast gun atharrachadh - bidh e a’ falach susbaint thar gach port-seallaidh. Gus a dhèanamh freagairteach, atharraich an .offcanvasclas sin gu clas sam bith .offcanvas-{sm|md|lg|xl|xxl}.
Tha luchd-sgaraidh bùird nas tiugh a-nis a’ roghnachadh a-steach. - Tha sinn air a’ chrìoch nas tiugh agus nas duilghe a dhol thairis air eadar buidhnean bùird a thoirt air falbh agus air a ghluasad gu clas roghainneil as urrainn dhut a chuir a-steach, .table-group-divider. Faic na docaichean bùird airson eisimpleir.
Chaidh Scrollspy ath-sgrìobhadh gus an Intersection Observer API a chleachdadh , a tha a’ ciallachadh nach eil feum agad air pasgain phàrant càirdeach tuilleadh, a’offsetdìmeas air config, agus barrachd. Coimhead airson na gnìomhan Scrollspy agad gus a bhith nas cruinne agus nas cunbhalaiche anns an t-sealladh seòlaidh aca.
Bidh popovers agus molaidhean innealan a-nis a’ cleachdadh caochladairean CSS. Chaidh cuid de chaochladairean CSS ùrachadh bhon cho-aoisean Sass gus an àireamh de chaochladairean a lughdachadh. Mar thoradh air an sin, cha deach trì caochladairean a mholadh san fhoillseachadh seo: $popover-arrow-color, $popover-arrow-outer-color, agus $tooltip-arrow-color.
Luchd-cuideachaidh ùra air an cur ris .text-bg-{color}. An àite a bhith a’ suidheachadh goireasan fa leth .text-*agus .bg-*goireasan, faodaidh tu a-nis an .text-bg-*luchd -cuideachaidh a chleachdadh gus background-coloraghaidh le aghaidh eadar-dhealaichte a shuidheachadh color.
Mion-atharrachaidh air a chur ris .form-check-reversegus òrdugh nan bileagan agus na bogsaichean sgrùdaidh / rèidiothan co-cheangailte riutha a thionndadh.
Chaidh taic colbhan stiallach a chur ri bùird tron .table-striped-columnschlas ùr.

Airson liosta iomlan de dh'atharrachaidhean, faic am pròiseact v5.2.0 air GitHub .

v5.1.0

Taic deuchainneach air a chur ris airson cruth CSS Grid . - Is e obair a tha seo a tha a’ dol air adhart, agus chan eil e deiseil fhathast airson cleachdadh cinneasachaidh, ach faodaidh tu roghnachadh a-steach don fheart ùr tro Sass. Gus a chomasachadh, cuir à comas a’ ghriod bunaiteach, le bhith a’ suidheachadh $enable-grid-classes: falseagus a’ comasachadh Grid CSS le bhith a’ suidheachadh $enable-cssgrid: true.
Navbars ùraichte gus taic a thoirt do offcanvas. - Cuir drathairean dheth canabhas ann am bàr seòlaidh sam bith leis na .navbar-expand-*clasaichean freagairteach agus cuid de chomharradh offcanvas.
Pàirt neach- àite ùr air a chur ris . - Am pàirt as ùire againn, dòigh air blocaichean sealach a thoirt seachad an àite fìor shusbaint gus cuideachadh le bhith ag innse gu bheil rudeigin fhathast a’ luchdachadh air an làrach no an aplacaid agad.
Tha am plugan Collapse a-nis a’ toirt taic do bhith a’ tuiteam gu còmhnard . - Cuir ris .collapse-horizontalgus an cuir thu .collapsesìos an widthàite an height. Seachain ath-pheantadh brabhsair le bhith a’ suidheachadh faidhle min-heightno height.
Chaidh stac ùr agus luchd-cuideachaidh riaghailt dìreach a chur ris. - Cuir gu sgiobalta grunn thogalaichean flexbox gus dealbhadh àbhaisteach a chruthachadh gu sgiobalta le stacan . Tagh bho chruachan còmhnard ( .hstack) agus inghearach ( .vstack). Cuir luchd-sgaraidh dìreach coltach ri <hr>eileamaidean leis an luchd- cuideachaidh ùra.vr .
:rootChaidh caochladairean CSS cruinne ùra a chur ris . - Chuir sinn grunn chaochladairean CSS ùra ris an :rootìre airson smachd a chumail air <body>stoidhlichean. Tha barrachd anns na h-obraichean, a’ toirt a-steach thairis air na goireasan agus na co-phàirtean againn, ach airson a-nis leugh caochladairean CSS anns an roinn Customize .
Ath-sgrùdadh air goireasan dath is cùl-raoin gus caochladairean CSS a chleachdadh, agus chuir e goireasan teodhachd teacsa ùr agus cùl -raon ris . - .text-* agus .bg-*tha goireasan a-nis air an togail le caochladairean CSS agus rgba()luachan dath, a’ toirt cothrom dhut goireas sam bith a ghnàthachadh gu furasta le goireasan neo-sheasmhachd ùra.
Chaidh eisimpleirean criomag ùra a chur ris stèidhichte gus sealltainn mar as urrainn dhuinn na pàirtean againn a ghnàthachadh. - Tarraing deiseil airson co-phàirtean gnàthaichte agus pàtrain dealbhaidh cumanta eile a chleachdadh leis na h- eisimpleirean ùra Snippets againn . A ’ gabhail a-steach footers , dropdowns , buidhnean liosta , agus modalan .
Stoidhlichean suidheachaidh air an toirt air falbh bho popovers agus molaidhean innealan oir tha iad sin air an làimhseachadh le Popper a-mhàin. $tooltip-marginair a dhol sìos agus air a shuidheachadh nullsa phròiseas.

Ag iarraidh tuilleadh fiosrachaidh? Leugh am post blog v5.1.0.

Hi siud! Tha atharrachaidhean air a’ chiad fhoillseachadh mòr againn de Bootstrap 5, v5.0.0, air an clàradh gu h-ìosal. Chan eil iad a’ nochdadh nan atharrachaidhean a bharrachd a chithear gu h-àrd.

eisimeileachd

Chaidh jQuery sìos.
Air ùrachadh bho Popper v1.x gu Popper v2.x.
Chaidh Dart Sass a chuir na àite Libsass mar an neach-cruinneachaidh Sass againn leis nach robh Libsass air a mholadh.
Rinn mi imrich bho Jekyll gu Hugo airson ar sgrìobhainnean a thogail

Taic brabhsair

Internet Explorer 10 agus 11 air a leigeil sìos
Microsoft Edge air a leigeil sìos < 16 (Legacy Edge)
Firefox <60
Safari air a leigeil sìos <12
iOS Safari air a leigeil sìos < 12
Chrome air a leigeil sìos <60

Sgrìobhainnean ag atharrachadh

Duilleag dachaigh ath-dhealbhaichte, cruth docs, agus bonn-coise.
Stiùireadh parsailean ùr air a chur ris .
Chuir sinn roinn Customize ùr ris , a’ dol an àite duilleag Cuspair v4 , le mion-fhiosrachadh ùr mu Sass, roghainnean rèiteachaidh cruinneil, sgeamaichean dath, caochladairean CSS, agus barrachd.
Ath-eagrachadh a h-uile sgrìobhainn foirm gu roinn Foirmean ùra , a’ briseadh an t-susbaint gu duilleagan le barrachd fòcas.
San aon dòigh, dh’ ùraich sinn an roinn Layout , gus susbaint clèithe a chuir a-mach nas soilleire.
Chaidh duilleag co-phàirt “Navs” ath-ainmeachadh gu “Navs & Tabs”.
Chaidh duilleag “Checks” ath-ainmeachadh gu “Checks & radios”.
Rinn sinn ath-dhealbhadh air a’ bhàr seòlaidh agus chuir sinn subnav ùr ris gus a dhèanamh nas fhasa faighinn timcheall air na làraich-lìn againn agus dreachan docs.
Chaidh ath-ghoirid meur-chlàr ùr a chur ris airson an raon sgrùdaidh: Ctrl + /.

Sass

Tha sinn air am mapa bunaiteach Sass a chur còmhla gus a dhèanamh nas fhasa luachan nach eil feum a thoirt air falbh. Cumaibh cuimhne gum feum thu a-nis a h-uile luach a mhìneachadh anns na mapaichean Sass mar $theme-colors. Faigh a-mach mar a dhèiligeas tu ri mapaichean Sass .
BriseadhGnìomh ath- ainmichte color-yiq()agus caochladairean co-cheangailte ris color-contrast()leis nach eil e tuilleadh co-cheangailte ri àite dath YIQ. Faic #30168.
- $yiq-contrasted-thresholdair ath-ainmeachadh gu $min-contrast-ratio.
- $yiq-text-darkagus $yiq-text-lighttha iad air an ath-ainmeachadh gu $color-contrast-darkagus $color-contrast-light.
BriseadhTha paramadairean measgachadh ceist mheadhanan air atharrachadh airson dòigh-obrach nas loidsigeach.
- media-breakpoint-down()a’ cleachdadh a’ phuing-bhriseadh fhèin an àite an ath phuing-bhriseadh (me, media-breakpoint-down(lg)an àite media-breakpoint-down(md)targaidean-seallaidh nas lugha na lg).
- San aon dòigh, bidh an dàrna paramadair ann media-breakpoint-between()cuideachd a’ cleachdadh a’ phuing-bhriseadh fhèin an àite an ath phuing-bhriseadh (me, media-between(sm, lg)an àite media-breakpoint-between(sm, md)targaidean-seallaidh eadar smagus lg).
BriseadhStoidhlichean clò-bhualaidh air an toirt air falbh agus $enable-print-stylescaochlaideach. Tha clasaichean taisbeanaidh clò-bhualaidh fhathast timcheall. Faic #28339 .
BriseadhAir tuiteam color(), theme-color(), agus gray()gnìomhan airson caochladairean. Faic #29083 .
BriseadhGnìomh ath- ainmichte theme-color-level()gu color-level()agus a-nis a’ gabhail ri dath sam bith a tha thu ag iarraidh an àite dìreach $theme-colordathan. Faic #29083 Coimhead a-mach: color-level() chaidh a leigeil a-steach nas fhaide air adhart v5.0.0-alpha3.
BriseadhAir ath- ainmeachadh $enable-prefers-reduced-motion-media-queryagus $enable-pointer-cursor-for-buttonsgu $enable-reduced-motionagus $enable-button-pointersairson giorrad.
BriseadhThoir air falbh am bg-gradient-variant()measgachadh. Cleachd an .bg-gradientclas gus caiseadan a chur ri eileamaidean an àite nan .bg-gradient-*clasaichean a chaidh a chruthachadh.
Briseadh Measgachaidhean nach deach a mholadh roimhe a thoirt air falbh:
- hover, hover-focus, plain-hover-focus, agushover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(Thuit cuideachd an clas goireasan co-cheangailte ris, .text-hide)
- visibility()
- form-control-focus()
BriseadhGnìomh ath- ainmichte scale-color()gus shift-color()casg a chuir air bualadh le gnìomh sgèile dath Sass fhèin.
box-shadowBidh mixins a-nis a’ ceadachadh nullluachan agus a’ tuiteam nonebho ioma argamaidean. Faic #30394 .
Tha border-radius()luach bunaiteach aig a’ mheasgachadh a-nis.

Siostam dath

An siostam dath a bha ag obair leis color-level()agus $theme-color-intervala chaidh a thoirt air falbh airson siostam dath ùr. Tha lighten()agus . darken()_ tint-color()_ shade-color()Measgaichidh na gnìomhan sin an dath le geal no dubh an àite a bhith ag atharrachadh an aotromachd le tomhas stèidhichte. Bidh shift-color()an dàrna cuid dath no sgàil air a rèir a bheil am paramadair cuideam aige dearbhach no àicheil. Faic #30622 airson tuilleadh fiosrachaidh.
Chaidh dathan agus cumaidhean ùra a chur ris airson gach dath, a’ toirt seachad naoi dathan eadar-dhealaichte airson gach dath bunaiteach, mar chaochladairean Sass ùra.
Eadar-dhealachadh dath nas fheàrr. Co-mheas eadar-dhealachadh dath cnapach bho 3: 1 gu 4.5: 1 agus dathan gorm, uaine, cyan, agus pinc ùrachadh gus dèanamh cinnteach à eadar-dhealachadh WCAG 2.1 AA. Cuideachd dh’ atharraich an dath eadar-dhealachadh dath againn bho $gray-900gu $black.
Gus taic a thoirt don t-siostam dath againn, tha sinn air cleachdaidhean tint-color()agus shade-color()gnìomhan ùra a chuir ris gus na dathan againn a mheasgachadh gu h-iomchaidh.

Ùrnaighean grid

Briseadh ùr! Air a chur ris puing briseadh ùr xxlairson 1400pxagus suas. Chan eil atharrachadh sam bith air a h-uile briseadh eile.
Gutters nas fheàrr. Tha cutairean a-nis air an suidheachadh ann an rems, agus tha iad nas cumhainge na v4 ( 1.5rem, no mu 24px, sìos bho 30px). Bidh seo a’ co-thaobhadh cutairean an t-siostam clèithe againn leis na goireasan eadar-dhealaichte againn.
- Chaidh clas cutairean ùra ( .g-*, .gx-*, agus .gy-*) a chur ris gus smachd a chumail air cutairean còmhnard / dìreach, cutairean còmhnard, agus cutairean dìreach.
- BriseadhAir ath- ainmeachadh .no-guttersgus .g-0a bhith co-ionnan ri goireasan cutairean ùra.
Chan eil colbhan air position: relativean cleachdadh tuilleadh, agus mar sin is dòcha gum feum thu .position-relativecuid de na h-eileamaidean a chur ris gus an giùlan sin a thoirt air ais.
BriseadhLeig às grunn .order-*chlasaichean nach deach gu tric a chleachdadh. Chan eil sinn a-nis a’ toirt seachad ach .order-1a- .order-5mach às a’ bhogsa.
BriseadhLeig sìos am .mediapàirt oir is urrainn dha a bhith air ath-aithris gu furasta le goireasan. Faic #28265 agus an duilleag flex utilities airson eisimpleir .
Briseadh bootstrap-grid.cssa-nis a’ buntainn box-sizing: border-boxris a ’cholbh a-mhàin an àite a bhith ag ath-shuidheachadh meud bogsa cruinneil. San dòigh seo, faodar na stoidhlichean clèithe againn a chleachdadh ann am barrachd àiteachan gun bhacadh.
$enable-grid-classeschan eil sin a’ cur casg air gineadh chlasaichean soithichean tuilleadh. Faic #29146.
Chaidh am measgachadh ùrachadh make-colgu bunaiteach gu colbhan co-ionann gun mheud sònraichte.

Susbaint, Ath-thòiseachadh, msaa

Tha RFS a-nis air a chomasachadh gu bunaiteach. Bidh cinn a’ cleachdadh a’font-size()mheasgachaidh ag atharrachadh gu fèin-ghluasadachfont-sizegu sgèile leis a’ phort-seallaidh. Chaidh am feart seo a thaghadh roimhe seo le v4.
BriseadhRinn sinn ath-sgrùdadh air ar clò-sgrìobhaidh taisbeanaidh gus na $display-*caochladairean againn a chuir an àite agus $display-font-sizesmapa Sass. Cuideachd thug air falbh na $display-*-weightcaochladairean fa leth airson aon $display-font-weightagus atharraichte font-sizes.
Chuir sinn dà .display-*mheud cinn ùr ris, .display-5agus .display-6.
Bithear a’ cur cuideam air ceanglaichean gu bunaiteach (chan ann dìreach air hover), mura h-eil iad nam pàirt de cho-phàirtean sònraichte.
Bùird ath-dhealbhaichte gus na stoidhlichean aca ùrachadh agus an ath-thogail le caochladairean CSS airson barrachd smachd air stoidhle.
BriseadhCha bhith bùird neadachaidh a’ sealbhachadh stoidhlichean tuilleadh.
Briseadh .thead-lightagus .thead-darktha iad air an leigeil sìos airson na .table-*clasaichean caochlaideach a dh'fhaodar a chleachdadh airson a h-uile eileamaid bùird ( thead, tbody, tfoot, , tr, thagus td).
BriseadhTha am table-row-variant()measgachadh air ath-ainmeachadh table-variant()agus chan eil e a’ gabhail ach ri 2 pharamadair: $color(ainm dath) agus $value(còd dath). Tha dath na crìche agus dathan stràc air an tomhas gu fèin-ghluasadach stèidhichte air caochladairean bàillidh a’ bhùird.
Roinn caochladairean pleadhaig cealla clàr a-steach -yagus -x.
BriseadhClas air tuiteam .pre-scrollable. Faic #29135
Briseadh .text-*cha bhith goireasan a’ cur stàitean hover agus fòcas ri ceanglaichean tuilleadh. .link-*faodar clasaichean cuideachaidh a chleachdadh nan àite. Faic #29267
BriseadhClas air tuiteam .text-justify. Faic #29793
Briseadh <hr>bidh eileamaidean a-nis a’ cleachdadh heightan àite bordertaic nas fheàrr a thoirt don sizefheart. Leigidh seo le bhith a’ cleachdadh goireasan pleadhaig gus sgaraidhean nas tiugha a chruthachadh (me, <hr class="py-1">).
Ath-shuidhich a’ chòmhnard bhunaiteach padding-leftair adhart <ul>agus na h- <ol>eileamaidean bhon bhrobhsair bunaiteach 40pxgu 2rem.
Air a chur ris $enable-smooth-scroll, a tha a’ buntainn scroll-behavior: smoothair feadh na cruinne - ach a-mhàin luchd-cleachdaidh ag iarraidh gluasad nas lugha tro prefers-reduced-motioncheist mheadhanan. Faic #31877

RTL

Chaidh caochladairean sònraichte slighe còmhnard, goireasan, agus measgachaidhean uile ath-ainmeachadh gus feartan loidsigeach a chleachdadh mar an fheadhainn a lorgar ann an dealbhadh flexbox - me, startagus endan àite leftagus right.

Foirmean

Foirmean fleòdraidh ùra air an cur ris! Tha sinn air an eisimpleir bileagan fleòdraidh adhartachadh gu co-phàirtean cruth làn-thaic. Faic duilleag ùr nan leubail fleòdraidh.
Briseadh Eileamaidean cruth dùthchasach agus gnàthaichte daingnichte. Chaidh bogsaichean-seic, rèidiothan, taghaidhean, agus cuir a-steach eile aig an robh clasaichean dùthchasach is àbhaisteach ann an v4 a dhaingneachadh. A-nis tha cha mhòr na h-eileamaidean cruth againn gu tur àbhaisteach, a’ mhòr-chuid às aonais feum air HTML àbhaisteach.
- .custom-control.custom-checkboxtha a-nis .form-check.
- .custom-control.custom-custom-radiotha a-nis .form-check.
- .custom-control.custom-switchtha a-nis .form-check.form-switch.
- .custom-selecttha a-nis .form-select.
- .custom-fileagus .form-filechaidh stoidhlichean àbhaisteach a chuir nan àite air mullach .form-control.
- .custom-rangetha a-nis .form-range.
- Thuit dùthchasach .form-control-fileagus .form-control-range.
BriseadhAir tuiteam .input-group-appendagus .input-group-prepend. Faodaidh tu a-nis dìreach putanan a chuir ris agus .input-group-textmar chloinn dìreach de na buidhnean cuir a-steach.
Tha an radius crìche fad-ùine air chall air buidheann cuir a-steach le bug fios-air-ais dearbhaidh air a shocrachadh mu dheireadh le bhith a’ cur .has-validationclas a bharrachd ri buidhnean cuir a-steach le dearbhadh.
Briseadh Clasaichean cruth sònraichte air an leigeil sìos airson an t-siostam clèithe againn. Cleachd ar cliath agus goireasan an àite .form-group, .form-row, no .form-inline.
BriseadhFeumaidh bileagan foirm a-nis .form-label.
Briseadh .form-textchan eil seo a’ suidheachadh tuilleadh display, a’ toirt cothrom dhut teacsa cuideachaidh in-loidhne a chruthachadh no a bhacadh mar a thogras tu dìreach le bhith ag atharrachadh an eileamaid HTML.
Cha bhith smachdan foirm air an cleachdadh tuilleadh stèidhichte heightnuair a ghabhas sin dèanamh, an àite sin a’ cur dheth min-heightgus gnàthachadh agus co-chòrdalachd le co-phàirtean eile a leasachadh.
Chan eilear a’ cur ìomhaighean dearbhaidh an sàs ann <select>an s le multiple.
Faidhlichean Sass stòr ath-eagraichte fo scss/forms/, a’ toirt a-steach stoidhlichean buidhne cuir a-steach.

Co-phàirtean

Luachan aonaichte paddingairson rabhaidhean, cromagan arain, cairtean, dropdowns, buidhnean liosta, modalan, popovers, agus molaidhean innealan a bhith stèidhichte air ar $spacercaochladair. Faic #30564 .

Bogsa

Pàirt bogsa ùr air a chur ris .

Rabhaidhean

Tha eisimpleirean aig rabhaidhean a-nis le ìomhaighean .
Stoidhlichean gnàthaichte air an toirt air falbh airson <hr>s anns gach rabhadh bhon a tha iad a’ cleachdadh currentColor.

Bràistean

BriseadhLeig às a h-uile .badge-*clas dath airson goireasan cùl-fhiosrachaidh (me, cleachd .bg-primaryan àite .badge-primary).
BriseadhAir a leigeil sìos .badge-pill- cleachd an .rounded-pillgoireas na àite.
BriseadhThoir air falbh stoidhlichean hover agus fòcas airson <a>agus <button>eileamaidean.
Meudachadh pleadhag bunaiteach airson bràistean bho .25em/ .5emgu .35em/ .65em.

Briosgaidean

Sìmplidh sinn coltas àbhaisteach de chriomagan arain le bhith a’ toirt air falbh padding, background-color, agus border-radius.
Chaidh seilbh àbhaisteach CSS ùr a chuir ris --bs-breadcrumb-dividerairson gnàthachadh furasta gun a bhith feumach air CSS ath-chruinneachadh.

Putanan

Briseadh Toggle putanan , le bogsaichean-seic no rèidiothan, chan fheum JavaScript tuilleadh agus tha comharradh ùr aca. Chan fheum sinn eileamaid còmhdaich tuilleadh, cuir.btn-checkris an<input>, agus paidhir e le.btnclasaichean sam bith air an<label>. Faic #30650 . Tha na docaichean airson seo air gluasad bhon duilleag Putanan againn gu roinn nam Foirmean ùra.
Briseadh Air a chuir sìos .btn-blockairson goireasan. An àite a bhith a’ cleachdadh .btn-blockair an .btn, paisg na putanan agad le .d-gridagus .gap-*goireas gus am fàgail mar a dh’ fheumar. Gluais gu clasaichean freagairteach airson eadhon barrachd smachd orra. Leugh na docaichean airson eisimpleirean.
Dh’ ùraich sinn ar button-variant()agus button-outline-variant()mixins gus taic a thoirt do pharaimearan a bharrachd.
Putanan ùraichte gus dèanamh cinnteach gum bi barrachd iomsgaradh ann air hover agus stàitean gnìomhach.
Tha putanan ciorramach a-nis air pointer-events: none;.

cairt

BriseadhAir tuiteam .card-deckann am fàbhar ar cliath. Paisg na cairtean agad ann an clasaichean colbh agus cuir inneal phàrant .row-cols-*ris gus ath-chruthachadh deic chairtean (ach le barrachd smachd air co-thaobhadh freagairteach).
BriseadhAir tuiteam .card-columnsann am fàbhar Masonry. Faic #28922 .
BriseadhChuir sinn pìos bogsa ùr.card na àite a’ bhogsa stèidhichte .

Carousel

.carousel-darkTionndadh ùr air a chur ris airson teacsa dorcha, smachdan, agus comharran (sgoinneil airson cùl-fhiosrachadh nas aotroime).
Chaidh ìomhaighean chevron a chuir nan àite airson smachdan carousel le SVGn ùra bho Bootstrap Icons .

Dùin am putan

BriseadhAir ath- ainmeachadh .closegu .btn-closeairson ainm nach eil cho coitcheann.
Bidh putanan dùin a-nis a’ cleachdadh background-imageSVG freumhaichte an àite ×san HTML, a’ ceadachadh gnàthachadh nas fhasa gun fheum air suathadh air a’ chomharra agad.
Tionndadh ùr air a chur ris .btn-close-whitea bhios a’ cleachdadh filter: invert(1)gus ìomhaighean iomsgaradh nas àirde a chuir às an aghaidh cùl-raointean nas dorcha.

Tuitidh

Thoir air falbh acrachadh scrollaidh airson bogsaichean.

Droch-dhìol

Chaidh caochladairean ùra .dropdown-menu-darkagus caochladairean co-cheangailte a chur ris airson tuiteam sìos dorcha air-iarrtas.
Caochladair ùr air a chur ris airson $dropdown-padding-x.
Dorchaich an roinneadh tuiteam-sìos airson iomsgaradh nas fheàrr.
BriseadhTha a h-uile tachartas airson an tuiteam-sìos a-nis air a phiobrachadh air a’ phutan toggle tuiteam-sìos agus an uairsin air a ghluasad suas chun eileamaid phàrant.
Tha feart aig clàir tuiteam-sìos a-nis data-bs-popper="static"nuair a tha suidheachadh an tuiteam-sìos statach, no nuair a tha an tuiteam-sìos anns a’ bhàr seòlaidh. Tha seo air a chuir ris leis an JavaScript againn agus gar cuideachadh le bhith a’ cleachdadh stoidhlichean suidheachaidh àbhaisteach gun a bhith a’ cur bacadh air suidheachadh Popper.
BriseadhRoghainn air a leigeil flipsìos airson plugan tuiteam sìos airson fàbhar rèiteachadh Popper dùthchasach. Faodaidh tu a-nis an giùlan flip a chuir dheth le bhith a’ dol seachad air raon falamh airson fallbackPlacementsroghainn ann am mion-atharrachaidh flip .
Faodar clàir tuiteam-sìos a-nis a bhriogadh le autoCloseroghainn ùr gus giùlan dùnadh fèin -ghluasadach a làimhseachadh . Faodaidh tu an roghainn seo a chleachdadh gus gabhail ris a’ bhriogadh taobh a-staigh no taobh a-muigh a’ chlàr tuiteam-sìos gus a dhèanamh eadar-ghnìomhach.
Tha dropdowns a-nis a’ toirt taic do .dropdown-items fillte ann an <li>s.

Jumbotron

BriseadhLeig sìos am pàirt jumbotron oir faodar ath-riochdachadh le goireasan. Faic an eisimpleir ùr Jumbotron againn airson demo.

Buidheann liosta

.list-group-numberedMion- atharraichear ùr air a chur ris gus liosta a dhèanamh de bhuidhnean.

Navs agus tabaichean

nullChaidh caochladairean ùra a chur ris airson font-size, font-weight, , color, agus :hover colorris a’ .nav-linkchlas.

Navbars

BriseadhTha feum aig Navbars air soitheach a-staigh (gus riatanasan farsaingeachd agus CSS a dhèanamh nas sìmplidhe).
BriseadhChan .activeurrainnear an clas a chuir gu .nav-items tuilleadh, feumar a chuir an sàs gu dìreach air .nav-links.

Offcanvas

Chaidh am pàirt ùr offcanvas a chur ris .

Duilleagadh

Tha gnàthachadh aig ceanglaichean pagination a-nis margin-lefta tha cruinn gu beothail air a h-uile ceàrnaidh nuair a tha iad air an sgaradh bho chèile.
Air a chur transitionri ceanglaichean duilleag.

Popovers

BriseadhAir ath- ainmeachadh .arrowgu .popover-arrowsan teamplaid popover àbhaisteach againn.
whiteListRoghainn ath -ainmichte gu allowList.

Spinneadairean

Bidh luchd -snìomh a-nis a 'toirt urram prefers-reduced-motion: reducele bhith a' slaodadh sìos beòthachaidhean. Faic #31882 .
Co-thaobhadh dìreach spinner nas fheàrr.

Toasts

Faodar toasts a-nis a shuidheachadh ann an a .toast-containerle cuideachadh bho bhith a’ suidheachadh ghoireasan .
Dh’ atharraich an ùine toast àbhaisteach gu 5 diogan.
Air a thoirt air falbh bho toasts agus air a chuir na àite le feartan overflow: hiddenceart .border-radiuscalc()

Molaidhean innealan

BriseadhAir ath- ainmeachadh .arrowgu .tooltip-arrowsan teamplaid inneal bunaiteach againn.
BriseadhTha an luach bunaiteach airson an fallbackPlacementsatharrachadh gu ['top', 'right', 'bottom', 'left']suidheachadh nas fheàrr de eileamaidean popper.
BriseadhwhiteListRoghainn ath -ainmichte gu allowList.

Goireasan

BriseadhChaidh grunn ghoireasan ath-ainmeachadh gus ainmean seilbh loidsigeach a chleachdadh an àite ainmean stiùiridh le taic RTL a bharrachd:
- Air ath- ainmeachadh .left-*agus .right-*gu .start-*agus .end-*.
- Air ath- ainmeachadh .float-leftagus .float-rightgu .float-startagus .float-end.
- Air ath- ainmeachadh .border-leftagus .border-rightgu .border-startagus .border-end.
- Air ath- ainmeachadh .rounded-leftagus .rounded-rightgu .rounded-startagus .rounded-end.
- Air ath- ainmeachadh .ml-*agus .mr-*gu .ms-*agus .me-*.
- Air ath- ainmeachadh .pl-*agus .pr-*gu .ps-*agus .pe-*.
- Air ath- ainmeachadh .text-leftagus .text-rightgu .text-startagus .text-end.
BriseadhOirean àicheil à comas gu bunaiteach.
.bg-bodyChaidh clas ùr a chur ris airson <body>cùl-fhiosrachadh na h-eileamaidean a bharrachd a shuidheachadh gu sgiobalta.
Chaidh goireasan suidheachaidh ùr a chur ris airson top, right, bottom, agus left. Tha luachan a’ toirt a-steach 0, 50%, agus 100%airson gach seilbh.
.translate-middle-xChaidh goireasan ùra a chur ris .translate-middle-ygu eileamaidean suidhichte iomlan / stèidhichte gu còmhnard no gu dìreach.
border-widthgoireasan ùra air an cur ris .
BriseadhAir ath- ainmeachadh .text-monospacegu .font-monospace.
BriseadhAir a thoirt air falbh .text-hideleis gur e dòigh àrsaidh a th’ ann airson teacsa fhalach nach bu chòir a chleachdadh tuilleadh.
Goireasan a bharrachd .fs-*airson font-sizegoireasan (le RFS air a chomasachadh). Bidh iad sin a’ cleachdadh an aon sgèile ri cinn-cinn bunaiteach HTML (1-6, mòr gu beag), agus faodar an atharrachadh tro mhapa Sass.
Briseadh.font-weight-*Goireasan ath- ainmichte a .fw-*thaobh giorrad agus cunbhalachd.
Briseadh.font-style-*Goireasan ath- ainmichte a .fst-*thaobh giorrad agus cunbhalachd.
Air a chur ris .d-gridgus goireasan agus goireasan ùra a thaisbeanadh gap( .gap) airson cruth CSS Grid agus bogsa flex.
BriseadhAir a thoirt air falbh .rounded-smagus rounded-lg, agus air sgèile ùr de chlasaichean a thoirt a-steach, .rounded-0gu .rounded-3. Faic #31687 .
line-heightChaidh goireasan ùra a chur ris : .lh-1, .lh-sm, .lh-baseagus .lh-lg. Faic an seo .
Ghluais sinn an .d-nonegoireas anns an CSS againn gus barrachd cuideam a thoirt dha thairis air goireasan taisbeanaidh eile.
Leudaich sinn an neach- .visually-hidden-focusablecuideachaidh gu bhith ag obair air soithichean cuideachd, a’ cleachdadh :focus-within.

Luchd-cuideachaidh

Briseadh Tha luchd-cuideachaidh freumhaichte freagairteach air an ath-ainmeachadh gu luchd- cuideachaidh co-mheas le ainmean clas ùra agus giùlan leasaichte, a bharrachd air caochladair CSS cuideachail.
- Chaidh clasaichean ath-ainmeachadh gus atharrachadh bygu xco-mheas taobh. Mar eisimpleir, .ratio-16by9tha e a-nis .ratio-16x9.
- Tha sinn air an .embed-responsive-itemroghnaiche buidheann agus eileamaid a leigeil sìos airson fàbhar .ratio > *roghnaiche nas sìmplidhe. Chan eil feum air clas a bharrachd, agus tha an neach-cuideachaidh co-mheas a-nis ag obair le eileamaid HTML sam bith.
- Chaidh $embed-responsive-aspect-ratiosath-ainmeachadh a dhèanamh air mapa Sass $aspect-ratiosagus chaidh a luachan a dhèanamh nas sìmplidhe gus ainm a’ chlas agus an àireamh sa cheud a ghabhail a-steach mar key: valuechàraid.
- Tha caochladairean CSS a-nis air an gineadh agus air an toirt a-steach airson gach luach air mapa Sass. Atharraich an --bs-aspect-ratiocaochladair air an .ratiogus co-mheas taobh gnàthaichte sam bith a chruthachadh .
Briseadh Tha clasaichean “leughadair sgrion” a-nis nan clasaichean “falaichte le sealladh” .
- Dh'atharraich am faidhle Sass bho scss/helpers/_screenreaders.scssguscss/helpers/_visually-hidden.scss
- Air ath- ainmeachadh .sr-onlyagus .sr-only-focusablegu .visually-hiddenagus.visually-hidden-focusable
- Ath- ainmichte sr-only()agus sr-only-focusable()measgachadh gu visually-hidden()agus visually-hidden-focusable().
bootstrap-utilities.cssa-nis cuideachd a’ toirt a-steach ar luchd-cuideachaidh. Chan fheum luchd-cuideachaidh a bhith air an toirt a-steach do thogalaichean àbhaisteach tuilleadh.

JavaScript

Thuit eisimeileachd jQuery agus ath-sgrìobh e plugins gus a bhith ann an JavaScript cunbhalach.
BriseadhTha buadhan dàta airson a h-uile plugan JavaScript a-nis air an ainmeachadh gus cuideachadh le bhith a’ comharrachadh gnìomhachd Bootstrap bho threas phàrtaidhean agus do chòd fhèin. Mar eisimpleir, bidh sinn a’ cleachdadh data-bs-togglean àite data-toggle.
Faodaidh a h-uile plugan a-nis gabhail ri roghnaichear CSS mar a’ chiad argamaid. Faodaidh tu an dàrna cuid a dhol seachad air eileamaid DOM no taghadair CSS dligheach sam bith gus eisimpleir ùr den plugan a chruthachadh:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigFaodar a thoirt seachad mar ghnìomh a ghabhas ri rèiteachadh Popper bunaiteach Bootstrap mar argamaid, gus an urrainn dhut an rèiteachadh bunaiteach seo a chur còmhla nad shlighe. A’ buntainn ri dropdowns, popovers, agus molaidhean innealan.
Tha an luach bunaiteach airson an fallbackPlacementsatharrachadh gu ['top', 'right', 'bottom', 'left']suidheachadh nas fheàrr de eileamaidean Popper. A’ buntainn ri dropdowns, popovers, agus molaidhean innealan.
Thoir air falbh fo-sgrìobhadh bho dhòighean statach poblach mar _getInstance()→ getInstance().