Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

Hloov mus rau v5

Taug qab thiab tshuaj xyuas cov kev hloov pauv rau Bootstrap cov ntaub ntawv, cov ntaub ntawv, thiab cov khoom siv los pab koj tsiv teb tsaws ntawm v4 rau v5.

Ntawm nplooj ntawv no

Kev vam meej

  • poob jQuery.
  • Hloov kho los ntawm Popper v1.x rau Popper v2.x.
  • Hloov Libsass nrog Dart Sass raws li peb Sass compiler muab Libsass raug tso tseg.
  • Taug kev los ntawm Jekyll mus rau Hugo los tsim peb cov ntaub ntawv

Kev them nyiaj yug browser

  • Tso Internet Explorer 10 thiab 11
  • Tshem tawm Microsoft Edge <16 (Legacy Edge)
  • Tshem tawm Firefox <60
  • Tso Safari <12
  • Tso iOS Safari <12
  • Poob Chrome <60

Cov ntaub ntawv hloov pauv

  • Rov tsim kho homepage, docs layout, thiab footer.
  • Ntxiv tshiab Parcel phau ntawv qhia .
  • Ntxiv Customize seem tshiab , hloov v4's Theming nplooj ntawv , nrog cov ntsiab lus tshiab ntawm Sass, kev xaiv thoob ntiaj teb kev teeb tsa, cov qauv xim, CSS hloov pauv, thiab ntau dua.
  • Reorganized tag nrho cov ntaub ntawv nyob rau hauv cov ntaub ntawv tshiab seem , sib cais cov ntsiab lus mus rau hauv ntau tsom cov nplooj ntawv.
  • Ib yam li ntawd, hloov kho qhov Layout seem , kom pom cov ntsiab lus ntawm daim phiaj kom meej meej.
  • Renamed "Navs" nplooj ntawv txuas mus rau "Navs & Tabs".
  • Renamed "Khoom" nplooj ntawv mus rau "Checks & xov tooj cua".
  • Redesigned lub navbar thiab ntxiv subnav tshiab kom nws yooj yim dua mus nyob ib ncig ntawm peb cov chaw thiab docs versions.
  • Ntxiv cov keyboard shortcut tshiab rau kev tshawb nrhiav teb: Ctrl + /.

Sass

  • Peb tau ditched lub neej ntawd Sass daim ntawv qhia kev sib koom ua ke kom nws yooj yim dua los tshem tawm qhov tsis txaus ntseeg. Nco ntsoov koj tam sim no yuav tsum tau txhais tag nrho cov txiaj ntsig hauv Sass maps zoo li $theme-colors. Saib seb yuav ua li cas nrog Sass maps .

  • tawgRenamed color-yiq()muaj nuj nqi thiab lwm yam hloov mus rau color-contrast()raws li nws tsis muaj feem xyuam rau YIQ colorspace. Saib #30168.

    • $yiq-contrasted-thresholdyog renamed $min-contrast-ratio.
    • $yiq-text-darkthiab $yiq-text-lightraug hloov npe mus rau $color-contrast-darkthiab $color-contrast-light.

  • tawgMedia query mixins parameters tau hloov pauv rau txoj hauv kev zoo dua.

    • media-breakpoint-down()siv lub breakpoint nws tus kheej es tsis txhob ntawm lub breakpoint tom ntej (xws li, media-breakpoint-down(lg)es tsis txhob ntawm media-breakpoint-down(md)lub hom phiaj viewports me dua lg).
    • Ib yam li ntawd, qhov thib ob parameter nyob rau hauv media-breakpoint-between()kuj siv lub breakpoint nws tus kheej es tsis txhob ntawm lub tom ntej no breakpoint (xws li, media-between(sm, lg)es tsis txhob ntawm media-breakpoint-between(sm, md)lub hom phiaj viewports ntawm smthiab lg).

  • tawgTshem tawm cov qauv luam tawm thiab $enable-print-stylessib txawv. Cov chav kawm luam tawm tseem nyob ib puag ncig. Saib #28339 .

  • tawgPoob color(), theme-color(), thiab gray()ua haujlwm hauv kev pom zoo ntawm cov hloov pauv. Saib #29083 .

  • tawgRenamed theme-color-level()muaj nuj nqi rau color-level()thiab tam sim no lees txais cov xim uas koj xav tau tsis yog $theme-colorxim xwb. Saib #29083 Saib: color-level() tom qab ntawd poob rau hauv v5.0.0-alpha3.

  • tawgRenamed $enable-prefers-reduced-motion-media-querythiab $enable-pointer-cursor-for-buttonsrau $enable-reduced-motionthiab $enable-button-pointersrau brevity.

  • tawgTshem tawm cov bg-gradient-variant()mixin. Siv cov .bg-gradientchav kawm ntxiv gradients rau cov ntsiab lus tsis yog cov .bg-gradient-*chav kawm tsim.

  • tawg Tshem tawm cov mixins yav dhau los deprecated:

    • hover, hover-focus, plain-hover-focus, thiabhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(tseem tso tseg cov chav kawm siv hluav taws xob cuam tshuam, .text-hide)
    • visibility()
    • form-control-focus()

  • tawgRenamed scale-color()muaj nuj nqi kom shift-color()tsis txhob muaj kev sib tsoo nrog Sass tus kheej xim scaling muaj nuj nqi.

  • box-shadowmixins tam sim no tso cai rau nullqhov tseem ceeb thiab poob nonelos ntawm ntau qhov kev sib cav. Seej #30394 .

  • Cov border-radius()mixin tam sim no muaj tus nqi qub.

Xim system

  • Cov xim system uas ua haujlwm nrog color-level()thiab $theme-color-intervalraug tshem tawm hauv kev pom zoo ntawm cov xim tshiab. Tag nrho lighten()thiab darken()ua haujlwm hauv peb cov codebase yog hloov los ntawm tint-color()thiab shade-color(). Cov haujlwm no yuav muab cov xim sib xyaw nrog cov xim dawb lossis xim dub es tsis txhob hloov nws lub teeb los ntawm tus nqi ruaj khov. Qhov shift-color()yuav tint los yog ntxoov ntxoo xim nyob ntawm seb nws qhov hnyav parameter yog qhov zoo lossis tsis zoo. Saib #30622 kom paub meej ntxiv.

  • Ntxiv cov tints tshiab thiab ntxoov ntxoo rau txhua xim, muab cuaj cais xim rau txhua lub hauv paus xim, raws li Sass hloov tshiab.

  • Txhim kho xim zoo sib xws. Bumped xim sib piv ntawm 3: 1 txog 4.5: 1 thiab hloov kho xiav, ntsuab, cyan, thiab liab xim kom ntseeg tau WCAG 2.1 AA qhov sib piv. Kuj hloov peb cov xim sib txawv xim los ntawm $gray-900mus rau $black.

  • Txhawm rau txhawb peb cov xim, peb tau ntxiv cov kev cai tshiab tint-color()thiab shade-color()kev ua haujlwm kom sib xyaw peb cov xim kom tsim nyog.

Daim phiaj tshiab

  • Tshiab breakpoint! Ntxiv tshiab xxlbreakpoint rau 1400pxthiab nce. Tsis muaj kev hloov pauv rau tag nrho lwm cov ntsiab lus.

  • Txhim kho gutters. Gutters tam sim no nyob rau hauv rems, thiab yog nqaim tshaj v4 ( 1.5rem, los yog hais txog 24px, nqis los ntawm 30px). Qhov no ua rau peb cov kab sib chaws gutters nrog peb cov khoom siv sib txawv.

    • Ntxiv cov gutter tshiab ( .g-*, .gx-*, thiab .gy-*) tswj kab rov tav / ntsug gutters, kab rov tav gutters, thiab ntsug gutters.
    • tawgRenamed .no-gutterskom .g-0phim cov khoom siv hluav taws xob tshiab.

  • Cov kab ntawv tsis tau position: relativesiv lawm, yog li koj yuav tau ntxiv .position-relativerau qee lub ntsiab lus los kho tus cwj pwm ntawd.

  • tawgTso ob peb .order-*chav kawm uas feem ntau mus tsis siv. Peb tam sim no tsuas yog muab .order-1rau .order-5tawm ntawm lub thawv.

  • tawgTso tseg cov .mediakhoom tivthaiv raws li nws tuaj yeem yooj yim replicated nrog cov khoom siv. Saib #28265 thiab nplooj ntawv flex Utilities piv txwv .

  • tawg bootstrap-grid.csstam sim no tsuas yog siv box-sizing: border-boxrau kem es tsis txhob rov pib dua lub thawv thoob ntiaj teb-qhov loj me. Li no, peb cov kab sib chaws tuaj yeem siv rau ntau qhov chaw yam tsis muaj kev cuam tshuam.

  • $enable-grid-classestsis txhob cuam tshuam cov tiam ntawm cov chav kawm ntim ntxiv lawm. Saib #29146.

  • Hloov kho cov make-colmixin rau lub neej ntawd kom sib npaug kab tsis muaj qhov loj me.

Cov ntsiab lus, Reboot, thiab lwm yam

  • RFS tam sim no tau qhib los ntawm lub neej ntawd. Headings siv covfont-size()mixin yuav cia li hloov lawvfont-sizemus rau scale nrog lub viewport. Cov yeeb yam no yav dhau los xaiv-hauv nrog v4.

  • tawgOverhauled peb cov duab typography los hloov peb cov kev $display-*hloov pauv thiab nrog $display-font-sizesSass daim ntawv qhia. Kuj tshem tawm cov kev $display-*-weighthloov pauv ib leeg rau ib leeg $display-font-weightthiab kho font-sizes.

  • Ntxiv ob lub .display-*ntsiab lus tshiab, .display-5thiab .display-6.

  • Cov kev sib txuas yog underlined los ntawm lub neej ntawd (tsis yog ntawm hover), tshwj tsis yog lawv yog ib feem ntawm cov khoom tshwj xeeb.

  • Rov tsim cov ntxhuav los hloov kho lawv cov qauv thiab rov tsim kho lawv nrog CSS hloov pauv kom tswj tau ntau dua styling.

  • tawgNested tables tsis tau txais cov qauv ntxiv lawm.

  • tawg .thead-lightthiab .thead-darkpoob rau hauv kev pom zoo ntawm cov .table-*chav kawm sib txawv uas tuaj yeem siv rau txhua lub ntsiab lus ( thead, tbody, tfoot, tr, ththiab td).

  • tawgCov table-row-variant()mixin yog renamed rau table-variant()thiab lees txais tsuas yog 2 tsis: $color(xim lub npe) thiab $value(xim code). Cov xim ciam teb thiab cov xim accent tau txiav txim siab raws li qhov sib txawv ntawm lub rooj.

  • Split table cell padding variables rau hauv -ythiab -x.

  • tawgpoob .pre-scrollablehoob kawm. Saib #29135

  • tawg .text-*kev siv hluav taws xob tsis ntxiv hover thiab tsom cov xeev rau kev txuas ntxiv lawm. .link-*Cov chav kawm pab siv tau. Saib #29267

  • tawgpoob .text-justifyhoob kawm. Saib #29793

  • tawg <hr>cov ntsiab lus tam sim no siv heightes tsis txhob bordertxhawb nqa tus sizecwj pwm zoo dua. Qhov no kuj ua rau kev siv cov khoom siv padding los tsim cov kev faib ua kom tuab dua (xws li, <hr class="py-1">).

  • Rov pib lub neej ntawd kab rov tav padding-leftntawm <ul>thiab <ol>cov ntsiab lus los ntawm browser default 40pxrau 2rem.

  • Ntxiv $enable-smooth-scroll, uas siv scroll-behavior: smooththoob ntiaj teb-tsuas yog cov neeg siv thov kom txo cov lus tsa suab los ntawm prefers-reduced-motionkev nug xov xwm. Saib #31877

RTL

  • Kab rov tav kev taw qhia tshwj xeeb sib txawv, cov khoom siv hluav taws xob, thiab cov mixins tau hloov npe los siv cov khoom muaj txiaj ntsig zoo li cov uas pom hauv flexbox layouts-piv txwv li, startthiab endnyob rau hauv lieu ntawm leftthiab right.

Cov ntawv

  • Ntxiv cov ntaub ntawv ntab tshiab! Peb tau txhawb nqa Floating labels piv txwv rau kev txhawb nqa daim ntawv. Saib nplooj ntawv Floating tshiab.

  • tawg Consolidated haiv neeg thiab kev cai daim ntawv cov ntsiab lus. Checkboxes, xov tooj cua, xaiv, thiab lwm yam inputs uas muaj haiv neeg thiab kev cai cov chav kawm nyob rau hauv v4 tau muab sau ua ke. Tam sim no ze li ntawm tag nrho peb cov ntsiab lus yog kev cai nkaus xwb, feem ntau tsis tas yuav muaj kev cai HTML.

    • .custom-checkyog tam sim no .form-check.
    • .custom-check.custom-switchyog tam sim no .form-check.form-switch.
    • .custom-selectyog tam sim no .form-select.
    • .custom-filethiab .form-filetau raug hloov los ntawm kev cai style nyob rau sab saum toj ntawm .form-control.
    • .custom-rangeyog tam sim no .form-range.
    • Poob haiv neeg .form-control-filethiab .form-control-range.

  • tawgUa tsaug .input-group-appendthiab .input-group-prepend. Tam sim no koj tuaj yeem cia li ntxiv cov nyees khawm thiab .input-group-textraws li cov menyuam yaus ncaj qha ntawm pawg tswv yim.

  • Lub vojvoog uas ploj lawm ntev ntawm ciam teb ntawm cov tswv yim pab pawg nrog cov lus qhia txog kev siv tau cov kab mob thaum kawg kho los ntawm kev ntxiv cov .has-validationchav kawm ntxiv rau cov pab pawg nrog kev siv tau.

  • tawg Tshem tawm cov chav kawm tshwj xeeb layout rau peb cov kab sib chaws. Siv peb daim phiaj thiab cov khoom siv hluav taws xob hloov .form-group, .form-row, lossis .form-inline.

  • tawgDaim ntawv lo tam sim no xav tau .form-label.

  • tawg .form-texttsis tau teeb tsa lawm display, tso cai rau koj los tsim inline lossis thaiv cov ntawv pab raws li koj xav tau los ntawm kev hloov cov ntsiab lus HTML.

  • Validation icons tsis siv rau <select>s nrog multiple.

  • Rearranged qhov chaw Sass cov ntaub ntawv hauv qab scss/forms/, suav nrog cov tswv yim pab pawg.

Cheebtsam

  • Cov txiaj ntsig sib koom paddingua ke rau kev ceeb toom, breadcrumbs, phaib, dropdowns, npe pawg, modals, popovers, thiab cov lus qhia kom ua raws li peb $spacerqhov sib txawv. Se #30564 .

Accordion

ceeb toom

  • Cov ntawv ceeb toom tam sim no muaj cov piv txwv nrog cov cim .

  • Tshem tawm cov qauv kev cai rau <hr>s hauv txhua qhov kev ceeb toom txij li lawv twb siv currentColorlawm.

Daim paib

  • tawgTso tseg tag nrho .badge-*cov chav kawm xim rau cov khoom siv tom qab (piv txwv li, siv .bg-primarytsis yog .badge-primary).

  • tawgPoob - siv .badge-pilllub .rounded-pilltshuab hluav taws xob hloov pauv.

  • tawgTshem tawm hover thiab tsom cov qauv rau <a>thiab <button>cov ntsiab lus.

  • Nce default padding rau cov paib ntawm .25em/ .5emrau .35em/ .65em.

  • Simplified lub neej ntawd tsos ntawm breadcrumbs los ntawm kev tshem tawm padding, background-color, thiab border-radius.

  • Ntxiv CSS cov cuab yeej kev cai tshiab --bs-breadcrumb-dividerrau kev kho kom yooj yim yam tsis tas yuav rov ua dua CSS.

Khawm

  • tawg Toggle nyees khawm , nrog lub checkboxes lossis xov tooj cua, tsis tas yuav tsum muaj JavaScript thiab muaj cov cim tshiab. Peb tsis tas yuav muaj cov khoom qhwv, ntxiv.btn-checkrau qhov<input>, thiab ua ke nrog cov.btnchav kawm ntawm<label>. Saib #30650 . Cov ntaub ntawv rau qhov no tau txav los ntawm peb nplooj nyees khawm mus rau ntu Cov Ntawv tshiab.

  • tawg Poob .btn-blockrau kev siv hluav taws xob. Es tsis txhob siv .btn-blockntawm lub .btn, qhwv koj cov nyees khawm nrog .d-gridthiab cov .gap-*khoom siv rau qhov chaw lawv raws li xav tau. Hloov mus rau cov chav kawm teb kom tswj tau lawv ntau dua. Nyeem cov ntaub ntawv rau qee qhov piv txwv.

  • Hloov kho peb button-variant()thiab button-outline-variant()mixins los txhawb cov kev txwv ntxiv.

  • Hloov kho cov nyees khawm kom ntseeg tau tias muaj qhov sib txawv ntxiv ntawm hover thiab lub xeev nquag.

  • Cov khawm xiam oob qhab tam sim no muaj pointer-events: none;.

Daim npav

  • tawgPoob .card-deckrau hauv kev txaus siab ntawm peb daim phiaj. Qhwv koj daim npav rau hauv cov chav kawm kab thiab ntxiv ib lub .row-cols-*thawv rau niam txiv los tsim daim npav daim npav (tab sis muaj kev tswj xyuas ntau dua los ntawm kev sib dhos).

  • tawgTso .card-columnsrau hauv kev pom zoo ntawm Masonry. Saib #28922 .

  • tawgHloov lub .cardaccordion raws li ib tug tshiab Accordion tivthaiv .

  • Ntxiv cov kev .carousel-darkhloov tshiab rau cov ntawv tsaus, tswj, thiab ntsuas (zoo rau cov keeb kwm sib dua).

  • Hloov chevron icons rau carousel tswj nrog SVGs tshiab los ntawm Bootstrap Icons .

Kaw khawm

  • tawgRenamed .closemus .btn-closerau ib tug tsawg generic lub npe.

  • Kaw cov nyees khawm tam sim no siv ib qho background-image(embedded SVG) es tsis yog ib qho &times;hauv HTML, tso cai rau kev kho kom yooj yim dua yam tsis tas yuav kov koj cov cim.

  • Ntxiv cov kev .btn-close-whitehloov tshiab uas siv filter: invert(1)los ua kom muaj qhov sib txawv siab dua tso tawm cov cim tawm tsam keeb kwm yav dhau los.

Kaw

  • Tshem tawm scroll anchoring rau accordions.

  • Ntxiv cov .dropdown-menu-darkhloov tshiab tshiab thiab cov hloov pauv uas cuam tshuam rau ntawm qhov xav tau tsaus nti dropdowns.

  • Ntxiv tshiab variable rau $dropdown-padding-x.

  • Darkened lub dropdown divider rau kev zoo sib xws.

  • tawgTag nrho cov txheej xwm rau lub dropdown yog tam sim no tshwm sim ntawm lub dropdown toggle khawm thiab ces bubbled mus rau lub niam txiv lub caij.

  • Dropdown menus tam sim no muaj tus data-bs-popper="static"cwj pwm teeb tsa thaum qhov chaw ntawm lub dropdown zoo li qub thiab data-bs-popper="none"thaum dropdown nyob hauv navbar. Qhov no tau ntxiv los ntawm peb cov JavaScript thiab pab peb siv txoj haujlwm kev cai yam tsis muaj kev cuam tshuam nrog Popper qhov chaw.

  • tawgPoob flipkev xaiv rau dropdown plugin nyob rau hauv txaus siab ntawm haiv neeg Popper configuration. Tam sim no koj tuaj yeem lov tes taw tus cwj pwm flipping los ntawm kev dhau qhov khoob khoob rau fallbackPlacementskev xaiv hauv flip modifier.

  • Dropdown menus tam sim no tuaj yeem nyem tau nrog qhov kev autoClosexaiv tshiab los tswj tus cwj pwm kaw nws pib . Koj tuaj yeem siv qhov kev xaiv no los lees txais qhov nyem sab hauv lossis sab nraud cov ntawv qhia zaub mov kom nws sib tham sib.

  • Dropdowns tam sim no txhawb .dropdown-items qhwv hauv <li>s.

Jumbotron

Sau npe pawg

  • Ntxiv cov nullhloov pauv tshiab rau font-size, font-weight, color, thiab :hover colorrau .nav-linkchav kawm.
  • tawgNavbars tam sim no xav tau lub thawv nyob rau hauv (kom yooj yim kom yooj yim sib nrug thiab CSS xav tau).

Offcanvas

Pagination

  • Pagination txuas tam sim no muaj customizable margin-leftuas yog dynamically sib npaug ntawm txhua lub ces kaum thaum sib cais los ntawm ib leeg.

  • Ntxiv transitions rau pagination txuas.

Popovers

  • tawgRenamed .arrowrau .popover-arrowhauv peb lub default popover template.

  • Renamed whiteListkev xaiv rau allowList.

Spinners

  • Spinners tam sim no hwm prefers-reduced-motion: reducelos ntawm qeeb cov animations. Saib #31882 .

  • Txhim kho spinner ntsug alignment.

Toasts

  • Cov toasts tam sim no tuaj yeem muab tso rau hauv ib qho .toast-containernrog kev pab los ntawm qhov chaw siv hluav taws xob .

  • Hloov lub sijhawm toast rau 5 vib nas this.

  • Tshem tawm overflow: hiddenntawm toasts thiab hloov nrog border-radiuss kom zoo nrog calc()kev ua haujlwm.

Cov lus qhia

  • tawgRenamed .arrowmus rau .tooltip-arrowhauv peb lub neej ntawd tooltip template.

  • tawgLub neej ntawd tus nqi rau qhov fallbackPlacementsyog hloov mus ['top', 'right', 'bottom', 'left']rau qhov kev tso kawm zoo dua ntawm cov ntsiab lus popper.

  • tawgRenamed whiteListkev xaiv rau allowList.

Cov khoom siv

  • tawgHloov npe ntau yam khoom siv los siv cov cuab yeej cuab tam lub npe es tsis txhob siv cov npe qhia nrog ntxiv ntawm RTL kev txhawb nqa:

    • Renamed .left-*thiab .right-*mus .start-*thiab .end-*.
    • Renamed .float-leftthiab .float-rightmus .float-startthiab .float-end.
    • Renamed .border-leftthiab .border-rightmus .border-startthiab .border-end.
    • Renamed .rounded-leftthiab .rounded-rightmus .rounded-startthiab .rounded-end.
    • Renamed .ml-*thiab .mr-*mus .ms-*thiab .me-*.
    • Renamed .pl-*thiab .pr-*mus .ps-*thiab .pe-*.
    • Renamed .text-leftthiab .text-rightmus .text-startthiab .text-end.

  • tawgDisabled negative margins los ntawm lub neej ntawd.

  • Ntxiv .bg-bodychav kawm tshiab kom sai teeb lub <body>keeb kwm yav dhau rau cov ntsiab lus ntxiv.

  • Ntxiv cov khoom siv hluav taws xob tshiab rau top, right, bottom, thiab left. Cov nqi suav nrog 0, 50%, thiab 100%rau txhua yam khoom.

  • Ntxiv tshiab .translate-middle-x& .translate-middle-ykev siv hluav taws xob rau kab rov tav lossis vertically centre absolute / fixed positioned ntsiab.

  • Ntxiv cov border-widthkhoom siv tshiab .

  • tawgRenamed .text-monospacerau .font-monospace.

  • tawgTshem tawm .text-hidevim nws yog ib txoj hauv kev qub rau kev zais cov ntawv uas yuav tsum tsis txhob siv ntxiv lawm.

  • Ntxiv .fs-*cov nqi hluav taws xob rau kev font-sizesiv hluav taws xob (nrog RFS enabled). Cov no siv tib qhov teev raws li HTML lub ntsiab lus tseem ceeb (1-6, loj rau me), thiab tuaj yeem hloov kho ntawm Sass daim ntawv qhia.

  • tawgRenamed .font-weight-*utilities raws li .fw-*brevity thiab sib xws.

  • tawgRenamed .font-style-*utilities raws li .fst-*brevity thiab sib xws.

  • Ntxiv .d-gridrau tso saib cov khoom siv hluav taws xob thiab cov gapkhoom siv tshiab ( .gap) rau CSS Grid thiab flexbox layouts.

  • tawgTshem tawm .rounded-smthiab rounded-lg, thiab qhia txog qhov ntsuas tshiab ntawm cov chav kawm, .rounded-0rau .rounded-3. Saib #31687 .

  • Ntxiv cov line-heightkhoom siv tshiab: .lh-1, .lh-sm, .lh-basethiab .lh-lg. Saib ntawm no .

  • Tsiv cov .d-nonenqi hluav taws xob hauv peb CSS kom muab nws hnyav dua lwm cov khoom siv hluav taws xob.

  • Extended tus .visually-hidden-focusablepab los kuj ua hauj lwm ntawm ntim, siv :focus-within.

Cov pab

  • tawg Cov neeg pab cuam teb tau raug hloov npe rau cov neeg pab cuam nrog cov npe tshiab hauv chav kawm thiab txhim kho tus cwj pwm, nrog rau qhov sib txawv ntawm CSS muaj txiaj ntsig.

    • Cov chav kawm tau raug hloov npe hloov bymus rau xhauv qhov piv txwv. Piv txwv li, .ratio-16by9yog tam sim no .ratio-16x9.
    • Peb tau tso tseg .embed-responsive-itemthiab lub ntsiab pawg selector hauv kev pom zoo ntawm tus .ratio > *xaiv yooj yim dua. Tsis xav tau chav kawm ntxiv, thiab tus pab cuam piv tam sim no ua haujlwm nrog txhua yam HTML.
    • Daim $embed-responsive-aspect-ratiosntawv qhia Sass tau raug hloov npe rau $aspect-ratiosthiab nws cov txiaj ntsig tau yooj yim kom suav nrog cov npe hauv chav kawm thiab feem pua ​​​​ntawm cov key: valuekhub.
    • CSS variables yog tam sim no tsim thiab suav nrog rau txhua tus nqi hauv Sass daim ntawv qhia. Hloov kho qhov --bs-aspect-ratiosib txawv ntawm qhov .ratiolos tsim ib qho kev cai nam piv .

  • tawg Cov chav kawm "Screen reader" yog tam sim no "visually zais" chav kawm .

    • Hloov cov ntaub ntawv Sass los ntawm scss/helpers/_screenreaders.scssrauscss/helpers/_visually-hidden.scss
    • Renamed .sr-onlythiab .sr-only-focusablemus .visually-hiddenthiab.visually-hidden-focusable
    • Renamed sr-only()thiab sr-only-focusable()mixins rau visually-hidden()thiab visually-hidden-focusable().

  • bootstrap-utilities.csstam sim no kuj suav nrog peb cov neeg pab. Cov neeg pab tsis tas yuav tsum tau muab tso rau hauv kev cai tsim ntxiv lawm.

JavaScript

  • Tso tseg jQuery kev vam khom thiab rov sau cov plugins kom nyob hauv JavaScript tsis tu ncua.

  • tawgCov ntaub ntawv tus cwj pwm rau tag nrho JavaScript plugins tam sim no muaj npe los pab kom paub qhov txawv ntawm Bootstrap kev ua haujlwm los ntawm peb tog thiab koj tus kheej cov cai. Piv txwv li, peb siv data-bs-togglees tsis txhob data-toggle.

  • Tag nrho cov plugins tam sim no tuaj yeem lees txais CSS selector ua thawj qhov kev sib cav. Koj tuaj yeem dhau lub ntsiab lus DOM lossis ib qho CSS selector siv tau los tsim ib qho piv txwv tshiab ntawm lub plugin:

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

  • popperConfigtuaj yeem dhau los ua txoj haujlwm uas lees txais Bootstrap lub neej ntawd Popper config raws li kev sib cav, yog li koj tuaj yeem sib koom ua ke qhov kev teeb tsa no hauv koj txoj kev. Siv rau dropdowns, popovers, thiab tooltips.

  • Tus nqi pib rau qhov fallbackPlacementshloov pauv mus ['top', 'right', 'bottom', 'left']rau qhov kev tso kawm zoo dua ntawm Popper ntsiab. Siv rau dropdowns, popovers, thiab tooltips.

  • Tshem tawm underscore los ntawm pej xeem zoo li qub txoj kev zoo li _getInstance()→ getInstance().