Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
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

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 colorspace. 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

  • 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-checkket ita .form-check.
    • .custom-check.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 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).

  • PanagburakNaibaba .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"attribute a naikeddeng no ti panagposision ti dropdown ket estatiko ken data-bs-popper="none"no 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).

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 a katulongan ket napanaganan manen kadagiti katulongan ti ratio 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 byiti xiti aspect ratio. Kas pagarigan, .ratio-16by9ket ita .ratio-16x9.
    • Inbabami ti .embed-responsive-itemken 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-ratiosmapa 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:

    var modal = new bootstrap.Modal('#myModal')
var 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().