Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
Check
in English

Ag-migrate iti v5

Suboken ken repasuen dagiti panagbalbaliw kadagiti taudan a papeles ti Bootstrap, dokumentasion, ken dagiti paset tapno matulongannaka nga umakar manipud iti v4 aginggana iti v5.

Iti daytoy a panid

v5.2.0 nga

Napabaro a disenio

Ti Bootstrap v5.2.0 ket mangitampok ti nasipnget a panagpabaro ti disenio para iti sumagmamano a paset ken dagiti tagikua iti ballasiw ti proyekto, a naipangpangruna babaen dagiti napinpintas border-radiusa pateg kadagiti buton ken dagiti kontrol ti porma . Ti dokumentasionmi ket na-update pay babaen ti baro a homepage, nasimsimple a layout ti docs a saanen a mang-collapse kadagiti benneg ti sidebar, ken dagiti ad-adu a nalatak a pagarigan dagiti Bootstrap Icons .

Ad-adu pay a variable ti CSS

In-update mi amin a components mi tapno agusar kadagiti CSS variables. Bayat a ti Sass ket mangsuporta pay laeng ti amin, tunggal maysa a paset ket na-update tapno mairaman dagiti CSS a variable kadagiti klase ti batayan ti paset (kas pagarigan, .btn), a mangipalubos para iti ad-adu nga aktual nga oras a panagpasayaat ti Bootstrap. Kadagiti sumaganad a pannakairuar, itultuloymi a palawaen ti panagusarmi kadagiti variable ti CSS iti layoutmi, dagiti porma, katulongan, ken dagiti utilidad. Basaen ti ad-adu pay maipapan kadagiti variable ti CSS iti tunggal maysa a paset kadagiti bukodda a panid ti dokumentasion.

Ti panagusar ti CSS a variabletayo ket medyo saan a kompleto aginggana ti Bootstrap 6. Bayat a kayatmi a naan-anay nga ipatungpal dagitoy iti ballasiw ti tabla, dagitoy ket agpeggad a mangpataud kadagiti agrupsa a panagbalbaliw. Kas pagarigan, ti panangisaad $alert-border-width: var(--bs-border-width)iti taudan a kodigotayo ket mangburak iti potensial a Sass iti bukodmo a kodigo no ar-aramidem idi $alert-border-width * 2gapu iti sumagmamano a rason.

Kas kasta, sadinoman a mabalin, agtultuloykami a mangiduron nga agturong kadagiti ad-adu a CSS a variable, ngem pangngaasi a bigbigen ti pannakaipatungpalmi ket mabalin a limitado bassit iti v5.

Baro_maps.scss

Ti Bootstrap v5.2.0 ket nangiyam-ammo ti baro a Sass a papeles nga addaan iti _maps.scss. Daytoy ket mangguyod kadagiti sumagmamano a mapa ti Sass manipud iti _variables.scsstapno mangtarimaan ti maysa nga isyu a dagiti panagpabaro iti orihinal a mapa ket saan a naipakat kadagiti sekondario a mapa a mangpalawa kadagitoy. Kas pagarigan, dagiti panagpabaro iti $theme-colorsket saan idi a maipakat kadagiti sabali a mapa ti tema a nagpannuray iti $theme-colors, a mangburak kadagiti kangrunaan a panagayus ti trabaho ti panagpasayaat. Iti ababa a pannao, ti Sass ket addaan iti limitasion a sadiay apaman a ti maysa a default a variable wenno mapa ket naus- usaren , daytoy ket saan a mabalin a mapabaro. Adda ti kapada a pagkurangan kadagiti CSS a variable no dagitoy ket maus-usar a mangbukel kadagiti sabali a CSS a variable.

Daytoy ti gapuna a dagiti variable a panagpasayaat iti Bootstrap ket masapul nga umay kalpasan ti @import "functions", ngem sakbay @import "variables"ken ti nabati nga import stacktayo. Kasta met laeng ti agaplikar kadagiti mapa ti Sass—masapul nga i-override-mo dagiti default sakbay a mausar dagitoy. Dagiti sumaganad a mapa ket nayakar iti baro _maps.scss:

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

Dagiti kostumbre a Bootstrap CSS a panagbangonmo ket rumbeng itan a kasla daytoy nga addaan iti naisina a panagala ti mapa.

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

Baro a utilidad

Dagiti kanayonan a panagbalbaliw

  • Naiyam-ammo ti baro a $enable-container-classespagpilian. — Ita no agpili iti eksperimental a layout ti CSS Grid, .container-*dagiti klase ket maurnongto pay laeng, malaksid no daytoy a pagpilian ket naikeddeng iti false. Pagtalinaeden met itan dagiti container ti gutter values-da.

  • Ti paset ti Offcanvas ket addaan itan kadagiti makasungbat a panagduduma . Agtalinaed a saan a nabaliwan ti orihinal a .offcanvasklase—ilemmengna ti linaon iti ballasiw dagiti amin a viewport. Tapno makasungbat dayta, baliwam dayta a .offcanvasklase iti aniaman a .offcanvas-{sm|md|lg|xl|xxl}klase.

  • Dagiti napuspuskol a table divider ti ag-opt-in itan. — Inikkatmi ti napuspuskol ken narigrigat a mabaliwan a beddeng iti nagbaetan dagiti grupo ti lamisaan ken inyakarmi daytoy iti opsional a klase a mabalinmo nga iyaplikar, .table-group-divider. Kitaen dagiti dok ti lamisaan para iti pagarigan.

  • Ti Scrollspy ket naisurat manen tapno agusar ti Intersection Observer API , a ti kayatna a sawen ket saanmon a kasapulan dagiti relatibo a nagannak a balkot, mangikkatoffsetti config, ken dadduma pay. Kitaem dagiti implementasionmo iti Scrollspy tapno ad-adda nga umiso ken agtultuloy iti nav highlighting-da.

  • Dagiti popover ken dagiti tooltip ket agus-usar itan kadagiti CSS a variable. Sumagmamano a variable ti CSS ket na-update manipud kadagiti katupagda iti Sass tapno mangkissay ti bilang dagiti variable. Kas resulta, tallo a variable ti naikkaten iti daytoy a pannakairuar: $popover-arrow-color, $popover-arrow-outer-color, ken $tooltip-arrow-color.

  • Nainayon dagiti baro a .text-bg-{color}katulongan. Imbes nga ikeddeng ti indibidual .text-*ken .bg-*dagiti utilidad, mabalinmo itan nga usaren dagiti .text-bg-*katulongan tapno mangikeddeng ti maysa background-colornga addaan iti agdumaduma a sango color.

  • Nainayon ti .form-check-reversemodifier tapno mai-flip ti urnos dagiti etiketa ken dagiti nainaig a checkbox/radio.

  • Nainayon dagiti garitgaritan a kolum a mangsuporta kadagiti lamisaan babaen ti baro a .table-striped-columnsklase.

Para iti kompleto a listaan ​​dagiti panagbalbaliw, kitaen ti proyekto ti v5.2.0 iti GitHub .

v5.1.0 nga

  • Nainayon ti eksperimental a suporta para iti layout ti CSS Grid . — Daytoy ket maysa nga obra a mapaspasamak, ken saan pay a nakasagana para iti panagusar ti produksion, ngem mabalinmo ti agpili iti baro a tampok babaen ti Sass. Tapno mapalubosan daytoy, balbaliwan ti default a grid, babaen ti panangisaad $enable-grid-classes: falseken pagbalinen ti CSS Grid babaen ti panangisaad $enable-cssgrid: true.

  • Na-update dagiti navbar tapno suportaran ti offcanvas. — Inayon dagiti offcanvas drawer iti ania man a navbar nga addaan kadagiti responsive .navbar-expand-*classes ken sumagmamano nga offcanvas markup.

  • Nainayon ti baro a paset ti placeholder . — Ti kabarbaro a pasetmi, maysa a wagas a mangipaay kadagiti temporario a bloke imbes a pudno a linaon tapno makatulong a mangipakita nga adda pay laeng maikarga iti site wenno app-mo.

  • Ti plugin ti collapse ket mangsuporta itan ti horisontal a collapse . — Inayon .collapse-horizontaliti your .collapsetapno mai-collapse ti widthimbes a ti height. Liklikan ti panagpinta manen ti browser babaen ti panangisaad iti min-heightwenno height.

  • Nainayon dagiti baro a katulongan ti stack ken bertikal a pagannurotan. — Napardas nga iyaplikar dagiti adu a tagikua ti flexbox tapno napardas a mangpartuat kadagiti kostumbre a layout nga addaan kadagiti stack . Pilien manipud kadagiti horizontal ( .hstack) ken bertikal ( .vstack) a stack. Inayon dagiti bertikal a mangbingbingay a kapada dagiti <hr>elemento nga addaan kadagiti baro a .vrkatulongan .

  • Nainayon dagiti baro a sangalubongan a :rootCSS a variable. — Nainayon ti sumagmamano a baro a variable ti CSS iti :rootlebel para iti panangtengngel kadagiti <body>estilo. Ad-adu pay ti adda kadagiti obra, a mairaman iti ballasiw dagiti utilidad ken pasetmi, ngem iti agdama basaen dagiti variable ti CSS iti benneg ti Panagpasayaat .

  • Nabaliwan dagiti utilidad ti kolor ken likudan tapno agusar kadagiti variable ti CSS, ken nainayon dagiti baro a utilidad ti teksto nga opacity ken background opacity . — .text-* ken .bg-*dagiti utilidad ket naibangon itan kadagiti CSS a variable ken rgba()dagiti pateg ti kolor, a mangipalubos kenka a nalaka a mangpasayaat ti ania man a utilidad nga addaan kadagiti baro a utilidad ti opacity.

  • Nainayon dagiti baro a pagarigan ti snippet a naibatay tapno maipakita no kasano nga i-customize dagiti pasettayo. — Guyoden a nakasagana nga agusar kadagiti napasadaan a paset ken dadduma pay a gagangay a padron ti disenio babaen kadagiti baro a pagarigantayo a Snippets . Iramanna dagiti footer , dropdown , grupo ti listaan ​​, ken modal .

  • Naikkat dagiti saan a nausar nga estilo ti panagposision manipud kadagiti popovers ken tooltips ta dagitoy ket ti laeng Popper ti mangasikaso. $tooltip-marginket naikkaten ken naikabil nulliti proseso.

Kayatmo kadi ti ad-adu pay nga impormasion? Basaen ti v5.1.0 a blog post.

Uy sadiay! Dagiti panagbalbaliw iti umuna a kangrunaan a pannakairuarmi ti Bootstrap 5, v5.0.0, ket nadokumento iti baba. Saanda nga iyanninaw dagiti kanayonan a panagbalbaliw a naipakita iti ngato.

Dagiti panagpannuray

  • Naibaba ti jQuery.
  • Na-upgrade manipud iti Popper v1.x agingga iti Popper v2.x.
  • Sinukatan ti Libsass iti Dart Sass a kas ti Sass a kompilertayo a naited ti Libsass ket naikkaten.
  • Immakar manipud Jekyll agingga iti Hugo gapu iti panangibangon iti dokumentasionmi

Suporta ti browser

  • Naibaba ti Internet Explorer 10 ken 11
  • Naibaba ti Microsoft Edge < 16 (Legacy nga Edge) .
  • Naibaba ti Firefox < 60
  • Naibaba nga Safari < 12
  • Naibaba ti iOS Safari < 12
  • Naibaba nga Chrome < 60

Agbalbaliw ti dokumentasion

  • Nadisenio manen ti homepage, layout ti docs, ken footer.
  • Nainayon ti baro a giya ti Parsela .
  • Nainayon ti baro a benneg ti Panagpasayaat , a mangsukat ti panid ti Tema ti v4 , kadagiti baro a detalye iti Sass, dagiti sangalubongan a pagpilian ti panagisaad, dagiti eskema ti kolor, dagiti variable ti CSS, ken dadduma pay.
  • Inurnos manen amin a dokumentasion ti porma iti baro a benneg ti Pormas , a mangbingay ti linaon kadagiti ad-adu a naipamaysa a panid.
  • Kasta met, na-update ti benneg ti Layout , tapno nalawag ti linaon ti grid.
  • Nabaliwan ti nagan ti panid ti paset ti “Navs” iti “Navs & Tabs”.
  • Nabaliwan ti nagan ti panid a “Checks” iti “Checks & radios”.
  • Dinisenio manen ti navbar ken nainayon ti baro a subnav tapno nalaklaka ti aglikmut kadagiti site ken bersion ti docs-tayo.
  • Nainayon ti baro a ab-ababa a teklado para iti tay-ak ti panagbiruk: Ctrl + /.

Sass nga

  • Inikkatmi dagiti default a panagtipon ti mapa ti Sass tapno nalaklaka ti panangikkat kadagiti redundante a pateg. Laglagipem a masapul itan nga ikeddengmo amin a pateg kadagiti mapa ti Sass a kas ti $theme-colors. Kitaen no kasano a tamingen dagiti mapa ti Sass .

  • PanagburakNabaliwan ti nagan color-yiq()ti function ken dagiti mainaig a variable iti color-contrast()kas saanen a mainaig iti YIQ color space. Kitaen ti #30168.

    • $yiq-contrasted-thresholdket napanaganan manen iti $min-contrast-ratio.
    • $yiq-text-darkken $yiq-text-lightagsasaruno a napanaganan iti $color-contrast-darkken $color-contrast-light.

  • PanagburakDagiti parametro ti mixins ti panagsaludsod ti media ket nagbalbaliw para iti ad-adu a lohikal a pamay-an.

    • media-breakpoint-down()agus-usar ti breakpoint a mismo imbes a ti sumaganad a breakpoint (kas pagarigan, media-breakpoint-down(lg)imbes a dagiti media-breakpoint-down(md)target a viewport a basbassit ngem lg).
    • Kasta met, ti maikadua a parametro iti media-breakpoint-between()ket agus-usar pay ti puntos ti panagburak a mismo imbes a ti sumaganad a puntos ti panagburak (kas pagarigan, media-between(sm, lg)imbes a dagiti media-breakpoint-between(sm, md)puntiria a panagkita iti nagbaetan ti smken lg).

  • PanagburakNaikkat dagiti estilo ti panagimaldit ken $enable-print-stylesvariable. Adda pay laeng dagiti klase ti display ti panagimprenta iti aglawlaw. Kitaen ti #28339 .

  • PanagburakNaibaba color()ti , theme-color(), ken gray()dagiti panagandar a pabor kadagiti variable. Kitaen ti #29083 .

  • PanagburakNabaliwan ti nagan theme-color-level()ti function iti color-level()ken ita ket umawat ti ania man a kolor a kayatmo imbes a dagiti laeng $theme-colorkolor. Kitaen ti #29083 Agannad: color-level() ket naibaba idi agangay v5.0.0-alpha3.

  • PanagburakNabaliwan ti naganna $enable-prefers-reduced-motion-media-queryken $enable-pointer-cursor-for-buttonsiti $enable-reduced-motionken $enable-button-pointerspara iti ababa.

  • PanagburakInikkat ti bg-gradient-variant()mixin. Usaren ti .bg-gradientklase tapno manginayon kadagiti gradient kadagiti elemento imbes a dagiti napataud a .bg-gradient-*klase.

  • Panagburak Naikkat dagiti dati a saanen a maus-usar a mixin:

    • hover, hover-focus, plain-hover-focus, kenhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(naibaba met ti nainaig a klase ti utilidad, .text-hide) .
    • visibility()
    • form-control-focus()

  • PanagburakNabaliwan ti nagan scale-color()ti function to shift-color()tapno maliklikan ti panagdinnungpar iti bukod a panagandar ti panag-scale ti kolor ti Sass.

  • box-shadowdagiti mixins ket mangipalubos itan kadagiti nullpateg ken bumaba nonemanipud kadagiti adu nga argumento. Kitaen ti #30394 .

  • Ti border-radius()mixin ket addaan itan iti default a pateg.

Sistema ti kolor

  • Ti sistema ti kolor a nagtrabaho color-level()ken $theme-color-intervalnaikkat a pabor iti baro a sistema ti kolor. Amin lighten()ken darken()dagiti function iti codebase tayo ket nasukatan babaen ti tint-color()ken shade-color(). Dagitoy a panagandar ket paglaokento ti kolor iti puraw wenno nangisit imbes a baliwanda ti kinalag-anna iti naikeddeng a kaadu. Ti shift-color()ket mangtintin wenno manglinong ti maysa a kolor depende no ti parametro ti dagsenna ket positibo wenno negatibo. Kitaen ti #30622 para iti ad-adu pay a detalye.

  • Nainayon dagiti baro a tint ken shade para iti tunggal maysa a kolor, a mangipaay kadagiti siam a nagsisina a kolor para iti tunggal maysa a batayan a kolor, a kas dagiti baro a variable ti Sass.

  • Napasayaat ti panagduduma ti kolor. Nabumped color contrast ratio manipud 3:1 agingga iti 4.5:1 ken na-update nga asul, berde, cyan, ken rosas a kolor tapno masigurado ti WCAG 2.1 AA contrast. Binaliwan met ti kolor ti panagduma ti kolormi manipud $gray-900iti $black.

  • Tapno masuportaran ti sistema ti kolormi, nanginayonkami kadagiti baro a kostumbre tint-color()ken shade-color()function tapno maitutop a paglaoken dagiti kolormi.

Dagiti panagpabaro ti grid

  • Baro a breakpoint! Nainayon ti baro a xxlbreakpoint para 1400pxken agpangato. Awan ti panagbalbaliw kadagiti amin a dadduma pay a breakpoint.

  • Napasayaat dagiti kanal. Dagiti kanal ket naikabil itan kadagiti rems, ken akikid ngem ti v4 ( 1.5rem, wenno agarup 24pxa , nga agpababa manipud 30px). Daytoy ti mangitunos kadagiti gutter ti grid system-tayo kadagiti spacing utilities-tayo.

    • Nainayon ti baro a klase ti kanal ( .g-*, .gx-*, ken .gy-*) tapno makontrol dagiti horizontal/vertical a kanal, horizontal a kanal, ken bertikal a kanal.
    • PanagburakNabaliwan .no-guttersti naganna tapno .g-0maitunos kadagiti baro a gutter utilities.

  • Saanen a position: relativenagaplikar dagiti kolum, isu a mabalin a masapul nga inayonmo .position-relativeti sumagmamano nga elemento tapno maisubli dayta a kababalin.

  • PanagburakInbaba ti sumagmamano .order-*a klase a masansan a di nausar. Ipaaymi itan laeng .order-1ti .order-5out of the box.

  • PanagburakNaibaba ti .mediacomponent ta nalaka a matulad babaen kadagiti utilities. Kitaen ti #28265 ken ti panid ti flex utilities para iti pagarigan .

  • Panagburak bootstrap-grid.cssita ket agaplikar laeng box-sizing: border-boxiti kolum imbes nga i-reset ti sangalubongan a panagdakkel ti kahon. Iti daytoy a wagas, dagiti estilotayo a grid ket mabalin nga usaren iti ad-adu a lugar nga awan ti pannakasinga.

  • $enable-grid-classessaanen a mangbaldado ti pannakapataud dagiti klase ti pagkargaan. Kitaen ti #29146.

  • Napabaro ti make-colmixin iti default kadagiti agpapada a kolum nga awan ti naikeddeng a kadakkel.

Linaon, Reboot, kdpy

  • Ti RFS ket napalubosan itan babaen ti default. Dagiti paulo nga agus-usar tifont-size()mixin ket automatiko nga ilintegda tifont-sizeto scale-da babaen ti viewport. Daytoy a tampok ket dati nga opt-in iti v4.

  • PanagburakIn-overhaul ti display typography mi tapno masukatan dagiti $display-*variable mi ken iti $display-font-sizesmapa ti Sass. Inikkat pay dagiti indibidual $display-*-weighta variable para iti maymaysa $display-font-weightken nabaliwan font-sizenga s.

  • Nainayon ti dua a baro .display-*a kadakkel ti paulo, .display-5ken .display-6.

  • Dagiti silpo ket naidarit babaen ti default (saan laeng nga iti hover), malaksid no dagitoy ket paset dagiti espesipiko a paset.

  • Nadisenio manen dagiti lamisaan tapno mapabaro dagiti estiloda ken mangbangon manen kadagitoy babaen dagiti variable ti CSS para iti ad-adu a panangtengngel iti estilo.

  • PanagburakDagiti naisanglad a lamisaan ket saanen a tawiden dagiti estilo.

  • Panagburak .thead-lightken .thead-darkmaibaba a pabor kadagiti .table-*klase ti variante a mabalin nga usaren para kadagiti amin nga elemento ti lamisaan ( thead, tbody, tfoot, tr, thken td).

  • PanagburakTi table-row-variant()mixin ket napanaganan manen iti table-variant()ken umawat laeng ti 2 a parametro: $color(nagan ti kolor) ken $value(kodigo ti kolor). Ti kolor ti beddeng ken dagiti kolor ti aksento ket automatiko a mabilang a naibatay kadagiti variable ti banag ti lamisaan.

  • Biningay dagiti variable ti padding ti selula ti lamisaan iti -yken -x.

  • PanagburakNaibaba .pre-scrollableti klase. Kitaen ti #29135

  • Panagburak .text-*dagiti utilidad ket saanen a manginayon kadagiti estado ti hover ken pokus kadagiti silpo. .link-*mabalin ketdi nga usaren dagiti klase ti katulongan. Kitaen ti #29267

  • PanagburakNaibaba .text-justifyti klase. Kitaen ti #29793

  • Panagburak <hr>dagiti elemento ket agus-usar itan heightimbes a bordertapno nasaysayaat a suportaran ti sizeattribute. Daytoy ket mangpabalin pay ti panagusar kadagiti utilidad ti padding tapno mangpartuat kadagiti napuspuskol a mangbingbingay (kas pagarigan, <hr class="py-1">).

  • I-reset ti default a horizontal padding-lefton <ul>ken <ol>dagiti elemento manipud iti default ti browser 40pxiti 2rem.

  • Nainayon $enable-smooth-scroll, nga agaplikar scroll-behavior: smoothiti sangalubongan—malaksid kadagiti agar-aramat a dumawdawat iti naikkat a panaggunay babaen prefers-reduced-motionti panagsaludsod ti media. Kitaen ti #31877

RTL nga

  • Dagiti horizontal a direksion nga espesipiko a variable, dagiti utilidad, ken dagiti mixin ket nabaliwan amin ti naganna tapno agusar kadagiti lohikal a tagikua a kas dagitoy a masarakan kadagiti layout ti flexbox—kas pagarigan, startken endkasukat ti leftken right.

Dagiti Pormas

  • Nainayon dagiti baro nga agtaytayab a porma! Intandudomi ti pagarigan dagiti Floating labels kadagiti naan-anay a nasuportaran a paset ti porma. Kitaen ti baro a panid dagiti Agtaytayab nga etiketa.

  • Panagburak Napagtitipon dagiti katutubo ken kostumbre nga elemento ti porma. Dagiti kahon ti tsek, radio, selects, ken dagiti dadduma pay nga input nga addaan kadagiti katutubo ken kostumbre a klase iti v4 ket napagtitipon. Ita dandani amin nga elemento ti pormatayo ket interamente a kostumbre, kaaduan ket awan ti kasapulan ti kostumbre nga HTML.

    • .custom-control.custom-checkboxket ita .form-check.
    • .custom-control.custom-custom-radioket ita .form-check.
    • .custom-control.custom-switchket ita .form-check.form-switch.
    • .custom-selectket ita .form-select.
    • .custom-fileken .form-filenasukatan kadagiti kostumbre nga estilo iti rabaw ti .form-control.
    • .custom-rangeket ita .form-range.
    • Natinnag a katutubo .form-control-fileken .form-control-range.

  • PanagburakNatinnag .input-group-appendken .input-group-prepend. Mabalinmo itan ti basta mangnayon kadagiti buton ken .input-group-textkas direkta nga annak dagiti grupo ti panagserrek.

  • Ti nabayagen a Napukaw a radius ti beddeng iti grupo ti input nga addaan iti bug ti feedback ti panangipaneknek ket kamaudiananna a natarimaan babaen ti pananginayon ti kanayonan .has-validationa klase kadagiti grupo ti panagserrek nga addaan iti panangipaneknek.

  • Panagburak Naibaba dagiti klase ti layout nga espesipiko iti porma para iti sistema ti grid-mi. Usaren ti grid ken utilities-tayo imbes a .form-group, .form-row, wenno .form-inline.

  • PanagburakDagiti etiketa ti porma kasapulan itan ti .form-label.

  • Panagburak .form-textsaanen a mangikeddeng display, a mangipalubos kenka a mangpartuat ti inline wenno manglapped a teksto ti tulong a kas ti kayatmo babaen laeng ti panagbalbaliw ti elemento ti HTML.

  • Dagiti kontrol ti porma ket saanen a maus-usar a naipatakder heightno mabalin, imbes ketdi ket mangitantan iti min-heighttapno mapasayaat ti panagpasayaat ken panagtunos kadagiti sabali a paset.

  • Dagiti ikono ti panangipaneknek ket saanen a maipakat iti <select>s nga addaan iti multiple.

  • Naurnos manen dagiti taudan a Sass a papeles iti baba ti scss/forms/, a mairaman dagiti estilo ti grupo ti panagserrek.

Dagiti paset

  • Dagiti napagkaykaysa paddinga pateg para kadagiti alerto, breadcrumbs, kard, dropdown, grupo ti listaan, modal, popovers, ken toltips tapno maibatay iti $spacervariabletayo. Kitaen ti #30564 .

Accordion nga

Dagiti Alerto

  • Dagiti alerto ket addaan itan kadagiti pagarigan nga addaan kadagiti ikono .

  • Naikkat dagiti kostumbre nga estilo para kadagiti <hr>s iti tunggal maysa nga alerto manipud idi agus-usardan iti currentColor.

Dagiti Badge

  • PanagburakNaibaba amin .badge-*a klase ti kolor para kadagiti utilidad ti likudan (kas pagarigan, usaren .bg-primaryimbes a ti .badge-primary).

  • PanagburakNaibaba .badge-pill—usaren .rounded-pillketdi ti utility.

  • PanagburakNaikkat dagiti estilo ti hover ken focus para <a>ken <button>dagiti elemento.

  • Naingato ti default a padding para kadagiti badge manipud iti .25em/ .5emaginggana iti .35em/ .65em.

  • Pinasimplena ti default a langa dagiti breadcrumbs babaen ti panangikkat iti padding, background-color, ken border-radius.

  • Nainayon ti baro a tagikua ti kostumbre ti CSS --bs-breadcrumb-dividerpara iti nalaka a panagpasayaat a saan a kasapulan ti panagtipon manen ti CSS.

Dagiti Buton

  • Panagburak Dagiti buton ti panagbalbaliw , nga addaan kadagiti kahon ti tsek wenno radio, ket saanen a kasapulan ti JavaScript ken addaan iti baro a marka. Saanmi a kasapulan ti elemento ti panagbalkot, inayon.btn-checkiti<input>, ken iparis daytoy iti ania man a.btnklase iti<label>. Kitaen ti #30650 . Dagiti docs para iti daytoy ket immakar manipud iti panidmi a Butones iti baro a benneg ti Pormas.

  • Panagburak Naibaba .btn-blockpara kadagiti utilities. Imbes nga usarem .btn-blockiti .btn, balutem dagiti butonmo iti .d-gridken maysa a .gap-*utilidad a mangikabil kadagitoy no kasapulan. Agsublika kadagiti makasungbat a klase para iti ad-adu pay a panangkontrol kadagita. Basaen dagiti docs para iti sumagmamano a pagarigan.

  • Na-update ti our button-variant()ken button-outline-variant()mixins tapno suportaran dagiti kanayonan a parametro.

  • Na-update dagiti buton tapno masigurado ti ad-adu a panagdumaduma kadagiti hover ken aktibo nga estado.

  • Dagiti baldado a buton ket addaan itan iti pointer-events: none;.

Kard nga

  • PanagburakNagtinnag .card-decka pabor iti grid-mi. Balkoten dagiti kardmo kadagiti klase ti kolum ken manginayon ti nagannak a .row-cols-*pagkargaan tapno mangpartuat manen kadagiti deck ti kard (ngem addaan iti ad-adu a panangtengngel iti makasungbat a panagtunos).

  • PanagburakNababa .card-columnsa pabor iti Masonry. Kitaen ti #28922 .

  • PanagburakSinukatan ti .cardbased accordion iti baro nga Accordion component .

  • Nainayon ti baro .carousel-darka variante para kadagiti nasipnget a teksto, dagiti kontrol, ken dagiti mangipakita (nasayaat para kadagiti nalaglag-an a likudan).

  • Nasukatan dagiti ikono ti chevron para kadagiti kontrol ti carousel kadagiti baro nga SVG manipud kadagiti Ikono ti Bootstrap .

Serraan ti buton

  • PanagburakNabaliwan .closeti .btn-closenaganna para iti saan unay a generic a nagan.

  • Dagiti buton ti iserram ket agus-usar itan ti background-image(naikabil nga SVG) imbes a ti &times;iti HTML, a mangipalubos ti nalaklaka a panagpasayaat nga awan ti kasapulan a mangsagid ti markaam.

  • Nainayon ti baro .btn-close-whitea variante nga agus -usar filter: invert(1)tapno mapalubosan dagiti nangatngato a panagdumaduma a panangilaksid nga ikono kadagiti nasipnget a likudan.

Marpuog

  • Naikkat ti scroll anchoring para kadagiti accordion.

  • Nainayon ti baro .dropdown-menu-darka variante ken dagiti nainaig a variable para kadagiti on-demand a nasipnget a dropdown.

  • Nainayon ti baro a variable para iti $dropdown-padding-x.

  • Nasipnget ti dropdown divider para iti nasaysayaat a contrast.

  • PanagburakAmin dagiti pasamak para iti dropdown ket maitrigger itan iti dropdown toggle button ken kalpasanna ket nabubble aginggana ti nagannak nga elemento.

  • Dagiti dropdown a menu ket addaan itan ti data-bs-popper="static"naikeddeng nga attribute no ti panagposision ti dropdown ket estatiko, wenno ti dropdown ket adda iti navbar. Daytoy ket nainayon babaen ti JavaScriptmi ken tumulong kadakami nga agusar kadagiti kostumbre nga estilo ti posision a saan a mangsinga iti panagposision ti Popper.

  • PanagburakNaibaba flipti pagpilian para iti dropdown plugin a pabor iti katutubo a panagisaad ti Popper. Mabalinmo itan a balbaliwan ti kababalin ti panag-flip babaen ti panangipasa ti empty array para iti fallbackPlacementspagpilian iti flip modifier.

  • Dagiti dropdown a menu ket mabalin itan a mai-klik nga addaan ti baro a autoClosepagpilian a mangasikaso ti auto close a kababalin . Mabalinmo nga usaren daytoy a pagpilian tapno awatem ti panagpidut iti uneg wenno ruar ti dropdown menu tapno agbalin nga interaktibo.

  • Dagiti dropdown ket mangsuporta itan kadagiti .dropdown-items a nabalkot iti <li>s.

Jumbotron nga

Ilista ti grupo

  • Nainayon dagiti baro nulla variable para iti font-size, font-weight, color, ken :hover coloriti .nav-linkklase.
  • PanagburakDagiti navbar ket agkasapulan itan ti maysa a pagkargaan iti uneg (tapno dakkel a mapasimple dagiti kasapulan ti panagsisina ken ti CSS a kasapulan).
  • PanagburakSaanen .activea mabalin nga iyaplikar ti klase iti .nav-items, masapul a direkta a mayaplikar dayta iti .nav-links.

Offcanvas nga

Panagpagina

  • Dagiti silpo ti pagination ket addaan itan kadagiti ma-customize margin-lefta dinamiko a nagtimbukel kadagiti amin a suli no maisina iti maysa ken maysa.

  • Nainayon transitionti s kadagiti silpo ti pagination.

Dagiti Popovers

  • PanagburakNabaliwan .arrowti naganna .popover-arrowiti default a plantilia ti popover-mi.

  • Nabaliwan ti nagan whiteListti pagpilian iti allowList.

Dagiti ag-spinner

  • Padayawan itan dagiti spinner prefers-reduced-motion: reducebabaen ti panangpabannayatda kadagiti animation. Kitaen ti #31882 .

  • Napasayaat ti bertikal a panagtunos ti spinner.

Dagiti tosta

  • Mabalin itan a maiposision dagiti toast iti maysa .toast-containerbabaen ti tulong dagiti utilidad a mangiposision .

  • Nabaliwan ti default a kapaut ti toast iti 5 a segundo.

  • Naikkat overflow: hiddenkadagiti toast ken nasukatan iti umno nga border-radiuss nga addaan kadagiti calc()function.

Dagiti tip ti remienta

  • PanagburakNabaliwan .arrowti naganna .tooltip-arrowiti default a plantilia ti tooltipmi.

  • PanagburakTi kasisigud a pateg para iti fallbackPlacementsket nabaliwan iti ['top', 'right', 'bottom', 'left']para iti nasaysayaat a pannakaikabil dagiti elemento ti popper.

  • PanagburakNabaliwan ti nagan whiteListti pagpilian iti allowList.

Dagiti Utilities

  • PanagburakNabaliwan ti nagan dagiti sumagmamano a utilidad tapno agusar kadagiti lohikal a nagan ti tagikua imbes a dagiti nagan ti direksion nga addaan iti pannakainayon ti suporta ti RTL:

    • Nabaliwan ti naganna .left-*ken .right-*iti .start-*ken .end-*.
    • Nabaliwan ti naganna .float-leftken .float-rightiti .float-startken .float-end.
    • Nabaliwan ti naganna .border-leftken .border-rightiti .border-startken .border-end.
    • Nabaliwan ti naganna .rounded-leftken .rounded-rightiti .rounded-startken .rounded-end.
    • Nabaliwan ti naganna .ml-*ken .mr-*iti .ms-*ken .me-*.
    • Nabaliwan ti naganna .pl-*ken .pr-*iti .ps-*ken .pe-*.
    • Nabaliwan ti naganna .text-leftken .text-rightiti .text-startken .text-end.

  • PanagburakNabaldado dagiti negatibo a margin babaen ti default.

  • Nainayon ti baro a .bg-bodyklase para iti napardas a panangisaad ti <body>'s background kadagiti kanayonan nga elemento.

  • Nainayon dagiti baro a utilidad ti posision para iti top, right, bottom, ken left. Dagiti pateg ket mairaman ti 0, 50%, ken 100%para iti tunggal maysa a sanikua.

  • Nainayon dagiti baro .translate-middle-x& .translate-middle-yutilidad kadagiti horizontal wenno bertikal a sentro dagiti absoluto/natakder a naiposision nga elemento.

  • Nainayon dagiti baro a border-widthutilidad .

  • PanagburakNabaliwan ti naganna .text-monospaceiti .font-monospace.

  • PanagburakNaikkat .text-hideta daanen a pamay-an ti panangilemmeng iti teksto a saanen koma nga usaren.

  • Nainayon .fs-*dagiti utilidad para kadagiti font-sizeutilidad (nga addaan iti RFS a napalubosan). Dagitoy ket agus-usar ti isu met laeng a sukog a kas dagiti default a paulo ti HTML (1-6, dakkel aginggana ti bassit), ken mabalin a mabaliwan babaen ti mapa ti Sass.

  • PanagburakNabaliwan ti nagan .font-weight-*dagiti utilities kas .fw-*para iti kinaababa ken kinaurnos.

  • PanagburakNabaliwan ti nagan .font-style-*dagiti utilities kas .fst-*para iti kinaababa ken kinaurnos.

  • Nainayon .d-gridtapno maiparang dagiti utilidad ken baro a gaputilidad ( .gap) para kadagiti layout ti CSS Grid ken flexbox.

  • PanagburakNaikkat .rounded-smken rounded-lg, ken inyam-ammona ti baro a sukog dagiti klase, .rounded-0iti .rounded-3. Kitaen ti #31687 .

  • Nainayon dagiti baro a line-heightutilidad: .lh-1, .lh-sm, .lh-baseken .lh-lg. Kitaen ditoy .

  • Inyakar ti .d-noneutilidad iti CSS-mi tapno ad-adu ti dagsenna ngem kadagiti dadduma a utilidad ti display.

  • Pinaatiddog ​​ti .visually-hidden-focusablekatulongan tapno agtrabaho met kadagiti pagkargaan, nga agus-usar iti :focus-within.

Dagiti Katulongan

  • Panagburak Dagiti sumungsungbat nga embed helpers ket napanaganan manen kadagiti ratio helpers nga addaan kadagiti baro a nagan ti klase ken dagiti napasayaat a kababalin, ken kasta met ti makatulong a CSS a variable.

    • Nabaliwan ti nagan dagiti klase tapno agbaliw byitix iti aspect ratio. Kas pagarigan, .ratio-16by9ket ita .ratio-16x9.
    • Natinnagmi ti.embed-responsive-item ken element group selector a pabor iti nasimsimple a .ratio > *selector. Awan ti kasapulan pay a klase, ken ti katulongan ti ratio ket agtrabaho itan iti ania man nga elemento ti HTML.
    • Ti$embed-responsive-aspect-ratios mapa ti Sass ket napanaganan manen iti $aspect-ratiosken dagiti pategna ket napalaka tapno mairaman ti nagan ti klase ken ti porsiento a kas ti key: valueparis.
    • Dagiti variable ti CSS ket napataud itan ken nairaman para iti tunggal maysa a pateg iti mapa ti Sass. Baliwan ti --bs-aspect-ratiovariable iti .ratiotapno mangpartuat ti ania man a kostumbre nga aspeto a ratio .

  • Panagburak Dagiti klase a “Screen reader” ket klase itan a “makita a nailemmeng” .

    • Binaliwan ti Sass file manipud scss/helpers/_screenreaders.scssitiscss/helpers/_visually-hidden.scss
    • Nabaliwan ti naganna .sr-onlyken .sr-only-focusableiti .visually-hiddenken.visually-hidden-focusable
    • Nabaliwan ti naganna sr-only()ken sr-only-focusable()mixins iti visually-hidden()ken visually-hidden-focusable().

  • bootstrap-utilities.cssita ket karaman met dagiti katulongantayo. Saanen a kasapulan a mai-import dagiti katulongan kadagiti kostumbre a panagbangon.

JavaScript nga Pagsasao

  • Inikkat ti panagpannuray ti jQuery ken insurat manen dagiti plugin tapno adda iti regular a JavaScript.

  • PanagburakDagiti attribute ti datos para kadagiti amin a plugin ti JavaScript ket nai-namespace itan tapno makatulong a mangilasin ti panagusar ti Bootstrap manipud kadagiti maikatlo a partido ken ti bukodmo a kodigo. Kas pagarigan, usarentayo data-bs-toggleimbes a data-toggle.

  • Amin a plugin ket mabalinda itan nga umawat ti maysa a mangpili ti CSS a kas ti umuna nga argumento. Mabalinmo nga ipasa ti elemento ti DOM wenno ania man a balido a managpili ti CSS tapno mangpartuat ti baro nga instansia ti plugin:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfigmabalin a maipasa a kas maysa a panagandar nga umawat ti kasisigud a Popper a panagisaad ti Bootstrap a kas maysa nga argumento, tapno mabalinmo a pagtitiponen daytoy a kasisigud a panagisaad iti wagasmo. Agaplikar kadagiti dropdown, popovers, ken tooltips.

  • Ti kasisigud a pateg para iti fallbackPlacementsket nabaliwan iti ['top', 'right', 'bottom', 'left']para iti nasaysayaat a pannakaikabil dagiti elemento ti Popper. Agaplikar kadagiti dropdown, popovers, ken tooltips.

  • Naikkat ti underscore manipud kadagiti publiko nga estatiko a pamay-an a kas ti _getInstance()→ getInstance().